Call-to-action (CTA)

Guide your visitors through buying journey using strategic call-to-action (CTA).

CTA #1

What Happened to Bitcoin?

The Bitcoin Core (BTC) – network is in trouble due to high fees and slow transaction times. Bitcoin Cash (BCH) is the upgrade that solves these problems.

                  
                    <!-- CTA -->
                    <div class="gradient-overlay-half-primary-v1 bg-img-hero" style="background-image: url(../../assets/img/1920x400/img1.jpg);">
                      <div class="container space-2">
                        <div class="row align-items-md-center">
                          <div class="col-md-8 mb-7 mb-md-0">
                            <!-- Content -->
                            <div class="media">
                              <span class="btn btn-lg btn-icon btn-soft-light rounded-circle mr-4">
                                <span class="fab fa-bitcoin btn-icon__inner"></span>
                              </span>
                              <div class="media-body">
                                <h2 class="text-white font-weight-semi-bold">What Happened to <span class="text-warning">Bitcoin?</span></h2>
                                <p class="text-white-70 mb-0"><strong class="text-white">The Bitcoin Core (BTC)</strong> – network is in trouble due to high fees and slow transaction times. Bitcoin Cash (BCH) is the upgrade that solves these problems.</p>
                              </div>
                            </div>
                            <!-- End Content -->
                          </div>

                          <div class="col-md-4 text-md-right">
                            <!-- Button Link -->
                            <a class="btn btn-warning transition-3d-hover" href="#">
                              Cash with Our Guide
                              <span class="fas fa-angle-right ml-2"></span>
                            </a>
                            <!-- End Button Link -->
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- End CTA -->
                  
                

CTA #2

Front Template – the simplest and fastest way to build sites. Start Enterprise Trial
                  
                    <!-- CTA Section -->
                    <div class="bg-primary text-white text-center">
                      <div class="container space-1">
                        <span class="h6 d-block d-lg-inline-block font-weight-light mb-lg-0">
                          <span class="font-weight-semi-bold">Front Template</span> – the simplest and fastest way to build sites.
                        </span>
                        <a class="btn btn-sm btn-white transition-3d-hover font-weight-normal ml-3" href="#">Start Enterprise Trial</a>
                      </div>
                    </div>
                    <!-- End CTA Section -->
                  
                

CTA #3

Join over 35,000 happy customers selling houses online

                  
                    <!-- CTA -->
                    <div class="container text-center">
                      <!-- Title -->
                      <div class="w-md-60 text-center mx-auto mb-6">
                        <h2 class="font-weight-medium">Join over <strong class="text-primary">35,000</strong> happy customers selling houses online</h2>
                      </div>
                      <!-- End Title -->

                      <div class="mb-6">
                        <a class="btn btn-primary btn-wide transition-3d-hover" href="#">Get Started Now</a>
                      </div>

                      <!-- Fancybox -->
                      <div class="d-flex justify-content-center">
                        <a class="js-fancybox media align-items-center u-media-player" href="javascript:;"
                           data-src="//vimeo.com/167434033"
                           data-speed="700"
                           data-animate-in="zoomIn"
                           data-animate-out="zoomOut"
                           data-caption="Front - Responsive Website Template">
                          <span class="u-media-player__icon u-media-player__icon--primary mr-3">
                            <span class="fas fa-play u-media-player__icon-inner"></span>
                          </span>
                          <span class="media-body">
                            Watch video
                          </span>
                        </a>
                      </div>
                      <!-- End Fancybox -->
                    </div>
                    <!-- End CTA -->
                  
                
                  
                    <!-- CSS Implementing Plugins -->
                    <link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>

                    <!-- JS Front -->
                    <script src="../../assets/js/components/hs.fancybox.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of popups
                        $.HSCore.components.HSFancyBox.init('.js-fancybox');
                      });
                    </script>
                  
                

CTA #4

Ready to get started?

Front Template – the simplest and fastest way to build sites.

Start Free Trial
Image Description
Image Description
                  
                    <!-- CTA Section -->
                    <div id="SVGctaSection" class="svg-preloader position-relative gradient-half-primary-v1 text-center z-index-2 overflow-hidden">
                      <div class="container space-2">
                        <h3 class="h2 text-info font-weight-semi-bold mb-3">Ready to get started?</h3>
                        <p class="lead text-white mb-5">
                          <span class="font-weight-semi-bold">Front Template</span> – the simplest and fastest way to build sites.
                        </p>
                        <a class="btn btn-white btn-wide transition-3d-hover" href="#">Start Free Trial</a>
                      </div>

                      <!-- SVG Component -->
                      <figure class="position-absolute top-0 left-0 w-100 max-width-27 z-index-n1">
                        <img class="js-svg-injector" src="../../assets/svg/components/abstract-shapes-8.svg" alt="Image Description"
                             data-parent="#SVGctaSection">
                      </figure>
                      <!-- End SVG Component -->

                      <!-- SVG Component -->
                      <figure class="position-absolute bottom-0 right-0 w-100 max-width-27 z-index-n1">
                        <img class="js-svg-injector" src="../../assets/svg/components/abstract-shapes-5.svg" alt="Image Description"
                             data-parent="#SVGctaSection">
                      </figure>
                      <!-- End SVG Component -->
                    </div>
                    <!-- End CTA Section -->
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                    <!-- JS Front -->
                    <script src="../../assets/js/components/hs.svg-injector.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of svg injector module
                        $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                      });
                    </script>
                  
                

