Call-to-action (CTA)

<!-- 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 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-2" href="#">Start Enterprise Trial</a>
  </div>
</div>
<!-- End CTA Section -->

<!-- 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.HSPopup.init('.js-fancybox');
  });
</script>

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