<!-- ========== HERO ========== -->
<div class="positin-relative">
<div class="bg-gray-200 position-absolute bottom-0 right-0 left-0 h-50 h-wd-60 z-index-n1"></div>
<div class="container-fluid px-3 px-md-5 px-xl-8d75">
<div class="bg-img-hero img-fluid" style="background-image: url(../../assets/img/1800x500/img1.jpg);" >
<div class="space-bottom-xl-1 space-top-xl-4 p-5 p-md-7 px-xl-10">
<div class="js-slick-carousel u-slick"
data-pagi-classes="text-center u-slick__pagination u-slick__pagination mt-5 mt-md-10 mb-0">
<div class="hero">
<div class="row pt-xl-1">
<div class="col-lg-7 col-wd-6 mb-4 mb-lg-0">
<div class="media-body mr-wd-4 align-self-center mb-4 mb-md-0">
<p class="hero__pretitle text-uppercase font-weight-bold text-gray-400 mb-2"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">The Bookworm Editors'</p>
<h2 class="hero__title font-size-14 mb-4"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="300">
<span class="hero__title-line-1 font-weight-regular d-block">Featured Books of the</span>
<span class="hero__title-line-2 font-weight-bold d-block">February</span>
</h2>
<a href="#" class="btn btn-primary btn-wide rounded-0 hero__btn"
data-scs-animation-in="fadeInLeft"
data-scs-animation-delay="400">See More</a>
</div>
</div>
<div class="col-lg-5 col-wd-6"
data-scs-animation-in="fadeInRight"
data-scs-animation-delay="500">
<img class="img-fluid" src="https://placehold.it/800x450" alt="image-description">
</div>
</div>
</div>
<div class="js-slide">
<div class="hero row">
<div class="col-lg-7 col-wd-6 mb-4 mb-lg-0">
<div class="media-body mr-wd-4 align-self-center mb-4 mb-md-0">
<p class="hero__pretitle text-uppercase font-weight-bold text-gray-400 mb-2"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">The Bookworm Editors'</p>
<h2 class="hero__title font-size-14 mb-4"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="300">
<span class="hero__title-line-1 font-weight-regular d-block">Featured Books of the</span>
<span class="hero__title-line-2 font-weight-bold d-block">February</span>
</h2>
<a href="#" class="btn btn-primary btn-wide rounded-0 hero__btn"
data-scs-animation-in="fadeInLeft"
data-scs-animation-delay="400">See More</a>
</div>
</div>
<div class="col-lg-5 col-wd-6"
data-scs-animation-in="fadeInRight"
data-scs-animation-delay="500">
<img class="img-fluid" src="https://placehold.it/800x450" alt="image-description">
</div>
</div>
</div>
<div class="js-slide">
<div class="hero row">
<div class="col-lg-7 col-wd-6 mb-4 mb-lg-0">
<div class="media-body mr-wd-4 align-self-center mb-4 mb-md-0">
<p class="hero__pretitle text-uppercase font-weight-bold text-gray-400 mb-2"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">The Bookworm Editors'</p>
<h2 class="hero__title font-size-14 mb-4"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="300">
<span class="hero__title-line-1 font-weight-regular d-block">Featured Books of the</span>
<span class="hero__title-line-2 font-weight-bold d-block">February</span>
</h2>
<a href="#" class="btn btn-primary btn-wide rounded-0 hero__btn"
data-scs-animation-in="fadeInLeft"
data-scs-animation-delay="400">See More</a>
</div>
</div>
<div class="col-lg-5 col-wd-6"
data-scs-animation-in="fadeInRight"
data-scs-animation-delay="500">
<img class="img-fluid" src="https://placehold.it/800x450" alt="image-description">
</div>
</div>
</div>
<div class="js-slide">
<div class="hero row">
<div class="col-lg-7 col-wd-6 mb-4 mb-lg-0">
<div class="media-body mr-wd-4 align-self-center mb-4 mb-md-0">
<p class="hero__pretitle text-uppercase font-weight-bold text-gray-400 mb-2"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">The Bookworm Editors'</p>
<h2 class="hero__title font-size-14 mb-4"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="300">
<span class="hero__title-line-1 font-weight-regular d-block">Featured Books of the</span>
<span class="hero__title-line-2 font-weight-bold d-block">February</span>
</h2>
<a href="#" class="btn btn-primary btn-wide rounded-0 hero__btn"
data-scs-animation-in="fadeInLeft"
data-scs-animation-delay="400">See More</a>
</div>
</div>
<div class="col-lg-5 col-wd-6"
data-scs-animation-in="fadeInRight"
data-scs-animation-delay="500">
<img class="img-fluid" src="https://placehold.it/800x450" alt="image-description">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ========== END HERO ========== -->
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Bookworm -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>