Your business needs a little push.
HTML:
<!-- Hero Section -->
<div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll"
data-options='{direction: "normal"}'>
<!-- Apply your Parallax background image here -->
<div class="divimage dzsparallaxer--target u-bg-overlay-v3" style="height: 120%; background-image: url(../../assets/img/1920x1080/img28.jpg);"></div>
<div class="d-flex align-items-center min-height-100vh--lg">
<!-- Content -->
<div class="container position-relative u-space-5-top u-space-4-bottom z-index-2">
<div class="w-lg-80 text-center mx-auto">
<h1 class="display-3 font-size-48--md-down text-white font-weight-bold mb-0">Your business needs a little push.</h1>
</div>
</div>
<!-- End Content -->
<!-- Clients Section -->
<div class="container position-absolute-bottom-0 z-index-2 mb-3">
<div class="u-gradient-half-primary-v1 u-space-1 rounded-pill">
<!-- Clients Carousel -->
<div class="js-slick-carousel u-slick"
data-infinite="true"
data-slides-show="7"
data-responsive='[{
"breakpoint": 1200,
"settings": {
"slidesToShow": 6
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 5
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 576,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 480,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 380,
"settings": {
"slidesToShow": 2
}
}]'>
<div class="js-slide">
<img class="u-clients" src="../../assets/svg/clients-logo/lenovo-white.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../../assets/svg/clients-logo/stripe-white.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../../assets/svg/clients-logo/paypal-white.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../../assets/svg/clients-logo/spotify-white.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../../assets/svg/clients-logo/slack-white.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../../assets/svg/clients-logo/shopify-white.svg" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients" src="../../assets/svg/clients-logo/google-white.svg" alt="Image Description">
</div>
</div>
<!-- End Clients Carousel -->
</div>
</div>
<!-- End Clients Section -->
</div>
</div>
<!-- End Hero Section -->
CSS library:
<link rel="stylesheet" href="assets/vendor/dzsparallaxer/dzsparallaxer.css">
<link rel="stylesheet" href="../assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
<script src="../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>