Call To Action (CTA)
Component #1
Got a question?
We'd love to talk about how we can help you.
<!-- 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 -->
Component #2
Revolutionizing the way your team works!
<!-- 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 -->
Component #3
Revolutionizing the way your team works!
<!-- 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 -->
Component #4
Create better experiences with Front Pay
<!-- 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 -->
Component #5
Get Front
Building brands people can't live without is how our clients grow.
<!-- 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 -->
Component #6
Front makes you look at things from a different perspectives
<!-- 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 -->
Component #7
Start your demo with Front today
<!-- 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 -->
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 -->
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 -->
Component #10
Save up to 30% with orders above $50
<!-- 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 -->