Call-to-action (CTA)
Guide your visitors through buying journey using strategic call-to-action (CTA).
CTA #1
<!-- 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
<!-- 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
<!-- 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.
<!-- 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
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
<!-- 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!
<!-- 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
<!-- 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.
<!-- 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-9222Email us
support@htmlstream.comVisit 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>