Call-to-Action (CTA)
Component #1
Start your business journey with Space
Try Space for free, and explore all the tools and services you need to start, run, and grow your business.
<!-- CTA -->
<div class="container content-space-1">
<div class="text-center">
<img class="mb-5" src="../assets/img/illustrations/hi-five.png" alt="Illustration" style="width: 12.5rem;">
</div>
<!-- Heading -->
<div class="w-lg-65 text-center mx-lg-auto mb-7">
<h3>Start your business journey with Space</h3>
<p class="fs-6">Try Space for free, and explore all the tools and services you need to start, run, and grow your business.</p>
</div>
<!-- End Heading -->
<div class="text-center">
<a class="btn btn-primary" href="../page-login.html">Start free trial</a>
</div>
</div>
<!-- End CTA -->
Component #2
Can't find what you are looking for?
<!-- CTA -->
<div class="container content-space-1">
<div class="w-lg-75 mx-lg-auto">
<div class="row align-items-sm-center">
<div class="col-sm-6 mb-5 mb-sm-0">
<div class="w-75 mx-auto">
<img class="img-fluid" src="../assets/img/illustrations/sending.png" alt="Illustration">
</div>
</div>
<!-- End Col -->
<div class="col-sm-6">
<div class="ps-sm-5">
<div class="mb-sm-5">
<h3>Can't find what you are looking for?</h3>
</div>
<a class="link" href="../page-contacts.html">Contact us <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End CTA -->
Component #3
<!-- CTA -->
<div class="bg-primary-dark overflow-hidden">
<div class="container position-relative content-space-1 content-space-md-3">
<!-- Heading -->
<div class="w-lg-65 text-center mx-lg-auto">
<div class="mb-7">
<h2 class="text-white">Have a project in mind?<br>Let’s get to work.</h2>
</div>
<a class="btn btn-primary" href="#">Start a project</a>
</div>
<!-- End Heading -->
<!-- Background Shapes -->
<div class="position-absolute" style="top: -6rem; left: -6rem;">
<img src="../assets/svg/components/shape-1-soft-light.svg" alt="SVG" width="500" style="width: 12rem;">
</div>
<div class="position-absolute" style="bottom: -6rem; right: -7rem;">
<img src="../assets/svg/components/shape-7-soft-light.svg" alt="SVG" width="250">
</div>
<!-- End Background Shapes -->
</div>
</div>
<!-- End CTA -->
Component #4
We are design changers
Get a weekly dose of insightful people strategy content, helpful resources, new job opportunities, and people-driven events.
<!-- Mockup Card -->
<div class="container">
<div class="bg-soft-success p-4 pb-sm-0 pe-sm-0 pt-sm-5 ps-sm-7">
<div class="position-relative overflow-hidden">
<div class="row justify-content-lg-between">
<div class="col-sm-6 py-5 pb-sm-10">
<div class="mb-5">
<h3>We are design changers</h3>
<p>Get a weekly dose of insightful people strategy content, helpful resources, new job opportunities, and people-driven events.</p>
</div>
<a class="btn btn-outline-primary" href="../page-login.html">Sign up today</a>
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-5 d-none d-sm-block">
<!-- Devices -->
<div class="devices position-absolute top-0 start-50">
<!-- Browser Device -->
<figure class="device-browser-frame rotated-3d-left">
<div class="device-browser-frame">
<img class="device-browser-img" src="../assets/img/800x500/img5.jpg" alt="Image Description">
</div>
</figure>
<!-- End Browser Device -->
</div>
<!-- End Devices -->
<!-- Devices -->
<div class="devices position-absolute top-0 start-50 mt-10 ms-5">
<!-- Browser Device -->
<figure class="device-browser-frame rotated-3d-left">
<div class="device-browser-frame">
<img class="device-browser-img" src="../assets/img/800x500/img6.jpg" alt="Image Description">
</div>
</figure>
<!-- End Browser Device -->
</div>
<!-- End Devices -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
<!-- End Mockup Card -->