Call-to-action (CTA)
Guide your visitors through the buying journey using strategic call-to-action (CTA).
CTA #1
<div class="u-gradient-overlay-half-primary-v1 u-bg-img-hero" style="background-image: url(../assets/img/1920x400/img1.jpg);">
<div class="container u-space-2">
<div class="row align-items-md-center">
<div class="col-md-8 mb-7 mb-md-0">
<div class="media">
<div class="d-flex mr-4">
<span class="u-icon u-icon--xl u-icon-light--air rounded-circle">
<span class="fab fa-bitcoin u-icon__inner"></span>
</span>
</div>
<div class="media-body">
<h2 class="text-white font-weight-bold">What Happened to <span class="text-warning">Bitcoin?</span></h2>
<p class="u-text-light 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>
</div>
<div class="col-md-4 text-md-right">
<a class="btn btn-lg btn-warning u-btn-warning transition-3d-hover" href="#">
Cash with Our Guide
<span class="fa fa-angle-right ml-2"></span>
</a>
</div>
</div>
</div>
</div>
CTA #2
Front Template – the simplest and fastest way to build sites.
Start Enterprise Trial
<div class="bg-primary text-white text-center">
<div class="container u-space-1">
<span class="h6 d-block d-lg-inline-block font-weight-light mb-lg-0">
<span class="font-weight-bold">Front Template</span> – the simplest and fastest way to build sites.
</span>
<a class="btn btn-sm u-btn-white transition-3d-hover font-weight-normal ml-2" href="#">Start Enterprise Trial</a>
</div>
</div>
CTA #3
<div class="position-relative">
<div class="u-bg-light-blue-50">
<div class="container u-space-3">
<div class="w-md-80 w-lg-50 text-center mx-auto">
<div class="mb-4">
<span class="u-icon u-icon-white u-icon--xl shadow-sm text-primary rounded-circle">
<span class="u-icon__inner">
<img src="../assets/svg/logos/logo-short.svg" alt="Logo" style="width: 35px;">
</span>
</span>
</div>
<div class="mb-4">
<h2 class="text-primary">
<strong class="font-weight-bold">Ready</strong> to hire us?
</h2>
<p>Front helps you managing your Enterprise identity.</p>
</div>
<a class="btn btn-primary u-btn-primary u-btn-wide u-btn-pill transition-3d-hover" href="hire-us.html">Hire Front</a>
</div>
</div>
</div>
<figure class="position-absolute-bottom-0">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 140" style="margin-bottom: -8px; enable-background:new 0 0 1920 140;" xml:space="preserve">
<path class="u-fill-white" d="M960,92.9C811.4,93.3,662.8,89.4,515.3,79c-138.6-9.8-277.1-26.2-409-53.3C97.8,24,0,6.5,0,0c0,0,0,140,0,140
l960-1.2l960,1.2c0,0,0-140,0-140c0,2.7-42.1,11.3-45.8,12.2c-45.1,11-91.5,20.1-138.4,28.1c-176.2,30.1-359.9,43.8-542.9,48.9
C1115.4,91.4,1037.7,92.7,960,92.9z"/>
</svg>
</figure>
</div>
CTA #4
HTML:
<!-- CTA -->
<div class="container text-center u-space-3">
<!-- 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 u-btn-primary u-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="d-flex mr-3">
<span class="u-media-player__icon u-media-player__icon--primary">
<span class="fa fa-play u-media-player__icon-inner"></span>
</span>
</span>
<span class="media-body">
Watch video
</span>
</a>
</div>
<!-- End Fancybox -->
</div>
<!-- End CTA -->
CSS library:
<link rel="stylesheet" href="assets/vendor/fancybox/jquery.fancybox.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<!-- JS Implementing Plugins -->
<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>