CTA #5

Front makes you look at things from a different perspectives.

Get Started
Image Description
                  
                    <!-- CTA Section -->
                    <div id="SVGshowcaseMockup2" class="svg-preloader container">
                      <div class="bg-primary text-white shadow-primary-lg rounded p-5 p-md-9">
                        <div class="row justify-content-lg-between align-items-md-center">
                          <div class="col-md-5 mb-7 mb-md-0">
                            <!-- Info -->
                            <div class="mb-5">
                              <h2 class="font-weight-normal">Front makes you look at things from a different perspectives.</h2>
                            </div>
                            <a class="btn btn-white btn-wide btn-pill transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/">
                              Get Started
                              <span class="fas fa-arrow-right text-primary font-size-1 ml-2"></span>
                            </a>
                            <!-- End Info -->
                          </div>

                          <div class="col-md-7 col-lg-5">
                            <!-- Showcase Mockup -->
                            <figure class="ie-showcase-mockup-2">
                              <img class="js-svg-injector" src="../../assets/svg/illustrations/showcase-mockup-2.svg" alt="Image Description"
                                   data-img-paths='[
                                     {"targetId": "#SVGshowcaseMockup2Img1", "newPath": "../../assets/img/435x550/img1.jpg"}
                                   ]'
                                   data-parent="#SVGshowcaseMockup2">
                            </figure>
                            <!-- End Showcase Mockup -->
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- End CTA Section -->
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                    <!-- JS Front -->
                    <script src="../../assets/js/components/hs.svg-injector.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of svg injector module
                        $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                      });
                    </script>
                  
                

CTA #6

SVG

Grow your business with Front Pay

From startups to Fortune 500s, explore how millions of businesses use Front Pay to start and scale their companies. See our customers

                  
                    <!-- CTA -->
                    <div class="container">
                      <div class="w-lg-75 mx-lg-auto">
                        <div class="media d-block d-sm-flex">
                          <figure id="iconGrowingBusiness" class="svg-preloader ie-height-90 w-100 max-width-15 mr-4 mb-3 mb-sm-0">
                            <img class="js-svg-injector" src="../../assets/svg/illustrations/growing-business.svg" alt="SVG"
                                 data-parent="#iconGrowingBusiness">
                          </figure>
                          <div class="media-body">
                            <h4 class="h6">Grow your business with Front Pay</h4>
                            <p>From startups to Fortune 500s, explore how millions of businesses use Front Pay to start and scale their companies.
                              <a href="#">
                                See our customers
                                <span class="fas fa-angle-right ml-1"></span>
                              </a>
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- End CTA -->
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                    <!-- JS Front -->
                    <script src="../../assets/js/components/hs.svg-injector.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of svg injector module
                        $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                      });
                    </script>
                  
                

CTA #7

Create better experiences with Front Pay

Image Description
                  
                    <!-- CTA Section -->
                    <div id="SVGCTA7" class="svg-preloader position-relative">
                      <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">
                            <h3 class="h2 text-white font-weight-semi-bold mb-0">Create better experiences with Front Pay</h3>
                          </div>

                          <div class="col-lg-5 text-lg-right">
                            <a class="btn btn-indigo btn-wide btn-pill transition-3d-hover mr-3" href="#">Get Started</a>
                            <a class="btn btn-white btn-wide btn-pill text-primary shadow-soft transition-3d-hover" href="#">Learn More</a>
                          </div>
                        </div>
                      </div>

                      <!-- SVG Top Shape -->
                      <figure class="gradient-overlay-half-primary-v3 position-absolute top-0 right-0 bottom-0 left-0 z-index-n1 overflow-hidden">
                        <img class="js-svg-injector d-none d-md-block" src="../../assets/svg/components/circles.svg" alt="Image Description"
                             data-parent="#SVGCTA7">
                      </figure>
                      <!-- End SVG Top Shape -->
                    </div>
                    <!-- End CTA Section -->
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                    <!-- JS Front -->
                    <script src="../../assets/js/components/hs.svg-injector.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of svg injector module
                        $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                      });
                    </script>
                  
                

CTA #8

Revolutionizing the way your team works!

Image Description
                  
                    <!-- CTA Section -->
                    <div class="container space-2">
                      <div class="w-lg-85 mx-lg-auto">
                        <div id="SVGCTA8" class="svg-preloader card border-0 shadow 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 font-weight-medium 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">
                            <div class="mt-n11 ml-n11">
                              <img class="js-svg-injector" src="../../assets/svg/components/half-circle-2.svg" alt="Image Description"
                                   data-parent="#SVGCTA8">
                            </div>
                          </figure>
                          <!-- End SVG Component -->
                        </div>
                      </div>
                    </div>
                    <!-- End CTA Section -->
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                    <!-- JS Front -->
                    <script src="../../assets/js/components/hs.svg-injector.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of svg injector module
                        $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                      });
                    </script>
                  
                

