Call-to-action (CTA)
Guide your visitors through the buying journey using strategic call-to-action (CTA).
CTA #1
<!-- CTA -->
<div class="gradient-overlay-half-primary-v1">
<div class="bg-img-hero" style="background-image: url(../assets/img/bg/bg2.png);">
<div class="container">
<div class="row align-items-lg-center text-center text-lg-left space-2">
<div class="col-lg-7">
<h2 class="text-white">Get started with Space</h2>
<p class="lead text-white mb-0">Space gives you everything you need to manage business, build great stuff, and reach your goals.</p>
</div>
<div class="col-lg-5 text-lg-right">
<a class="btn btn-purple mb-2 mb-sm-0 mr-sm-2" href="../html/pages/signup-simple.html">Create Free Account</a>
<a class="btn btn-light mb-2 mb-sm-0" href="index.html">Learn More</a>
</div>
</div>
</div>
</div>
</div>
<!-- End CTA -->
CTA #2
Space community
Space is an HTML5 template, and its mission to improve the future of web. Are you ready to join us?
<!-- CTA -->
<div class="w-md-80 w-lg-60 text-center space-2 mx-auto">
<div class="mb-5">
<h2 class="h3">Space community</h2>
<p>Space is an HTML5 template, and its mission to improve the future of web. Are you ready to join us?</p>
</div>
<a class="btn btn-primary mb-2 mb-md-0 mr-md-2" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">
<span class="fab fa-github mr-2"></span>
Find us on GitHub
</a>
<a class="btn btn-dark mb-2 mb-md-0" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">
<span class="fab fa-slack mr-2"></span>
Find us on Slack
</a>
</div>
<!-- End CTA -->
CTA #3
<!-- CTA -->
<div class="gradient-half-primary-v1 text-center rounded p-5">
<div class="mb-3">
<img src="../assets/svg/logos/logo-short-white.svg" alt="Logo" style="width: 40px; max-width: 100%;">
</div>
<div class="mb-4">
<h2 class="h4 text-white">Get started now</h2>
<p class="text-white">Get customized help with your account and access your message center.</p>
</div>
<a class="btn btn-sm btn-light btn-wide" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Get Started</a>
</div>
<!-- End CTA -->
CTA #4
<!-- CTA -->
<div class="gradient-half-primary-v1">
<div class="bg-img-hero" style="background-image: url(../assets/img/bg/bg2.png);">
<div class="container">
<div class="row justify-content-lg-center align-items-md-center text-center text-md-left space-2">
<div class="col-md-2 text-md-right mb-5 mb-md-0">
<!-- Fancybox -->
<a class="js-fancybox u-media-player" href="javascript:;"
data-src="//vimeo.com/167434033"
data-speed="700"
data-animate-in="zoomIn"
data-animate-out="zoomOut"
data-caption="Space - Responsive Website Template">
<span class="u-media-player__icon u-media-player__icon--xl">
<span class="fa fa-play u-media-player__icon-inner"></span>
</span>
</a>
<!-- End Fancybox -->
</div>
<div class="col-md-10 col-lg-8">
<h2 class="text-white mb-0">Get the resources to help you succeed</h2>
<p class="text-white mb-0">Access valuable resources designed to help take your business to the next level with Space. From thought leadership articles to case studies to best practices and more, it’s all right here.</p>
</div>
</div>
</div>
</div>
</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>
CTA #5
Portfolio classic
We help startups and digital agencies launch projects on time, with no pain.
<!-- Hero Section -->
<div class="gradient-half-primary-v1">
<div class="bg-img-hero" style="background-image: url(../assets/img/bg/bg2.png);">
<div class="container space-2 space-3--lg">
<div class="w-md-80 w-lg-60 text-center mx-auto">
<!-- Title -->
<div class="mb-5">
<h1 class="display-4 font-size-48--md-down text-white">Portfolio classic</h1>
<p class="lead text-white">We help startups and digital agencies launch projects on time, with no pain.</p>
</div>
<!-- End Title -->
<!-- Buttons -->
<a class="btn btn-light btn-wide mb-2 mb-md-0 mr-sm-2" href="../html/pages/hire-us.html">Hire Us</a>
<a class="btn btn-dark btn-wide mb-2 mb-md-0" href="../html/pages/contacts-agency.html">Contact Us</a>
<!-- End Buttons -->
</div>
</div>
</div>
</div>
<!-- End Hero Section -->
CTA #6
Get 20% off your next purchase
<!-- CTA -->
<div class="gradient-half-primary-v1">
<div class="bg-img-hero" style="background-image: url(../assets/img/bg/bg2.png);">
<div class="container">
<div class="row justify-content-lg-center align-items-md-center text-center text-md-left space-2">
<div class="col-md-6 col-lg-4 mb-5 mb-md-0">
<img class="img-fluid" src="../assets/img/mockups/img8.png" alt="Image Descriptio">
</div>
<div class="col-md-6 col-lg-5">
<div class="pl-md-4">
<h2 class="h1 text-white mb-0">Get <strong>20% off</strong> your next purchase</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End CTA -->