HTML:
<!-- Hero Section -->
<div class="gradient-overlay-half-dark-v3 bg-img-hero" style="background-image: url(../../assets/img/1920x1080/img4.jpg);">
<!-- Main Content -->
<div class="d-lg-flex align-items-lg-center height-85vh--lg">
<div class="container space-2 space-0--lg mt-lg-8">
<div class="row justify-content-lg-between align-items-lg-center">
<div class="col-lg-5 mb-7 mb-lg-0">
<!-- Title -->
<span class="d-block text-white text-uppercase mb-2">Join the change</span>
<h1 class="display-4 font-size-48--md-down text-white mb-0">Space service that moves work forward</h1>
<!-- End Title -->
</div>
<div class="col-lg-5">
<!-- Signup Form -->
<div class="bg-white shadow-sm rounded p-6">
<form class="js-validate">
<div class="mb-4">
<h2 class="h4">Get started for free</h2>
</div>
<!-- Input -->
<div class="js-form-message mb-3">
<div class="js-focus-state input-group input-group form">
<input type="text" class="form-control form__input" name="username" required
placeholder="Enter your username"
aria-label="Enter your username">
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="js-form-message mb-3">
<div class="js-focus-state input-group input-group form">
<input type="email" class="form-control form__input" name="email" required
placeholder="Enter your email address"
aria-label="Enter your email address">
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="js-form-message mb-3">
<div class="js-focus-state input-group input-group form">
<input type="password" class="form-control form__input" name="password" required
placeholder="Enter your password"
aria-label="Enter your password">
</div>
</div>
<!-- End Input -->
<button type="submit" class="btn btn-block btn-primary">Get Started</button>
</form>
</div>
<!-- End Signup Form -->
</div>
</div>
</div>
</div>
<!-- End Main Content -->
</div>
<div class="d-lg-flex align-items-lg-center height-15vh--lg">
<!-- Bottom Content -->
<div class="container space-2 space-0--lg">
<!-- 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>
<!-- End Hero Section -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<script src="../../assets/vendor/query-validation/dist/jquery.validate.min.js"></script>
<!-- JS Space -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<script src="../../assets/js/components/hs.validation.js"></script>
<script src="../../assets/js/helpers/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>