CTA #9

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-15.svg);">
                      <div class="container space-2">
                        <div class="mb-5">
                          <h3 class="h2 text-white font-weight-normal">Start your demo with Front today</h3>
                        </div>
                        <a class="btn btn-white transition-3d-hover" href="#">Schedule a Demo</a>
                      </div>
                    </div>
                    <!-- End CTA Section -->
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                    <!-- JS Front -->
                    <script src="../../assets/js/components/hs.svg-injector.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of svg injector module
                        $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                      });
                    </script>
                  
                

CTA #10

Save up to 30% with orders above $50

                  
                    <!-- CTA -->
                    <div class="bg-img-hero rounded p-6 mb-5" style="background-image: url(../../assets/img/1920x800/img19.jpg);">
                      <div class="row align-items-md-center">
                        <div class="col-md-8 mb-3 mb-md-0">
                          <h1 class="h4 font-weight-medium 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 -->
                  
                

CTA #11

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-8">
                        <div class="row justify-content-lg-between align-items-lg-center no-gutters">
                          <div class="col-lg-4 mb-5 mb-lg-0">
                            <div class="mb-4">
                              <h2 class="h1 font-weight-semi-bold">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="ml-auto col-lg-7 space-top-1 space-top-sm-2">
                            <div class="position-relative z-index-2 mb-n5">
                              <img class="img-fluid shadow-lg" src="../../assets/img/755x470/img2.jpg" alt="Image Description">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- End CTA Section -->
                  
                

CTA #12

New York,

Brooklyn

Call us
+1 (062) 109-9222
Email us
support@htmlstream.com
Visit us
153 Williamson Plaza, Maggieberg
                  
                    <!-- Google Map Section -->
                    <div class="position-relative mx-3 mx-md-8">
                      <div class="container space-2 space-lg-3">
                        <div class="row justify-content-md-end">
                          <div class="col-md-6 col-lg-5">
                            <div class="card bg-white position-relative z-index-2 p-5 p-sm-7">
                              <div class="mb-5">
                                <h4 class="h2 font-weight-normal text-lh-sm mb-0">New York,</h4>
                                <h4 class="h1 font-weight-semi-bold text-lh-sm">Brooklyn</h4>
                              </div>

                              <!-- Contacts -->
                              <div class="media mb-5">
                                <span class="btn btn-icon btn-sm btn-soft-primary rounded-circle mr-3">
                                  <span class="fas fa-phone btn-icon__inner"></span>
                                </span>
                                <div class="media-body">
                                  <h5 class="h6 font-weight-semi-bold mb-0">Call us</h5>
                                  <span class="d-block text-secondary font-size-1">+1 (062) 109-9222</span>
                                </div>
                              </div>
                              <!-- End Contacts -->

                              <!-- Contacts -->
                              <div class="media mb-5">
                                <span class="btn btn-icon btn-sm btn-soft-primary rounded-circle mr-3">
                                  <span class="fas fa-envelope btn-icon__inner"></span>
                                </span>
                                <div class="media-body text-truncate">
                                  <h5 class="h6 font-weight-semi-bold mb-0">Email us</h5>
                                  <span class="d-block text-secondary font-size-1">support@htmlstream.com</span>
                                </div>
                              </div>
                              <!-- End Contacts -->

                              <!-- Contacts -->
                              <div class="media">
                                <span class="btn btn-icon btn-sm btn-soft-primary rounded-circle mr-3">
                                  <span class="fas fa-map-marker-alt btn-icon__inner"></span>
                                </span>
                                <div class="media-body">
                                  <h5 class="h6 font-weight-semi-bold mb-0">Visit us</h5>
                                  <span class="d-block text-secondary font-size-1">153 Williamson Plaza, Maggieberg</span>
                                </div>
                              </div>
                              <!-- End Contacts -->
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- Gmap -->
                      <div class="position-md-absolute top-0 right-0 bottom-0 left-0">
                        <div id="GMapCustomized-light" class="js-g-map embed-responsive embed-responsive-21by9 rounded h-100"
                             data-type="custom"
                             data-lat="40.674"
                             data-lng="-73.946"
                             data-zoom="12"
                             data-title="Front"
                             data-pin="true"
                             data-pin-icon="../../assets/img/map-markers/map-marker6.png"
                             data-styles='[
                               ["", "", [{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]],
                               ["", "labels", [{"visibility":"on"}]],
                               ["water", "", [{"color":"#bac6cb"}]]
                             ]'></div>
                      </div>
                      <!-- End Gmap -->
                    </div>
                    <!-- End Google Map Section -->
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/gmaps/gmaps.min.js"></script>

                    <!-- JS Front -->
                    <script src="../../assets/js/components/hs.g-map.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      // initialization of google map
                      function initMap() {
                        $.HSCore.components.HSGMap.init('.js-g-map');
                      }
                    </script>
                    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABAaQLTeSRRn4egPXc1tRNi40scrXvcQM&callback=initMap" async defer></script>