Join the change
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">
<!-- Main Content -->
<div class="d-lg-flex align-items-lg-center height-85vh--lg">
<div class="container space-3 space-0--lg mt-lg-9">
<div class="row align-items-lg-center">
<div class="col-lg-9 mb-9 mb-lg-0">
<!-- Title -->
<div class="mb-7">
<h1 class="display-4 font-size-48--md-down text-white">Join the change</h1>
<p class="lead text-white font-weight-light">Space makes you look at things from a different perspectives.</p>
</div>
<!-- End Title -->
<!-- Form -->
<form class="js-validate w-lg-80">
<div class="row mx-gutters-2">
<div class="col-sm-4 mb-3">
<!-- Input -->
<div class="js-form-message">
<div class="js-focus-state input-group form">
<input type="text" class="form-control form__input" name="username" required
placeholder="Name"
aria-label="Name"
data-msg="Name must contain only letters.">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-sm-4 mb-3">
<!-- Input -->
<div class="js-form-message">
<div class="js-focus-state input-group form">
<input type="email" class="form-control form__input" name="email" required
placeholder="Email"
aria-label="Email"
data-msg="Please enter a valid email address.">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-sm-4 mb-3">
<button type="submit" class="btn btn-block btn-primary">Get Started</button>
</div>
</div>
<!-- Checkbox -->
<div class="custom-control custom-checkbox d-flex align-items-center text-white">
<input type="checkbox" class="custom-control-input" id="termsCheckbox">
<label class="custom-control-label text-light-70" for="termsCheckbox">
I agree to the
<a class="text-white" href="terms.html">Terms and Conditions</a>
</label>
</div>
<!-- End Checkbox -->
</form>
<!-- End Form -->
</div>
<div class="col-lg-3 text-center">
<!-- 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>
</div>
</div>
<!-- End Main Content -->
<!-- Bottom Content -->
<div class="d-lg-flex align-items-lg-center height-15vh--lg">
<div class="container space-1 space-0--lg">
<div class="row align-items-sm-center">
<div class="col-sm-8 mb-3 mb-sm-0">
<!-- 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 class="col-sm-4 text-sm-right">
<a class="js-go-to text-white" href="javascript:;"
data-target="#featuresContent"
data-type="static">
Learn more
<span class="fa fa-arrow-down font-size-14 ml-2"></span>
</a>
</div>
</div>
</div>
</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>
<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 fancybox
$.HSCore.components.HSFancyBox.init('.js-fancybox');
// initialization of go to
$.HSCore.components.HSGoTo.init('.js-go-to');
});
</script>