<!-- ========== HERO ========== -->
<div class="container">
<div class="js-slick-carousel u-slick"
data-pagi-classes="d-xl-none text-center u-slick__pagination u-slick__pagination mt-7"
data-arrows-classes="d-none d-xl-block u-slick__arrow u-slick__arrow--v1 u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="flaticon-back u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-2"
data-arrow-right-classes="flaticon-next u-slick__arrow-inner u-slick__arrow-inner--right mr-lg-2">
<div class="bg-primary-yellow rounded-md px-5 px-xl-11 space-2" style="height: 500px;">
<div class="hero-slider">
<div class="media row">
<div class="col-md-6 col-xl-4 hero__body media-body align-self-center mb-5 mb-lg-0">
<p class="hero__pretitle text-uppercase text-primary-home-v3 opacity-md font-weight-bold mb-2 pb-1">HURRY UP BEFORE OFFER WILL END </p>
<h2 class="hero__title text-primary-home-v3 font-size-15 mb-4">
<span class="hero__title--1 font-weight-regular d-block">Limited Week</span>
<span class="hero__title--2 font-weight-bold d-block">Deal</span>
</h2>
<a href="#" class="hero__btn btn btn-primary-home-v3 text-primary-yellow btn-wide rounded-md">Shop Now</a>
</div>
<div class="col-md-6 col-xl position-relative mb-5 mb-lg-0">
<img src="https://placehold.it/350x404" class="img-fluid">
<div class="d-none badge badge-lg badge-primary-home-v3 position-absolute badge-pos--top-right text-primary-yellow rounded-circle d-xl-flex flex-column align-items-center justify-content-center">
<h6 class="font-weight-medium mb-n2">save</h6>
<span class="font-size-5 font-weight-medium">$49</span>
</div>
</div>
<div class="col-xl-4 align-self-center ">
<div class="price d-flex align-items-center font-weight-medium font-size-3 mb-4">
<ins class="text-decoration-none mr-2"><span class="woocommerce-Price-amount amount font-size-7 text-dark"><span class="woocommerce-Price-currencySymbol">$</span>15</span></ins>
<del class="font-size-1 font-weight-regular text-gray-700"><span class="woocommerce-Price-amount amount font-size-1 text-primary-home-v3 opacity-md"><span class="woocommerce-Price-currencySymbol">$</span>78,96</span></del>
</div>
<div class="countdown-timer mb-4">
<h5 class="countdown-timer__title font-size-3 mb-2 pb-1 text-primary-home-v3">Hurry Up! <span class="font-weight-regular">Offer ends in:</span></h5>
<div class="d-flex align-items-stretch justify-content-between">
<div class="py-2d75 text-primary-home-v3">
<span class="font-weight-medium font-size-3">114</span>
<span class="font-size-2">Days</span>
</div>
<div class="py-2d75 text-primary-home-v3">
<span class="font-weight-medium font-size-3">03</span>
<span class="font-size-2">Hours</span>
</div>
<div class="py-2d75 text-primary-home-v3">
<span class="font-weight-medium font-size-3">60</span>
<span class="font-size-2">Mins</span>
</div>
<div class="py-2d75 text-primary-home-v3">
<span class="font-weight-medium font-size-3">25</span>
<span class="font-size-2">Secs</span>
</div>
</div>
</div>
<div class="deal-progress">
<div class="d-flex justify-content-between font-size-2 mb-2d75 text-primary-home-v3">
<span>Already Sold: 14</span>
<span>Available: 3</span>
</div>
<div class="progress bg-white">
<div class="progress-bar bg-primary-home-v3" role="progressbar" style="width:55%" aria-valuenow="14" aria-valuemin="0" aria-valuemax="17"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-primary-yellow rounded-md px-5 px-xl-11 space-2" style="height: 500px;">
<div class="hero-slider">
<div class="media row">
<div class="col-md-6 col-xl-4 hero__body media-body align-self-center mb-5 mb-lg-0">
<p class="hero__pretitle text-uppercase text-primary-home-v3 opacity-md font-weight-bold mb-2 pb-1">HURRY UP BEFORE OFFER WILL END </p>
<h2 class="hero__title text-primary-home-v3 font-size-15 mb-4">
<span class="hero__title--1 font-weight-regular d-block">Limited Week</span>
<span class="hero__title--2 font-weight-bold d-block">Deal</span>
</h2>
<a href="#" class="hero__btn btn btn-primary-home-v3 text-primary-yellow btn-wide rounded-md">Shop Now</a>
</div>
<div class="col-md-6 col-xl position-relative mb-5 mb-lg-0">
<img src="https://placehold.it/350x404" class="img-fluid">
<div class="d-none badge badge-lg badge-primary-home-v3 position-absolute badge-pos--top-right text-primary-yellow rounded-circle d-xl-flex flex-column align-items-center justify-content-center">
<h6 class="font-weight-medium mb-n2">save</h6>
<span class="font-size-5 font-weight-medium">$49</span>
</div>
</div>
<div class="col-xl-4 align-self-center ">
<div class="price d-flex align-items-center font-weight-medium font-size-3 mb-4">
<ins class="text-decoration-none mr-2"><span class="woocommerce-Price-amount amount font-size-7 text-dark"><span class="woocommerce-Price-currencySymbol">$</span>15</span></ins>
<del class="font-size-1 font-weight-regular text-gray-700"><span class="woocommerce-Price-amount amount font-size-1 text-primary-home-v3 opacity-md"><span class="woocommerce-Price-currencySymbol">$</span>78,96</span></del>
</div>
<div class="countdown-timer mb-4">
<h5 class="countdown-timer__title font-size-3 mb-2 pb-1 text-primary-home-v3">Hurry Up! <span class="font-weight-regular">Offer ends in:</span></h5>
<div class="d-flex align-items-stretch justify-content-between">
<div class="py-2d75 text-primary-home-v3">
<span class="font-weight-medium font-size-3">114</span>
<span class="font-size-2">Days</span>
</div>
<div class="py-2d75 text-primary-home-v3">
<span class="font-weight-medium font-size-3">03</span>
<span class="font-size-2">Hours</span>
</div>
<div class="py-2d75 text-primary-home-v3">
<span class="font-weight-medium font-size-3">60</span>
<span class="font-size-2">Mins</span>
</div>
<div class="py-2d75 text-primary-home-v3">
<span class="font-weight-medium font-size-3">25</span>
<span class="font-size-2">Secs</span>
</div>
</div>
</div>
<div class="deal-progress">
<div class="d-flex justify-content-between font-size-2 mb-2d75 text-primary-home-v3">
<span>Already Sold: 14</span>
<span>Available: 3</span>
</div>
<div class="progress bg-white">
<div class="progress-bar bg-primary-home-v3" role="progressbar" style="width:55%" aria-valuenow="14" aria-valuemin="0" aria-valuemax="17"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-primary-yellow rounded-md px-5 px-xl-11 space-2" style="height: 500px;">
<div class="hero-slider">
<div class="media row">
<div class="col-md-6 col-xl-4 hero__body media-body align-self-center mb-5 mb-lg-0">
<p class="hero__pretitle text-uppercase text-primary-home-v3 opacity-md font-weight-bold mb-2 pb-1">HURRY UP BEFORE OFFER WILL END </p>
<h2 class="hero__title text-primary-home-v3 font-size-15 mb-4">
<span class="hero__title--1 font-weight-regular d-block">Limited Week</span>
<span class="hero__title--2 font-weight-bold d-block">Deal</span>
</h2>
<a href="#" class="hero__btn btn btn-primary-home-v3 text-primary-yellow btn-wide rounded-md">Shop Now</a>
</div>
<div class="col-md-6 col-xl position-relative mb-5 mb-lg-0">
<img src="https://placehold.it/350x404" class="img-fluid">
<div class="d-none badge badge-lg badge-primary-home-v3 position-absolute badge-pos--top-right text-primary-yellow rounded-circle d-xl-flex flex-column align-items-center justify-content-center">
<h6 class="font-weight-medium mb-n2">save</h6>
<span class="font-size-5 font-weight-medium">$49</span>
</div>
</div>
<div class="col-xl-4 align-self-center ">
<div class="price d-flex align-items-center font-weight-medium font-size-3 mb-4">
<ins class="text-decoration-none mr-2"><span class="woocommerce-Price-amount amount font-size-7 text-dark"><span class="woocommerce-Price-currencySymbol">$</span>15</span></ins>
<del class="font-size-1 font-weight-regular text-gray-700"><span class="woocommerce-Price-amount amount font-size-1 text-primary-home-v3 opacity-md"><span class="woocommerce-Price-currencySymbol">$</span>78,96</span></del>
</div>
<div class="countdown-timer mb-4">
<h5 class="countdown-timer__title font-size-3 mb-2 pb-1 text-primary-home-v3">Hurry Up! <span class="font-weight-regular">Offer ends in:</span></h5>
<div class="d-flex align-items-stretch justify-content-between">
<div class="py-2d75 text-primary-home-v3">
<span class="font-weight-medium font-size-3">114</span>
<span class="font-size-2">Days</span>
</div>
<div class="py-2d75 text-primary-home-v3">
<span class="font-weight-medium font-size-3">03</span>
<span class="font-size-2">Hours</span>
</div>
<div class="py-2d75 text-primary-home-v3">
<span class="font-weight-medium font-size-3">60</span>
<span class="font-size-2">Mins</span>
</div>
<div class="py-2d75 text-primary-home-v3">
<span class="font-weight-medium font-size-3">25</span>
<span class="font-size-2">Secs</span>
</div>
</div>
</div>
<div class="deal-progress">
<div class="d-flex justify-content-between font-size-2 mb-2d75 text-primary-home-v3">
<span>Already Sold: 14</span>
<span>Available: 3</span>
</div>
<div class="progress bg-white">
<div class="progress-bar bg-primary-home-v3" role="progressbar" style="width:55%" aria-valuenow="14" aria-valuemin="0" aria-valuemax="17"></div>
</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>