HTML:
<!-- Hero Section -->
<div class="position-relative u-gradient-half-primary-v5">
<div class="u-bg-img-hero-bottom" style="background-image: url(../../assets/img/bg-shapes/bg-5.png);">
<div class="container u-space-3-top u-space-5-top--md u-space-4-top--lg">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-auto mb-9">
<h1 class="display-4 font-size-48--md-down text-white">Front <strong class="font-weight-bold">business</strong></h1>
<p class="lead u-text-light">Install Front on your own infrastructure</p>
</div>
<!-- End Title -->
<!-- Slick Carousel -->
<div class="js-slick-carousel u-slick u-slick--gutters-3 z-index-2"
data-slides-show="5"
data-slides-scroll="1"
data-pagi-classes="d-lg-none text-center u-slick__pagination mt-7 mb-0"
data-responsive='[{
"breakpoint": 1200,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 480,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide mt-1">
<!-- Icon Block -->
<article class="bg-white shadow rounded transition-3d-hover mb-3">
<div class="bg-primary rounded-top p-5">
<div class="d-flex align-items-center u-md-avatar bg-white rounded p-2 mx-auto">
<img class="u-avatar rounded mx-auto" src="../../assets/img/160x160/img12.png" alt="Image Description">
</div>
</div>
<div class="p-4">
<div class="mb-3">
<h2 class="h6 mb-0">Atlassian</h2>
<small class="d-block text-secondary">Developer tools</small>
</div>
<a class="btn btn-sm btn-block btn-primary u-btn-primary" href="#">Install</a>
</div>
</article>
<!-- End Icon Block -->
</div>
<div class="js-slide mt-1">
<!-- Icon Block -->
<article class="bg-white shadow rounded transition-3d-hover mb-3">
<div class="bg-danger rounded-top p-5">
<div class="d-flex align-items-center u-md-avatar bg-white rounded p-2 mx-auto">
<img class="u-avatar rounded mx-auto" src="../../assets/img/160x160/img13.png" alt="Image Description">
</div>
</div>
<div class="p-4">
<div class="mb-3">
<h2 class="h6 mb-0">Asana</h2>
<small class="d-block text-secondary">Productivity</small>
</div>
<a class="btn btn-sm btn-block btn-primary u-btn-primary" href="#">Install</a>
</div>
</article>
<!-- End Icon Block -->
</div>
<div class="js-slide mt-1">
<!-- Icon Block -->
<article class="bg-white shadow rounded transition-3d-hover mb-3">
<div class="bg-warning rounded-top p-5">
<div class="d-flex align-items-center u-md-avatar bg-white rounded p-2 mx-auto">
<img class="u-avatar rounded mx-auto" src="../../assets/img/160x160/img14.png" alt="Image Description">
</div>
</div>
<div class="p-4">
<div class="mb-3">
<h2 class="h6 mb-0">Slack</h2>
<small class="d-block text-secondary">Collaboration tool</small>
</div>
<a class="btn btn-sm btn-block btn-primary u-btn-primary" href="#">Install</a>
</div>
</article>
<!-- End Icon Block -->
</div>
<div class="js-slide mt-1">
<!-- Icon Block -->
<article class="bg-white shadow rounded transition-3d-hover mb-3">
<div class="bg-success rounded-top p-5">
<div class="d-flex align-items-center u-md-avatar bg-white rounded p-2 mx-auto">
<img class="u-avatar rounded mx-auto" src="../../assets/img/160x160/img15.png" alt="Image Description">
</div>
</div>
<div class="p-4">
<div class="mb-3">
<h2 class="h6 mb-0">Spotify</h2>
<small class="d-block text-secondary">Streaming service</small>
</div>
<a class="btn btn-sm btn-block btn-primary u-btn-primary" href="#">Install</a>
</div>
</article>
<!-- End Icon Block -->
</div>
<div class="js-slide mt-1">
<!-- Icon Block -->
<article class="bg-white shadow rounded transition-3d-hover mb-3">
<div class="bg-primary rounded-top p-5">
<div class="d-flex align-items-center u-md-avatar bg-white rounded p-2 mx-auto">
<img class="u-avatar rounded mx-auto" src="../../assets/img/160x160/img16.png" alt="Image Description">
</div>
</div>
<div class="p-4">
<div class="mb-3">
<h2 class="h6 mb-0">DigitalOcean</h2>
<small class="d-block text-secondary">Cloud infrastructure</small>
</div>
<a class="btn btn-sm btn-block btn-primary u-btn-primary" href="#">Install</a>
</div>
</article>
<!-- End Icon Block -->
</div>
</div>
<!-- End Slick Carousel -->
</div>
</div>
<!-- SVG Bottom Shape -->
<figure class="position-absolute-bottom-0">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1921 273" style="enable-background:new 0 0 1921 273;" xml:space="preserve">
<polygon class="u-fill-white" points="0,273 1921,273 1921,0 "/>
</svg>
</figure>
<!-- End SVG Bottom Shape -->
</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>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
