Call To Action (CTA)

Component #1

Got a question?

We'd love to talk about how we can help you.

Contact Us
Image Description 
<!-- CTA Section -->
<div class="container">
  <div class="w-lg-85 mx-lg-auto">
    <div class="card bg-primary text-white overflow-hidden p-4">
      <div class="row justify-content-md-start align-items-md-center text-center text-md-left">
        <div class="col-md-6 offset-md-3 mb-3 mb-md-0">
          <h3 class="text-white mb-1">Got a question?</h3>
          <p class="text-white-70 mb-0">We'd love to talk about how we can help you.</p>
        </div>
        <div class="col-md-3 text-md-right">
          <a class="btn btn-light transition-3d-hover" href="#">Contact Us</a>
        </div>
      </div>

      <!-- SVG Component -->
      <figure class="w-25 d-none d-md-block content-centered-y ml-n4">
        <img class="img-fluid" src="../../assets/svg/illustrations/communication.svg" alt="Image Description">
      </figure>
      <!-- End SVG Component -->
    </div>
  </div>
</div>
<!-- End CTA Section -->
Copy

Component #2

Revolutionizing the way your team works!

Get Started
Image Description 
<!-- CTA Section -->
<div class="container">
  <div class="w-lg-85 mx-lg-auto">
    <div class="card overflow-hidden p-4">
      <div class="row justify-content-md-start align-items-md-center text-center text-md-left">
        <div class="col-md-5 offset-md-3 mb-3 mb-md-0">
          <h3 class="h4 mb-0">Revolutionizing the way your team works!</h3>
        </div>
        <div class="col-md-4 text-md-right">
          <a class="btn btn-primary transition-3d-hover" href="#">Get Started</a>
        </div>
      </div>

      <!-- SVG Component -->
      <figure class="w-25 d-none d-md-block position-absolute top-0 left-0 mt-n2">
        <img class="img-fluid" src="../../assets/svg/illustrations/apps.svg" alt="Image Description">
      </figure>
      <!-- End SVG Component -->
    </div>
  </div>
</div>
<!-- End CTA Section -->
Copy

Component #3

Revolutionizing the way your team works!

Explore Docs
Image Description 
<!-- CTA Section -->
<div class="container">
  <div class="w-lg-85 mx-lg-auto">
    <div class="card overflow-hidden p-5">
      <div class="row justify-content-md-start align-items-md-center text-center text-md-left">
        <div class="col-md-8 col-lg-5 offset-lg-3 mb-3 mb-md-0">
          <h3 class="h4 text-indigo mb-0">Revolutionizing the way your team works!</h3>
        </div>

        <div class="col-md-4 text-md-right">
          <a class="btn btn-primary transition-3d-hover" href="#">Explore Docs</a>
        </div>
      </div>

      <!-- SVG Component -->
      <figure class="w-35 position-absolute top-0 left-0 mt-n11 ml-n11">
        <img class="img-fluid" src="../../assets/svg/components/half-circle-2.svg" alt="Image Description">
      </figure>
      <!-- End SVG Component -->
    </div>
  </div>
</div>
<!-- End CTA Section -->
Copy

Component #4

Create better experiences with Front Pay

Get Started Learn More 
<!-- CTA Section -->
<div class="bg-primary">
  <div class="container space-2">
    <div class="row justify-content-lg-between align-items-lg-center text-center text-lg-left">
      <div class="col-lg-5 mb-5 mb-lg-0">
        <h2 class="text-white mb-0">Create better experiences with Front Pay</h2>
      </div>

      <div class="col-lg-5 text-lg-right">
        <a class="btn btn-indigo btn-wide btn-pill transition-3d-hover mx-1 mb-2" href="#">Get Started</a>
        <a class="btn btn-light btn-wide btn-pill transition-3d-hover mx-1 mb-2" href="#">Learn More</a>
      </div>
    </div>
  </div>
</div>
<!-- End CTA Section -->
Copy

Component #5

Get Front

Building brands people can't live without is how our clients grow.

