Change is coming
Attract more visitors, and win more business with Front template.
<!-- Hero Section -->
<div class="gradient-x-overlay-lg-dark-video">
<!-- Video Background -->
<div class="js-video-bg d-none d-md-block position-absolute w-100 h-100"
data-hs-video-bg-options='{
"type": "you-tube",
"videoId": "0qisGSwZym4",
"ratio": 0.75
}'>
</div>
<!-- End Video Background -->
<div class="position-relative z-index-2">
<!-- Content -->
<div class="d-md-flex">
<div class="container d-md-flex align-items-md-center min-vh-md-100 text-center space-3 space-top-md-4 space-top-lg-3">
<div class="w-lg-85 mx-lg-auto">
<!-- Info -->
<div class="mt-5 mb-7">
<h1 class="display-4 text-white mb-3">Change is coming</h1>
<p class="lead text-white">Attract more visitors, and win more business with Front template.</p>
</div>
<!-- End Info -->
<!-- Form -->
<form class="js-validate w-lg-85 mx-lg-auto">
<div class="card p-3 mb-5">
<div class="form-row input-group-borderless">
<div class="col-sm mb-2 mb-md-0">
<input type="text" class="form-control shadow-none" name="name" placeholder="Name" aria-label="Name" required>
</div>
<div class="col-sm d-sm-none">
<hr class="my-0">
</div>
<div class="col-sm column-divider-sm-left mb-2 mb-md-0">
<input type="email" class="form-control shadow-none" name="email" placeholder="Email" aria-label="Email" required>
</div>
<div class="col-md-auto">
<button type="submit" class="btn btn-block btn-primary btn-wide">Get Started</button>
</div>
</div>
</div>
</form>
<!-- End Form -->
</div>
</div>
</div>
<!-- End Content -->
<!-- Clients Section -->
<div class="position-absolute bottom-0 right-0 left-0">
<div class="container-fluid py-5">
<div class="js-slick-carousel slick"
data-hs-slick-carousel-options='{
"slidesToShow": 6,
"autoplay": true,
"autoplaySpeed": 5000,
"infinite": true,
"responsive": [{
"breakpoint": 1200,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 576,
"settings": {
"slidesToShow": 3
}
}]
}'>
<div class="js-slide">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/kaplan-white.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/hubspot-white.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/stripe-white.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/slack-white.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/airbnb-white.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/spotify-white.svg" alt="Image Description">
</div>
</div>
</div>
</div>
<!-- End Clients Section -->
</div>
<div class="d-lg-none position-absolute top-0 right-0 bottom-0 left-0 bg-img-hero" style="background-image: url(../../assets/img/1920x1080/img2.jpg);"></div>
</div>
<!-- End Hero Section -->
<link rel="stylesheet" href="./assets/vendor/hs-video-bg/dist/hs-video-bg.min.css">
<link rel="stylesheet" href="./assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/hs-video-bg/dist/hs-video-bg.min.js"></script>
<script src="./node_modules/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="./assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Front -->
<script src="./assets/js/hs.validation.js"></script>
<script src="./assets/js/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// INITIALIZATION OF VIDEO ON BACKGROUND
// =======================================================
$('.js-video-bg').each(function () {
var videoBg = new HSVideoBg($(this)).init();
});
// INITIALIZATION OF FORM VALIDATION
// =======================================================
$('.js-validate').each(function () {
var validation = $.HSCore.components.HSValidation.init($(this));
});
// INITIALIZATION OF SLICK CAROUSEL
// =======================================================
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
});
});
</script>