Space is an easy way to take your business to the next level.
Create good things.
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.
High-quality demos.
From websites and online stores, to marketing tools and analytics, Space is the all-in-one platform to build a beautiful online presence.
Easiest way to manage business.
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.
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>