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 Space -->
<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 -->
CTA #7
Ready to build your business on Space?
Let us guide you through our products and help you get started.
<!-- CTA Section -->
<div class="container position-relative z-index-2 mb-n9">
<div class="w-md-80 w-lg-60 mx-md-auto">
<div class="bg-primary shadow-lg text-center rounded bg-img-hero p-9" style="background-image: url(../assets/img/bg/bg2.png);">
<div class="mb-5">
<h2 class="h3 text-white">Ready to build your business on Space?</h2>
<p class="text-light">Let us guide you through our products and help you get started.</p>
</div>
<a class="btn btn-wide btn-light mb-1 mb-sm-0 mr-sm-2" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Get Started</a>
<a class="btn btn-wide btn-outline-light mb-1 mb-sm-0" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Sign Up</a>
</div>
</div>
</div>
<!-- End CTA Section -->
CTA #8
<!-- CTA Section -->
<div class="gradient-overlay-half-dark-v4 bg-img-hero" style="background-image: url(../assets/img/1920x400/img1.jpg);">
<div class="container text-center text-lg-left space-2">
<div class="row align-items-lg-center">
<div class="col-lg-9 mb-5 mb-lg-0">
<h2 class="h1 text-primary font-weight-light mb-1">Join the <span class="font-weight-medium">Space</span> community</h2>
<p class="lead text-light mb-0">Kick the tires on the best-in-class template with a free Space account.</p>
</div>
<div class="col-lg-3 text-lg-right">
<a class="btn btn-light btn-wide" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Create Account</a>
</div>
</div>
</div>
</div>
<!-- End CTA Section -->
CTA #9
Get started with Space
Space gives you everything you need to manage business, build great stuff, and reach your goals.
<!-- CTA Section -->
<div class="bg-purple">
<div class="container space-2">
<div class="row align-items-md-center text-center text-md-left">
<div class="col-md-2 d-none d-md-inline-block">
<img class="img-fluid" src="../assets/svg/components/real-time-sync-icon.svg" alt="Image Description">
</div>
<div class="col-md-7 mb-4 mb-md-0">
<div class="pl-lg-4">
<h2 class="text-white mb-1">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>
<div class="col-md-3 text-md-right">
<a class="btn btn-light btn-wide" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Learn More</a>
</div>
</div>
</div>
</div>
<!-- End CTA Section -->
CTA #10
Start talking to your users today
14 day free trial. No credit card required.
<!-- CTA Section -->
<div class="bg-purple">
<div class="container space-2">
<div class="row justify-content-md-center align-items-md-center">
<div class="col-md-4 col-lg-3 d-none d-md-inline-block">
<img class="img-fluid" src="../assets/svg/components/news-illustration.svg" alt="Image Description">
</div>
<div class="col-md-8 col-lg-6 offset-lg-1">
<!-- Title -->
<div class="mb-5">
<h2 class="text-white mb-1">Start talking to your users today</h2>
<p class="lead text-light">14 day free trial. No credit card required.</p>
</div>
<!-- End Title -->
<!-- Button -->
<button type="button" class="btn btn-xs btn-light text-left mb-2 mb-md-0 mr-md-2">
<span class="media align-items-center">
<span class="fab fa-apple fa-3x mr-3"></span>
<span class="d-block">
<span class="d-block">Download on the</span>
<strong class="d-block font-size-14">App Store</strong>
</span>
</span>
</button>
<!-- End Button -->
<!-- Button -->
<button type="button" class="btn btn-xs btn-light text-left mb-2 mb-md-0">
<span class="media align-items-center">
<span class="fab fa-google-play fa-3x mr-3"></span>
<span class="d-block">
<span class="d-block">Get it on</span>
<strong class="d-block font-size-14">Google Play</strong>
</span>
</span>
</button>
<!-- End Button -->
</div>
</div>
</div>
</div>
<!-- End CTA Section -->
CTA #11
<!-- CTA Section -->
<div class="gradient-overlay-half-purple-v2 bg-img-hero-center" style="background-image: url(../assets/img/1920x400/img1.jpg);">
<div class="container text-center space-2">
<div class="w-lg-50 mx-lg-auto">
<div class="mb-5">
<h2 class="h3 text-white">Space makes you look at things from a different perspectives.</h2>
</div>
<a class="btn btn-primary btn-wide mb-2 mb-md-0" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Start Free Trial</a>
</div>
</div>
</div>
<!-- End CTA Section -->
CTA #12
Sign up for a 14-day trial
<!-- CTA Section -->
<div class="bg-purple bg-img-hero" style="background-image: url(../assets/img/bg/bg2.png);">
<div class="container text-center text-sm-left space-2">
<div class="d-sm-flex justify-content-sm-center align-items-sm-center">
<div class="mb-4 mb-sm-0 mr-sm-7">
<h3 class="h2 text-white mb-0">Sign up for a 14-day trial</h3>
</div>
<button type="button" class="btn btn-outline-light btn-wide">Get Access</button>
</div>
</div>
</div>
<!-- End CTA Section -->
CTA #14
Newsletters
Sign up to get exclusives discounts
and any other deals everyday
Stay tuned with news and best deals. No spam, only truly and helpful contents guarantee.
<!-- Newsletter Section Info -->
<div class="bg-white space-2 px-6 px-lg-9">
<h6 class="text-uppercase text-gray-700 font-weight-medium letter-spacing-0_06 mb-3">Newsletters</h6>
<h3>Sign up to get exclusives discounts<br class="d-none d-lg-inline-block"> and any other deals everyday</h3>
<p class="mb-5">Stay tuned with news and best deals. No spam, only truly and helpful contents guarantee.</p>
<div class="input-group w-lg-70">
<input type="email" class="form-control" name="email" placeholder="Type your email address">
<div class="input-group-append">
<button type="submit" class="btn btn-primary">
<i class="svg-icon svg-icon-xs text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<rect width="24" height="24" fill="none"/>
<g data-name="telegram plane" transform="translate(3 5)">
<path d="M17.947,1.361,15.231,14.045c-.2.9-.739,1.118-1.5.7l-4.138-3.02-2,1.9a1.043,1.043,0,0,1-.832.4l.3-4.174,7.67-6.863c.333-.294-.072-.458-.518-.163L4.732,8.737.65,7.472c-.888-.275-.9-.879.185-1.3L16.8.08C17.541-.195,18.188.243,17.947,1.361Z" transform="translate(0.001 0.016)" fill="#000000"/>
</g>
</svg>
</i>
</button>
</div>
</div>
</div>
<!-- End Newsletter Section Info -->
CTA #15
Newsletters
Sign up to get exclusives discounts
and any other deals everyday
Stay tuned with news and best deals. No spam, only truly and helpful contents guarantee.
<!-- Subscribing -->
<div class="bg-primary bg-with-circles text-white overflow-hidden">
<div class="container space-2">
<div class="row align-items-center">
<div class="col-md-6 mb-4 mb-md-0">
<h6 class="text-uppercase text-white-70 font-weight-medium letter-spacing-0_06 text-lh-xs mb-2">Newsletters</h6>
<h3 class="mb-3">Sign up to get exclusives discounts<br class="d-none d-lg-inline-block"> and any other deals everyday</h3>
<p class="text-white-70 mb-0">Stay tuned with news and best deals. No spam, only truly and helpful contents guarantee.</p>
</div>
<form class="col-md-6 text-md-right">
<div class="input-group w-lg-70 ml-sm-auto">
<input type="email" class="form-control" name="email" placeholder="Type your email address">
<div class="input-group-append">
<button type="submit" class="btn btn-dark">
<i class="svg-icon svg-icon-xs text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<rect width="24" height="24" fill="none"/>
<g data-name="telegram plane" transform="translate(3 5)">
<path d="M17.947,1.361,15.231,14.045c-.2.9-.739,1.118-1.5.7l-4.138-3.02-2,1.9a1.043,1.043,0,0,1-.832.4l.3-4.174,7.67-6.863c.333-.294-.072-.458-.518-.163L4.732,8.737.65,7.472c-.888-.275-.9-.879.185-1.3L16.8.08C17.541-.195,18.188.243,17.947,1.361Z" transform="translate(0.001 0.016)" fill="#000000"/>
</g>
</svg>
</i>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End Subscribing -->