<!-- ========== HERO ========== -->
<div class="container">
<div class="bg-gray-200 px-5 px-md-8 px-xl-0 pl-xl-10 pt-6 min-height-530">
<div class="js-slick-carousel u-slick"
data-pagi-classes="text-center u-slick__pagination u-slick__pagination mt-7">
<div class="js-slider">
<div class="hero-slider">
<div class="d-block d-xl-flex media">
<div class="hero__body media-body align-self-center mb-4 mb-xl-0">
<div class="hero__pretitle text-uppercase text-gray-400 font-weight-bold mb-3"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">
Book Club
</div>
<h2 class="hero__title font-size-10 mb-3"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="300">
<span class="hero__title--1 font-weight-bold d-block">A selection with</span>
<span class="hero__title--2 d-block font-weight-normal">only the best books</span>
</h2>
<p class="hero__subtitle font-size-2 mb-5"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="400">Sale Ends Midnight 30th April 2020
</p>
<a href="#" class="hero__btn btn btn-primary-green text-white btn-wide"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="500">Explore Books
</a>
</div>
<div
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="600">
<img src="https://placehold.it/500x380" class="img-fluid">
</div>
</div>
</div>
</div>
<div class="js-slider">
<div class="hero-slider">
<div class="d-block d-xl-flex media">
<div class="hero__body media-body align-self-center mb-4 mb-xl-0">
<div class="hero__pretitle text-uppercase text-gray-400 font-weight-bold mb-3"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">
Book Club
</div>
<h2 class="hero__title font-size-10 mb-3"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="300">
<span class="hero__title--1 font-weight-bold d-block">A selection with</span>
<span class="hero__title--2 d-block font-weight-normal">only the best books</span>
</h2>
<p class="hero__subtitle font-size-2 mb-5"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="400">Sale Ends Midnight 30th April 2020
</p>
<a href="#" class="hero__btn btn btn-primary-green text-white btn-wide"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="500">Explore Books
</a>
</div>
<div
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="600">
<img src="https://placehold.it/500x380" class="img-fluid">
</div>
</div>
</div>
</div>
<div class="js-slider">
<div class="hero-slider">
<div class="d-block d-xl-flex media">
<div class="hero__body media-body align-self-center mb-4 mb-xl-0">
<div class="hero__pretitle text-uppercase text-gray-400 font-weight-bold mb-3"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">
Book Club
</div>
<h2 class="hero__title font-size-10 mb-3"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="300">
<span class="hero__title--1 font-weight-bold d-block">A selection with</span>
<span class="hero__title--2 d-block font-weight-normal">only the best books</span>
</h2>
<p class="hero__subtitle font-size-2 mb-5"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="400">Sale Ends Midnight 30th April 2020
</p>
<a href="#" class="hero__btn btn btn-primary-green text-white btn-wide"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="500">Explore Books
</a>
</div>
<div
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="600">
<img src="https://placehold.it/500x380" class="img-fluid">
</div>
</div>
</div>
</div>
<div class="js-slider">
<div class="hero-slider">
<div class="d-block d-xl-flex media">
<div class="hero__body media-body align-self-center mb-4 mb-xl-0">
<div class="hero__pretitle text-uppercase text-gray-400 font-weight-bold mb-3"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">
Book Club
</div>
<h2 class="hero__title font-size-10 mb-3"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="300">
<span class="hero__title--1 font-weight-bold d-block">A selection with</span>
<span class="hero__title--2 d-block font-weight-normal">only the best books</span>
</h2>
<p class="hero__subtitle font-size-2 mb-5"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="400">Sale Ends Midnight 30th April 2020
</p>
<a href="#" class="hero__btn btn btn-primary-green text-white btn-wide"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="500">Explore Books
</a>
</div>
<div
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="600">
<img src="https://placehold.it/500x380" class="img-fluid">
</div>
</div>
</div>
</div>
<div class="js-slider">
<div class="hero-slider">
<div class="d-block d-xl-flex media">
<div class="hero__body media-body align-self-center mb-4 mb-xl-0">
<div class="hero__pretitle text-uppercase text-gray-400 font-weight-bold mb-3"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">
Book Club
</div>
<h2 class="hero__title font-size-10 mb-3"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="300">
<span class="hero__title--1 font-weight-bold d-block">A selection with</span>
<span class="hero__title--2 d-block font-weight-normal">only the best books</span>
</h2>
<p class="hero__subtitle font-size-2 mb-5"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="400">Sale Ends Midnight 30th April 2020
</p>
<a href="#" class="hero__btn btn btn-primary-green text-white btn-wide"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="500">Explore Books
</a>
</div>
<div
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="600" >
<img src="https://placehold.it/500x380" class="img-fluid">
</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>