Space is an easy way to take your business to the next level.
HTML:
<!-- Hero Section -->
<div class="bg-gray-100">
<div class="container space-2 space-3--lg">
<div class="w-md-80 w-lg-60 text-center mx-md-auto">
<!-- Title -->
<div class="mb-5">
<h1>Space is an easy way to take your business to the next level.</h1>
</div>
<!-- End Title -->
<!-- Button -->
<button type="button" class="btn btn-xs btn-dark 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-dark 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>
<!-- End Hero Section -->
<!-- Card Section -->
<div class="bg-gray-100 px-md-9">
<div class="container-fluid space-2-bottom space-3-bottom--md">
<div class="row align-items-lg-center no-gutters">
<div class="col-lg-6">
<!-- Background Video -->
<div class="d-none d-lg-block position-relative height-550">
<div class="js-bg-video position-absolute w-100 h-100"
data-hs-bgv-type="youtube"
data-hs-bgv-id="YXNk4gQCPSY"
data-hs-bgv-loop="true">
</div>
</div>
<!-- End Background Video -->
</div>
<div class="col-lg-6">
<div class="js-slick-carousel u-slick"
data-infinite="true"
data-adaptive-height="true"
data-fade="true"
data-pagi-classes="u-slick__pagination-bordered u-slick__pagination-bordered--white position-absolute-bottom-left-0 pb-3 pb-md-5 pl-8 mb-0">
<div class="js-slide">
<!-- Card -->
<div class="d-lg-flex align-items-lg-end flex-lg-wrap bg-blue height-600--lg rounded space-2 space-0--lg p-5 p-sm-9">
<div class="bg-white u-lg-avatar rounded p-3 mb-9 mb-lg-0">
<img class="img-fluid d-block" src="../../assets/svg/components/moving-up-blue-icon.svg" alt="Image Description">
</div>
<div class="mt-lg-auto">
<h2 class="display-4 font-size-48--md-down font-weight-medium text-white">Create good things.</h2>
<p class="lead text-white">Whether through commerce or just an experience to tell your brand's story, the time has come to start using development languages that fit your projects needs.</p>
</div>
</div>
<!-- End Card -->
</div>
<div class="js-slide">
<!-- Card -->
<div class="d-lg-flex align-items-lg-end flex-lg-wrap bg-primary height-600--lg rounded space-2 space-0--lg p-5 p-sm-9">
<div class="bg-white u-lg-avatar rounded p-3 mb-9 mb-lg-0">
<img class="img-fluid d-block" src="../../assets/svg/components/trophy-primary-icon.svg" alt="Image Description">
</div>
<div class="mt-lg-auto">
<h2 class="display-4 font-size-48--md-down font-weight-medium text-white">High-quality demos.</h2>
<p class="lead text-white">From websites and online stores, to marketing tools and analytics, Space is the all-in-one platform to build a beautiful online presence.</p>
</div>
</div>
<!-- End Card -->
</div>
<div class="js-slide">
<!-- Card -->
<div class="d-lg-flex align-items-lg-end flex-lg-wrap bg-purple height-600--lg rounded space-2 space-0--lg p-5 p-sm-9">
<div class="bg-white u-lg-avatar rounded p-3 mb-9 mb-lg-0">
<img class="img-fluid d-block" src="../../assets/svg/components/develop-purple-icon.svg" alt="Image Description">
</div>
<div class="mt-lg-auto">
<h2 class="display-4 font-size-48--md-down font-weight-medium text-white">Easiest way to manage business.</h2>
<p class="lead text-white">The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
</div>
</div>
<!-- End Card -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Section -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/hs-bg-video/hs-bg-video.css">
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-bg-video/hs-bg-video.js"></script>
<script src="../../assets/vendor/hs-bg-video/vendor/player.min.js"></script>
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Space -->
<script src="../../assets/js/helpers/hs.bg-video.js"></script>
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<script src="../../assets/js/components/hs.go-to.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of video on background
$.HSCore.helpers.HSBgVideo.init('.js-bg-video');
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
// initialization of go to
$.HSCore.components.HSGoTo.init('.js-go-to');
});
</script>