# CTA Sections

About Award Blog Call to Action Clients Contact Carousel Case Study Facts FAQ Features Form Footer Hero Integration Industry Location Navbar Portfolio Pricing Process Services Team Testimonials

## CTA #1

### Try our powerful work management tools

Sign up for a free two-week trial of Block today — no credit card required.

Please choose a email.

    <!--Call to action start-->
    <section class="py-5">
        <div class="container">
            <div class="row bg-pattern bg-primary-gradient rounded-3 p-7 g-0">
                <div
                    class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1 col-md-12 col-12">
                    <div class="position-relative z-1 my-lg-5">
                        <div class="mb-5 text-center">
                            <h3 class="h2 text-white-stable mb-1">Try our
                                powerful work management tools</h3>
                            <p class="mb-0 text-white-stable">Sign up for a free
                                two-week trial of Block today — no credit card
                                required.</p>
                        </div>
                        <form class="row g-2 needs-validation d-flex mx-lg-7"
                            novalidate>
                            <div class="col-md-7 col-xl-7 col-12">
                                <label for="notificationEmail"
                                    class="visually-hidden"></label>
                                <input type="email" id="notificationEmail"
                                    class="form-control"
                                    placeholder="Enter your business email"
                                    aria-label="Enter your business email"
                                    required />
                                <div class="invalid-feedback text-start">Please
                                    choose a email.</div>
                            </div>
                            <div class="col-md-5 col-xl-5 col-12">
                                <div class="d-grid">
                                    <button class="btn btn-dark"
                                        type="submit">Get notified for
                                        free</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Call to action end-->

## CTA #2

## Join for free today.

Supercharge your team with the best sales acceleration and business automation tools.

Email
Please choose a email.
Try it free for 30 Days.
No credit card required.
Cancel anytime.

    <!--Call to action start-->
    <section class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-md-10 offset-md-1">
                    <!-- cta style 1 -->
                    <div
                        class="text-center bg-primary bg-opacity-25 p-md-7 p-4 rounded-4 pattern-square">
                        <div class="mb-6">
                            <h2 class="display-6 h1">Join for free today.</h2>
                            <p class="mb-0">Supercharge your team with the best
                                sales acceleration and business automation
                                tools.</p>
                        </div>

                        <form
                            class="row d-flex justify-content-center mb-6 needs-validation"
                            novalidate>
                            <div class="col-lg-6">
                                <label for="subscribeEmail"
                                    class="visually-hidden">Email</label>
                                <div class="input-group has-validation">
                                    <input type="text" id="subscribeEmail"
                                        class="form-control border-primary"
                                        placeholder="Enter your business email"
                                        aria-label="Enter your business email"
                                        aria-describedby="basic-addon2"
                                        required />
                                    <button class="btn btn-primary"
                                        type="submit" id="basic-addon2">Join
                                        Now</button>
                                    <div class="invalid-feedback text-start">
                                        Please choose a email.</div>
                                </div>
                            </div>
                        </form>

                        <div
                            class="d-flex align-items-center justify-content-center flex-wrap">
                            <span class="me-3">
                                <svg xmlns="http://www.w3.org/2000/svg"
                                    width="16" height="16" fill="currentColor"
                                    class="bi bi-check-circle-fill text-dark"
                                    viewBox="0 0 16 16">
                                    <path
                                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
                                </svg>
                                <span class="text-dark ms-2">Try it free for 30
                                    Days.</span>
                            </span>
                            <span class="me-3">
                                <svg xmlns="http://www.w3.org/2000/svg"
                                    width="16" height="16" fill="currentColor"
                                    class="bi bi-check-circle-fill text-dark"
                                    viewBox="0 0 16 16">
                                    <path
                                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
                                </svg>
                                <span class="text-dark ms-2">No credit card
                                    required.</span>
                            </span>
                            <span>
                                <svg xmlns="http://www.w3.org/2000/svg"
                                    width="16" height="16" fill="currentColor"
                                    class="bi bi-check-circle-fill text-dark"
                                    viewBox="0 0 16 16">
                                    <path
                                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
                                </svg>
                                <span class="text-dark ms-2">Cancel
                                    anytime.</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Call to action end-->

## CTA #3

## Experience the next-gen banking

Enim sed parturient sem enim nunc sit erat velit eget hac nulla nullam et id praesent nisi ornare risus risus consequat nunc nisl pellentesque diam neque.

Open an account today

    <!--Call to action start-->
    <section>
        <div style="background-image: url(../assets/images/pattern/cta-pattern.png); background-position: center; background-repeat: no-repeat; background-size: cover"
            class="py-7 bg-primary-dark">
            <div class="container my-lg-7">
                <div class="row">
                    <div class="col-lg-8 offset-lg-2">
                        <div class="text-center mb-5">
                            <h2 class="text-white-stable mb-3">Experience the
                                next-gen banking</h2>
                            <p class="mb-0 text-white-50">
                                Enim sed parturient sem enim nunc sit erat velit
                                eget hac nulla nullam et id praesent nisi ornare
                                risus risus consequat nunc nisl pellentesque
                                diam neque.
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="text-center">
                            <a href="#!" class="btn btn-primary">Open an account
                                today</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Call to action end-->

