Change is coming
Attract more visitors, and win more business with Front template.
<!-- Hero -->
<div class="gradient-x-overlay-lg-dark-video">
<!-- Video Background -->
<div class="js-video-bg video-bg-content"
data-hs-video-bg-options='{
"type": "you-tube",
"videoId": "d4eDWc8g0e0",
"ratio": 0.75
}'>
</div>
<div class="video-bg-replacer-img" style="background-image: url(../assets/img/1920x1080/img2.jpg);"></div>
<!-- End Video Background -->
<div class="position-relative zi-2">
<!-- Content -->
<div class="d-md-flex">
<div class="container d-md-flex align-items-md-center min-vh-md-100 text-center content-space-3 content-space-t-md-4 content-space-t-lg-3">
<div class="w-lg-75 mx-lg-auto">
<!-- Heading -->
<div class="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 Title & Description -->
<!-- Input Card -->
<form>
<div class="input-card input-card-sm">
<div class="input-card-form">
<label for="nameRegisterForm" class="form-label visually-hidden">Enter your name</label>
<input type="text" class="form-control form-control-lg" id="nameRegisterForm" placeholder="Your name" aria-label="Your name">
</div>
<div class="input-card-form">
<label for="emailRegisterForm" class="form-label visually-hidden">Enter email</label>
<input type="text" class="form-control form-control-lg" id="emailRegisterForm" placeholder="Your email" aria-label="Your email">
</div>
<button type="button" class="btn btn-primary btn-lg">Get started</button>
</div>
</form>
<!-- End Input Card -->
</div>
</div>
</div>
<!-- End Content -->
<!-- Clients -->
<div class="position-absolute bottom-0 start-0 end-0">
<div class="container py-5">
<!-- Swiper Slider -->
<div class="js-swiper-hero-clients swiper text-center">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/capsule-white.svg" alt="Logo">
</div>
<!-- End Slide -->
<div class="swiper-slide">
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/fitbit-white.svg" alt="Logo">
</div>
<!-- End Slide -->
<div class="swiper-slide">
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/forbes-white.svg" alt="Logo">
</div>
<!-- End Slide -->
<div class="swiper-slide">
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/mailchimp-white.svg" alt="Logo">
</div>
<!-- End Slide -->
<div class="swiper-slide">
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/layar-white.svg" alt="Logo">
</div>
<!-- End Slide -->
<div class="swiper-slide">
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/hubspot-white.svg" alt="Logo">
</div>
<!-- End Slide -->
</div>
</div>
<!-- End Swiper Slider -->
</div>
</div>
<!-- End Clients -->
</div>
</div>
<!-- End Hero -->
<link rel="stylesheet" href="../assets/vendor/hs-video-bg/dist/hs-video-bg.min.css">
<link rel="stylesheet" href="../node_modules/swiper/swiper-bundle.min.css">
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-video-bg/dist/hs-video-bg.min.js"></script>
<script src="../node_modules/swiper/swiper-bundle.min.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF VIDEO BG
// =======================================================
document.querySelectorAll('.js-video-bg').forEach(item=> {
new HSVideoBg(item).init()
})
// INITIALIZATION OF SWIPER
// =======================================================
var swiper = new Swiper('.js-swiper-hero-clients',{
slidesPerView: 2,
breakpoints: {
480: {
slidesPerView: 4,
spaceBetween: 15,
},
768: {
slidesPerView: 4,
spaceBetween: 15,
},
1024: {
slidesPerView: 6,
spaceBetween: 15,
},
},
});
})()
</script>