Space - Creative agency
Space makes you look at things from a different perspectives.
HTML:
<!-- Hero Section -->
<div class="gradient-overlay-half-dark-video-v1 bg-img-hero" style="background-image: url(../../assets/img/1920x1080/img5.jpg);">
<!-- Video Background -->
<div class="js-bg-video d-none d-md-block position-absolute w-100 h-100"
data-hs-bgv-type="youtube"
data-hs-bgv-id="0qisGSwZym4"
data-hs-bgv-loop="true">
</div>
<!-- End Video Background -->
<div class="position-relative z-index-2">
<!-- Content -->
<div class="d-lg-flex align-items-lg-center height-100vh--lg">
<div class="container text-center space-2-top space-3-bottom space-3-top--lg">
<div class="w-md-80 mx-md-auto mb-7">
<h1 class="display-3 font-size-48--md-down text-white mb-4">Space - Creative agency</h1>
<p class="lead text-white font-weight-light">Space makes you look at things from a different perspectives.</p>
</div>
<!-- Fancybox Video Popup -->
<div class="mb-7">
<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">
<span class="fa fa-play u-media-player__icon-inner"></span>
</span>
</a>
</div>
<!-- End Fancybox Video Popup -->
<a class="btn btn-primary" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Get Started with Space</a>
</div>
</div>
<!-- End Content -->
</div>
<div class="bg-white position-absolute-bottom-0 z-index-2">
<!-- Bottom Content -->
<div class="container space-1">
<!-- Slick Carousel -->
<div class="js-slick-carousel u-slick"
data-autoplay="true"
data-speed="5000"
data-infinite="true"
data-slides-show="6"
data-responsive='[{
"breakpoint": 1200,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 576,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 480,
"settings": {
"slidesToShow": 2
}
}]'>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/amazon.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/google.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/paypal.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/slack.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/samsung.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/airbnb.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/lenovo.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../assets/img/clients/spotify.png" alt="Image Description">
</div>
</div>
<!-- End Slick Carousel -->
</div>
<!-- End Bottom Content -->
</div>
</div>
<!-- End Hero 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">
<link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.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>
<script src="../../assets/vendor/fancybox/jquery.fancybox.min.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.fancybox.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 fancybox
$.HSCore.components.HSFancyBox.init('.js-fancybox');
});
</script>