## CTA #4

### Ready to attend?

Ready to join our block community of business leaders for four days of virtual sessions on driving developer happiness and boosting productivity?

Register Now

    <!--Call to action start-->
    <section class="my-lg-7 py-5">
        <div class="container">
            <div
                class="row bg-pattern bg-primary-gradient rounded-3 py-lg-7 py-5 g-0">
                <div class="col-md-8 offset-md-2">
                    <div class="text-center position-relative z-1 px-5"
                        >
                        <div class="mb-5">
                            <h3 class="h2 text-white-stable mb-3">Ready to
                                attend?</h3>
                            <p class="mb-0 text-white-stable">
                                Ready to join our block community of business
                                leaders for four days of virtual sessions on
                                driving developer happiness and boosting
                                productivity?
                            </p>
                        </div>

                        <a href="#" class="btn btn-dark">Register Now</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Call to action end-->

## CTA #5

## Want to speak with a expert?

We’d love to hear about your brand and business challenges, even if you’re not sure what your next step is. No pitch, no strings attached.

Let's talk

    <!--speak with expert-->
    <section class="my-9">
        <div class="container">
            <div class="row line-pattern bg-primary-gradient rounded-3 p-7 g-0">
                <div class="col-lg-8 offset-lg-2 z-1">
                    <div class="text-center py-md-7">
                        <h2 class="h1 text-white-stable">Want to speak with a
                            expert?</h2>
                        <p class="text-white-50 px-lg-7 mb-5">
                            We’d love to hear about your brand and business
                            challenges, even if you’re not sure what your next
                            step is. No pitch, no strings attached.
                        </p>
                        <a href="#!" class="btn btn-dark">Let's talk</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--speak with expert-->

## CTA #6

## Have a Cool Project idea?

Plan to building a new website or web app for startup.

Start by saying Hi..

    <!--project idea-->
    <section class="py-lg-8 py-5 bg-gray-900">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 offset-lg-1 col-md-12">
                    <div class="row align-items-center">
                        <div class="col-lg-8 col-md-7">
                            <div class="text-center text-md-start mb-6 mb-md-0">
                                <h2 class="text-white-stable">Have a Cool
                                    Project idea?</h2>
                                <p class="mb-0 text-dark-50">Plan to building a
                                    new website or web app for startup.</p>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-5">
                            <div class="text-center">
                                <a href="#" class="btn btn-primary">Start by
                                    saying Hi..</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--project idea-->

## CTA #7

## Try our powerful work management tools

Sign up for a free two-week trial of Block today — no credit card required.

Get Started for free

