<!-- ========== HERO ========== -->
<div class="bg-img-hero img-fluid" style="background-image: url(../../assets/img/1920x600/img1.jpg);">
<div class="px-3 px-lg-10 py-3 py-lg-10 space-top-xl-3 space-bottom-xl-1">
<div class="js-slick-carousel u-slick" data-pagi-classes="text-center u-slick__pagination u-slick__pagination mb-0 mt-5" data-arrows-classes="d-none d-lg-block u-slick__arrow u-slick__arrow--v2 u-slick__arrow-centered--y" data-arrow-left-classes="flaticon-back u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-n9 ml-xl-n10" data-arrow-right-classes="flaticon-next u-slick__arrow-inner u-slick__arrow-inner--right mr-lg-n9 mr-xl-n10">
<div class="pt-xl-3">
<div class="row ml-plus-310">
<div class="col-lg-7 col-wd-6">
<div class="media d-block d-lg-flex">
<div class="media-body align-self-center mb-4 mb-lg-0">
<p class="banner__pretitle text-uppercase text-gray-400 font-weight-bold mb-2"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">Kindle Edition</p>
<h2 class="font-size-12 mb-1"
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>
<div class="font-size-2 text-secondary-gray-700"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="300">Discount</div>
<div class="font-size-26 font-weight-medium text-primary mb-2" data-scs-animation-in="fadeInUp"
data-scs-animation-delay="300">40% Off</div>
<div>
<a href="#" class="banner_btn btn btn-wide btn-dark rounded-0 text-white"
data-scs-animation-in="fadeInLeft"
data-scs-animation-delay="400">Shop Now</a>
</div>
</div>
</div>
</div>
<div class="col-lg-5 col-wd-6"
data-scs-animation-in="fadeInRight"
data-scs-animation-delay="500">
<img src="https://placehold.it/350x296" class="img-fluid">
</div>
</div>
</div>
<div class="pt-xl-3">
<div class="row ml-plus-310">
<div class="col-lg-7 col-wd-6">
<div class="media d-block d-lg-flex">
<div class="media-body align-self-center mb-4 mb-lg-0">
<p class="banner__pretitle text-uppercase text-gray-400 font-weight-bold mb-2"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">Kindle Edition</p>
<h2 class="font-size-12 mb-1"
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>
<div class="font-size-2 text-secondary-gray-700"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="300">Discount</div>
<div class="font-size-26 font-weight-medium text-primary mb-2" data-scs-animation-in="fadeInUp"
data-scs-animation-delay="300">40% Off</div>
<div>
<a href="#" class="banner_btn btn btn-wide btn-dark rounded-0 text-white"
data-scs-animation-in="fadeInLeft"
data-scs-animation-delay="400">Shop Now</a>
</div>
</div>
</div>
</div>
<div class="col-lg-5 col-wd-6"
data-scs-animation-in="fadeInRight"
data-scs-animation-delay="500">
<img src="https://placehold.it/350x296" class="img-fluid">
</div>
</div>
</div>
<div class="pt-xl-3">
<div class="row ml-plus-310">
<div class="col-lg-7 col-wd-6">
<div class="media d-block d-lg-flex">
<div class="media-body align-self-center mb-4 mb-lg-0">
<p class="banner__pretitle text-uppercase text-gray-400 font-weight-bold mb-2"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">Kindle Edition</p>
<h2 class="font-size-12 mb-1"
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>
<div class="font-size-2 text-secondary-gray-700"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="300">Discount</div>
<div class="font-size-26 font-weight-medium text-primary mb-2" data-scs-animation-in="fadeInUp"
data-scs-animation-delay="300">40% Off</div>
<div>
<a href="#" class="banner_btn btn btn-wide btn-dark rounded-0 text-white"
data-scs-animation-in="fadeInLeft"
data-scs-animation-delay="400">Shop Now</a>
</div>
</div>
</div>
</div>
<div class="col-lg-5 col-wd-6"
data-scs-animation-in="fadeInRight"
data-scs-animation-delay="500">
<img src="https://placehold.it/350x296" class="img-fluid">
</div>
</div>
</div>
<div class="pt-xl-3">
<div class="row ml-plus-310">
<div class="col-lg-7 col-wd-6">
<div class="media d-block d-lg-flex">
<div class="media-body align-self-center mb-4 mb-lg-0">
<p class="banner__pretitle text-uppercase text-gray-400 font-weight-bold mb-2"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">Kindle Edition</p>
<h2 class="font-size-12 mb-1"
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>
<div class="font-size-2 text-secondary-gray-700"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="300">Discount</div>
<div class="font-size-26 font-weight-medium text-primary mb-2" data-scs-animation-in="fadeInUp"
data-scs-animation-delay="300">40% Off</div>
<div>
<a href="#" class="banner_btn btn btn-wide btn-dark rounded-0 text-white"
data-scs-animation-in="fadeInLeft"
data-scs-animation-delay="400">Shop Now</a>
</div>
</div>
</div>
</div>
<div class="col-lg-5 col-wd-6"
data-scs-animation-in="fadeInRight"
data-scs-animation-delay="500">
<img src="https://placehold.it/350x296" class="img-fluid">
</div>
</div>
</div>
<div class="pt-xl-3">
<div class="row ml-plus-310">
<div class="col-lg-7 col-wd-6">
<div class="media d-block d-lg-flex">
<div class="media-body align-self-center mb-4 mb-lg-0">
<p class="banner__pretitle text-uppercase text-gray-400 font-weight-bold mb-2"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">Kindle Edition</p>
<h2 class="font-size-12 mb-1"
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>
<div class="font-size-2 text-secondary-gray-700"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="300">Discount</div>
<div class="font-size-26 font-weight-medium text-primary mb-2" data-scs-animation-in="fadeInUp"
data-scs-animation-delay="300">40% Off</div>
<div>
<a href="#" class="banner_btn btn btn-wide btn-dark rounded-0 text-white"
data-scs-animation-in="fadeInLeft"
data-scs-animation-delay="400">Shop Now</a>
</div>
</div>
</div>
</div>
<div class="col-lg-5 col-wd-6"
data-scs-animation-in="fadeInRight"
data-scs-animation-delay="500">
<img src="https://placehold.it/350x296" class="img-fluid">
</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>