Try for Free
Image Description 
<!-- CTA Section -->
<div class="container">
  <div class="bg-light rounded overflow-hidden space-top-2 space-top-lg-1 pl-5 pl-md-8">
    <div class="row justify-content-lg-between align-items-lg-center no-gutters">
      <div class="col-lg-4">
        <div class="mb-4">
          <h2 class="h1">Get Front</h2>
          <p>Building brands people can't live without is how our clients grow.</p>
        </div>
        <a class="btn btn-primary btn-wide transition-3d-hover" href="#">Try for Free</a>
      </div>

      <div class="col-lg-7 space-top-1 space-top-sm-2 ml-auto">
        <img class="img-fluid shadow-lg" src="../../assets/img/755x470/img1.jpg" alt="Image Description">
      </div>
    </div>
  </div>
</div>
<!-- End CTA Section -->
Copy

Component #6

Front makes you look at things from a different perspectives

Get Started
Image Description 
<!-- CTA Section -->
<div class="container">
  <div class="bg-light rounded overflow-hidden space-top-2 space-top-lg-1 pl-5 pl-md-8">
    <div class="row justify-content-lg-between align-items-lg-center no-gutters">
      <div class="col-lg-4">
        <div class="mb-4">
          <h2>Front makes you look at things from a different perspectives</h2>
        </div>
        <a class="btn btn-primary btn-wide btn-pill transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/">
          Get Started
          <i class="fas fa-angle-right fa-sm ml-1"></i>
        </a>
      </div>

      <div class="col-lg-7 space-top-1 space-top-sm-2 ml-auto">
        <img class="img-fluid shadow-lg" src="../../assets/img/755x470/img2.jpg" alt="Image Description">
      </div>
    </div>
  </div>
</div>
<!-- End CTA Section -->
Copy

Component #7

Start your demo with Front today

Schedule a Demo 
<!-- CTA Section -->
<div class="bg-primary text-center bg-img-hero" style="background-image: url(../../assets/svg/components/abstract-shapes-5.svg);">
  <div class="container space-2">
    <div class="mb-5">
      <h2 class="text-white">Start your demo with Front today</h2>
    </div>
    <a class="btn btn-light transition-3d-hover" href="#">Schedule a Demo</a>
  </div>
</div>
<!-- End CTA Section -->
Copy

Component #8

Find the right learning path for you

Answer a few questions and match your goals to our programs.

Explore by Category 
<!-- CTA Section -->
<div class="container space-2">
  <div class="text-center py-6" style="background: url(../../assets/svg/components/abstract-shapes-19.svg) center no-repeat;">
    <h2>Find the right learning path for you</h2>
    <p>Answer a few questions and match your goals to our programs.</p>
    <span class="d-block mt-5">
      <a class="btn btn-primary transition-3d-hover" href="#">Explore by Category</a>
    </span>
  </div>
</div>
<!-- End CTA Section -->
Copy

Component #9

Course catalog

Front Course includes over 20,000 courses.

<!-- Hero Section -->
<div class="container">
  <div class="bg-primary rounded" style="background: url(../../assets/svg/illustrations/book.svg) right bottom no-repeat;">
    <div class="w-lg-50">
      <div class="py-8 px-6">
        <h1 class="display-4 text-white">Course catalog</h1>
        <p class="text-white mb-0">Front Course includes over <span class="font-weight-bold">20,000</span> courses.</p>
      </div>
    </div>
  </div>
</div>
<!-- End Hero Section -->
Copy

Component #10

Save up to 30% with orders above $50

Shop Now 
<!-- CTA -->
<div class="bg-img-hero rounded p-6" style="background-image: url(../../assets/img/1920x800/img7.jpg);">
  <div class="row align-items-md-center">
    <div class="col-md-8 mb-3 mb-md-0">
      <h1 class="h4 mb-0">Save up to 30% with orders above $50</h1>
    </div>
    <div class="col-md-4 text-md-right">
      <a class="btn btn-primary btn-pill transition-3d-hover px-5" href="#">Shop Now</a>
    </div>
  </div>
</div>
<!-- End CTA -->
Copy