- No credit card required
- 1 month free trial

    <!--powerfull work-->
    <section class="container mb-lg-8  py-5">
        <div class="row g-0">
            <div class="col-12">
                <div class="bg-gray-900 rounded-3">
                    <div class="row align-items-center">
                        <div class="offset-xl-1 col-xl-4 col-lg-12">
                            <div class="d-flex flex-column gap-4 p-6 p-xl-0">
                                <div>
                                    <h2 class="text-white-stable">Try our
                                        powerful work management tools</h2>
                                    <p class="mb-0 me-lg-8">Sign up for a free
                                        two-week trial of Block today — no
                                        credit card required.</p>
                                </div>
                                <div>
                                    <a href="#" class="btn btn-primary">Get
                                        Started for free</a>
                                </div>
                                <div>
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <span>
                                                <svg xmlns="http://www.w3.org/2000/svg"
    width="16" height="17"
    viewBox="0 0 16 17"
    fill="none">
    <g
        clip-path="url(#clip0_1710_19624)">
        <path
            d="M16 8.61426C16 10.736 15.1571 12.7708 13.6569 14.2711C12.1566 15.7714 10.1217 16.6143 8 16.6143C5.87827 16.6143 3.84344 15.7714 2.34315 14.2711C0.842855 12.7708 0 10.736 0 8.61426C0 6.49253 0.842855 4.45769 2.34315 2.9574C3.84344 1.45711 5.87827 0.614258 8 0.614258C10.1217 0.614258 12.1566 1.45711 13.6569 2.9574C15.1571 4.45769 16 6.49253 16 8.61426ZM12.03 5.58426C11.9586 5.51308 11.8735 5.45703 11.7799 5.41947C11.6863 5.38192 11.5861 5.36362 11.4853 5.36567C11.3845 5.36772 11.2851 5.39009 11.1932 5.43143C11.1012 5.47276 11.0185 5.53223 10.95 5.60626L7.477 10.0313L5.384 7.93726C5.24183 7.80478 5.05378 7.73266 4.85948 7.73608C4.66518 7.73951 4.47979 7.81822 4.34238 7.95564C4.20497 8.09305 4.12625 8.27843 4.12283 8.47274C4.1194 8.66704 4.19152 8.85508 4.324 8.99726L6.97 11.6443C7.04128 11.7154 7.12616 11.7715 7.21958 11.8091C7.313 11.8467 7.41305 11.8652 7.51375 11.8633C7.61444 11.8614 7.71374 11.8393 7.8057 11.7982C7.89766 11.7572 7.9804 11.698 8.049 11.6243L12.041 6.63426C12.1771 6.49276 12.2523 6.30353 12.2504 6.10722C12.2485 5.9109 12.1698 5.72314 12.031 5.58426H12.03Z"
            fill="#F1F5F9" />
    </g>
    <defs>
        <clipPath
            id="clip0_1710_19624">
            <rect width="16"
                height="16"
                fill="white"
                transform="translate(0 0.614258)" />
        </clipPath>
    </defs>
                                                </svg>
                                            </span>
                                            <span class="ms-1">No credit card
                                                required</span>
                                        </li>
                                        <li class="list-inline-item">
                                            <span>
                                                <svg xmlns="http://www.w3.org/2000/svg"
    width="16" height="17"
    viewBox="0 0 16 17"
    fill="none">
    <g
        clip-path="url(#clip0_1710_19624)">
        <path
            d="M16 8.61426C16 10.736 15.1571 12.7708 13.6569 14.2711C12.1566 15.7714 10.1217 16.6143 8 16.6143C5.87827 16.6143 3.84344 15.7714 2.34315 14.2711C0.842855 12.7708 0 10.736 0 8.61426C0 6.49253 0.842855 4.45769 2.34315 2.9574C3.84344 1.45711 5.87827 0.614258 8 0.614258C10.1217 0.614258 12.1566 1.45711 13.6569 2.9574C15.1571 4.45769 16 6.49253 16 8.61426ZM12.03 5.58426C11.9586 5.51308 11.8735 5.45703 11.7799 5.41947C11.6863 5.38192 11.5861 5.36362 11.4853 5.36567C11.3845 5.36772 11.2851 5.39009 11.1932 5.43143C11.1012 5.47276 11.0185 5.53223 10.95 5.60626L7.477 10.0313L5.384 7.93726C5.24183 7.80478 5.05378 7.73266 4.85948 7.73608C4.66518 7.73951 4.47979 7.81822 4.34238 7.95564C4.20497 8.09305 4.12625 8.27843 4.12283 8.47274C4.1194 8.66704 4.19152 8.85508 4.324 8.99726L6.97 11.6443C7.04128 11.7154 7.12616 11.7715 7.21958 11.8091C7.313 11.8467 7.41305 11.8652 7.51375 11.8633C7.61444 11.8614 7.71374 11.8393 7.8057 11.7982C7.89766 11.7572 7.9804 11.698 8.049 11.6243L12.041 6.63426C12.1771 6.49276 12.2523 6.30353 12.2504 6.10722C12.2485 5.9109 12.1698 5.72314 12.031 5.58426H12.03Z"
            fill="#F1F5F9" />
    </g>
    <defs>
        <clipPath
            id="clip0_1710_19624">
            <rect width="16"
                height="16"
                fill="white"
                transform="translate(0 0.614258)" />
        </clipPath>
    </defs>
                                                </svg>
                                            </span>
                                            <span class="ms-1">1 month free
                                                trial</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="offset-xl-1 col-xl-5 col-lg-12">
                            <div class="pt-xl-8 d-none d-xl-block">
                                <img src="../assets/images/landings/sass-v3/cta-img.svg"
                                    class="img-fluid w-xxl-100" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--powerfull work-->

## CTA #7

## Subscribe to our newsletter

Enjoy using Block Template and stay tuned for the latest updates and news.

