Call To Action (CTA)

Component #1

Got a question?

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

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 -->
                    
                  

Component #2

Revolutionizing the way your team works!

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 -->
                    
                  

Component #3

Revolutionizing the way your team works!

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 -->
                    
                  

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.

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 -->
                    
                  

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 -->
                    
                  

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 -->
                    
                  

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 -->