Email.

    <!--Call to action start-->
      <section class="py-5 bg-light-subtle">
         <div class="container my-lg-7">
            <div class="row justify-content-center text-center">
               <div class="col-lg-6 col-md-9 col-12 d-flex flex-column gap-4">
                  <div>
                     <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                        <path opacity="0.2" d="M42 18L27.2719 28.5H20.7281L6 18L24 6L42 18Z" fill="#8B3DFF" />
                        <path
                           d="M42.8325 16.7512L24.8325 4.75125C24.586 4.58679 24.2963 4.49902 24 4.49902C23.7037 4.49902 23.414 4.58679 23.1675 4.75125L5.1675 16.7512C4.96202 16.8883 4.79358 17.0741 4.67713 17.2919C4.56068 17.5098 4.49984 17.753 4.5 18V37.5C4.5 38.2956 4.81607 39.0587 5.37868 39.6213C5.94129 40.1839 6.70435 40.5 7.5 40.5H40.5C41.2957 40.5 42.0587 40.1839 42.6213 39.6213C43.1839 39.0587 43.5 38.2956 43.5 37.5V18C43.5002 17.753 43.4393 17.5098 43.3229 17.2919C43.2064 17.0741 43.038 16.8883 42.8325 16.7512ZM18.135 28.5L7.5 36V20.9119L18.135 28.5ZM21.2044 30H26.7956L37.4137 37.5H10.5862L21.2044 30ZM29.865 28.5L40.5 20.9119V36L29.865 28.5ZM24 7.80187L39.3581 18.0412L26.7956 27H21.2081L8.64563 18.0412L24 7.80187Z"
                           fill="#8B3DFF" />
                     </svg>
                  </div>
                  <div>
                     <h2 class="fs-1">Subscribe to our newsletter</h2>
                     <p class="mb-0">Enjoy using Block Template and stay tuned for the latest updates and news.</p>
                  </div>
                  <div>
                     <form
                        class="row g-2 d-flex mx-lg-7"
                        action="https://codescandy.us1.list-manage.com/subscribe/post?u=b838b4eb099ebf09c3407db0f&amp;id=b01fb647c7&amp;f_id=00e5e0e5f0"
                        method="post"
                        name="mc-embedded-subscribe-form"
                        novalidate>
                        <div class="col-md-9 col-12">
                           <label for="notificationEmail" class="visually-hidden"></label>
                           <input type="email" id="notificationEmail" class="form-control" name="EMAIL" placeholder="Email" required="" />
                           <div class="invalid-feedback text-start">Email.</div>
                        </div>
                        <div class="col-md-3 col-12">
                           <div class="d-grid">
                              <button class="btn btn-dark" type="submit" name="subscribe">Subscribe</button>
                           </div>
                        </div>
                        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups -->
                        <div style="position: absolute; left: -5000px" aria-hidden="true">
                           <input class="subscription-form-antispam" type="text" name="b_b838b4eb099ebf09c3407db0f_b01fb647c7" tabindex="-1" />
                        </div>
                     </form>
                  </div>
               </div>
            </div>
         </div>
       </section>
       <!--Call to action end-->

## CTA #8

## Schedule a Free SEO Consultation

Unlock your website’s potential with a free SEO consultation from [Agency Name].

Our experts will provide personalized strategies to boost your search rankings and drive traffic. Schedule now!"

Book my free consultation

     <div class="container py-5" data-bs-theme="dark">
        <div class="row px-lg-6 py-lg-6 p-4 align-items-center bg-primary rounded-3 g-lg-0">
           <div class="col-xl-5 col-md-7">
              <h2 class="text-white-stick">Schedule a Free SEO Consultation</h2>
              <p class="text-white-stick">Unlock your website’s potential with a free SEO consultation from [Agency Name].</p>
           </div>
           <div class="offset-xl-2 col-xl-5 col-md-5">
              <div class="text-lg-center">
                 <p class="text-white-stick">Our experts will provide personalized strategies to boost your search rankings and drive traffic. Schedule now!"</p>
                 <a href="#" class="btn btn-warning" >Book my free consultation</a>
              </div>
           </div>
        </div>
      </div>

## CTA #9

## Download Block App to get started

Download Block App

      <!--Call to action-->
     <section class="py-6">
        <div class="container">
           <div
              class="py-10 px-4 rounded-4"
              style="
                 background: url(../assets/images/mobile-app/curvlines.svg), linear-gradient(180deg, #9b58ff 0%, #8837ff 47.92%, #7a20ff 100%);
                 background-position: center;
                 background-repeat: no-repeat;
                 background-size: cover;
              ">
              <div class="row mb-7">
                 <div class="col-xxl-6 offset-xxl-3 col-lg-8 offset-lg-2 col-12">
                    <div class="text-center d-flex flex-column gap-5">
                       <h2 class="mb-0 display-4 text-white-stable px-xl-5">Download Block App to get started</h2>
                    </div>
                 </div>
              </div>
              <div class="row align-items-center justify-content-center">
                 <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-5 col-10">
                    <div class="align-items-center d-flex flex-row bg-body p-2 rounded-2 shadow-lg">
                       <div class="text-center">
                          <p class="mb-0 text-dark fw-semibold px-xxl-4 px-xl-7 px-lg-5">Download Block App</p>
                       </div>
                       <div class="">
                          <img src="../assets/images/mobile-app/qr-code.svg" alt="qr coed" class="icon-shape icon-xxxl" />
                       </div>
                    </div>
                 </div>
              </div>
           </div>
        </div>
     </section>
    <!--Call to action-->