TV Show Carousel
Component #1
New Summer TV Series
<!-- Carousel Content -->
<section>
<div class="container px-md-5 pb-5 pb-lg-8">
<div class="mx-md-1">
<h6 class="text-center display-11 text-lh-1dot3 font-weight-semi-bold">New Summer TV Series</h6>
<div class="text-center tab-nav__v8">
<ul class="nav mb-4 justify-content-start justify-content-md-center flex-nowrap flex-md-wrap overflow-auto" role="tablist">
<li class="nav-item flex-shrink-0 flex-md-shrink-1">
<a class="nav-link active" id="pills-one-code-features-example6-tab" data-toggle="pill" href="#pills-one-code-features-example6" role="tab" aria-controls="pills-one-code-features-example6" aria-selected="true">New TV Series</a>
</li>
<li class="nav-item flex-shrink-0 flex-md-shrink-1">
<a class="nav-link" id="pills-two-code-features-example6-tab" data-toggle="pill" href="#pills-two-code-features-example6" role="tab" aria-controls="pills-two-code-features-example6" aria-selected="false">Upcoming TV Series</a>
</li>
<li class="nav-item flex-shrink-0 flex-md-shrink-1">
<a class="nav-link" id="pills-three-code-features-example6-tab" data-toggle="pill" href="#pills-three-code-features-example6" role="tab" aria-controls="pills-three-code-features-example6" aria-selected="false">Top 300</a>
</li>
<li class="nav-item flex-shrink-0 flex-md-shrink-1">
<a class="nav-link" id="pills-four-code-features-example6-tab" data-toggle="pill" href="#pills-four-code-features-example6" role="tab" aria-controls="pills-four-code-features-example6" aria-selected="false">Trailers</a>
</li>
</ul>
</div>
<div class="tab-content u-slick__tab">
<div class="tab-pane fade show active" id="pills-one-code-features-example6" role="tabpanel" aria-labelledby="pills-one-code-features-example6-tab">
<div class="js-slick-carousel slick slick-gutters-2"
data-hs-slick-carousel-options='{
"prevArrow": "<span class=\"fas fa-chevron-left slick-arrow slick-arrow-v5 left slick-arrow-right rounded-circle slick-arrow-centered-y left-0 ml-lg-n3 ml-wd-n6\"></span>",
"nextArrow": "<span class=\"fas fa-chevron-right slick-arrow slick-arrow-v5 right slick-arrow-right rounded-circle slick-arrow-centered-y mr-lg-n3 mr-wd-n6\"></span>",
"slidesToShow": 5,
"responsive": [{
"breakpoint": 992,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}]
}'>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/200x115/img1.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Dirt</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link">
<span class="position-absolute px-2d line-height-lg bg-primary rounded content-centered-x z-index-2 mt-n2 text-white font-size-12">Featured</span>
<img class="img-fluid" src="../assets/img/200x115/img2.jpg" alt="Image Description">
</a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Convenient Groom</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/200x115/img3.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Convenient Groom</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link">
<span class="position-absolute px-2d line-height-lg bg-primary rounded content-centered-x z-index-2 mt-n2 text-white font-size-12">Featured</span>
<img class="img-fluid" src="../assets/img/200x115/img4.jpg" alt="Image Description">
</a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Bpm</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/200x115/img5.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Sunday</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link">
<span class="position-absolute px-2d line-height-lg bg-primary rounded content-centered-x z-index-2 mt-n2 text-white font-size-12">Featured</span>
<img class="img-fluid" src="../assets/img/200x115/img6.jpg" alt="Image Description">
</a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Convenient Groom</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/200x115/img3.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Bpm</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/200x115/img2.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Sunday</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link">
<span class="position-absolute px-2d line-height-lg bg-primary rounded content-centered-x z-index-2 mt-n2 text-white font-size-12">Featured</span>
<img class="img-fluid" src="../assets/img/200x115/img4.jpg" alt="Image Description">
</a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Fantastic Beasts and Where to Find Them</a></div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-two-code-features-example6" role="tabpanel" aria-labelledby="pills-two-code-features-example6-tab">
<div class="js-slick-carousel slick slick-gutters-2"
data-hs-slick-carousel-options='{
"prevArrow": "<span class=\"fas fa-chevron-left slick-arrow slick-arrow-v5 left slick-arrow-right rounded-circle slick-arrow-centered-y left-0 ml-lg-n3 ml-wd-n6\"></span>",
"nextArrow": "<span class=\"fas fa-chevron-right slick-arrow slick-arrow-v5 right slick-arrow-right rounded-circle slick-arrow-centered-y mr-lg-n3 mr-wd-n6\"></span>",
"slidesToShow": 5,
"responsive": [{
"breakpoint": 992,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}]
}'>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/200x115/img1.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Dirt</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link">
<span class="position-absolute px-2d line-height-lg bg-primary rounded content-centered-x z-index-2 mt-n2 text-white font-size-12">Featured</span>
<img class="img-fluid" src="../assets/img/200x115/img2.jpg" alt="Image Description">
</a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Convenient Groom</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/200x115/img3.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Convenient Groom</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link">
<span class="position-absolute px-2d line-height-lg bg-primary rounded content-centered-x z-index-2 mt-n2 text-white font-size-12">Featured</span>
<img class="img-fluid" src="../assets/img/200x115/img4.jpg" alt="Image Description">
</a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Bpm</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/200x115/img5.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Sunday</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link">
<span class="position-absolute px-2d line-height-lg bg-primary rounded content-centered-x z-index-2 mt-n2 text-white font-size-12">Featured</span>
<img class="img-fluid" src="../assets/img/200x115/img6.jpg" alt="Image Description">
</a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Convenient Groom</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/200x115/img3.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Bpm</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/200x115/img2.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Sunday</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link">
<span class="position-absolute px-2d line-height-lg bg-primary rounded content-centered-x z-index-2 mt-n2 text-white font-size-12">Featured</span>
<img class="img-fluid" src="../assets/img/200x115/img4.jpg" alt="Image Description">
</a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Fantastic Beasts and Where to Find Them</a></div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-three-code-features-example6" role="tabpanel" aria-labelledby="pills-three-code-features-example6-tab">
<div class="js-slick-carousel slick slick-gutters-2"
data-hs-slick-carousel-options='{
"prevArrow": "<span class=\"fas fa-chevron-left slick-arrow slick-arrow-v5 left slick-arrow-right rounded-circle slick-arrow-centered-y left-0 ml-lg-n3 ml-wd-n6\"></span>",
"nextArrow": "<span class=\"fas fa-chevron-right slick-arrow slick-arrow-v5 right slick-arrow-right rounded-circle slick-arrow-centered-y mr-lg-n3 mr-wd-n6\"></span>",
"slidesToShow": 5,
"responsive": [{
"breakpoint": 992,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}]
}'>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/200x115/img1.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Dirt</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link">
<span class="position-absolute px-2d line-height-lg bg-primary rounded content-centered-x z-index-2 mt-n2 text-white font-size-12">Featured</span>
<img class="img-fluid" src="../assets/img/200x115/img2.jpg" alt="Image Description">
</a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Convenient Groom</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/200x115/img3.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Convenient Groom</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link">
<span class="position-absolute px-2d line-height-lg bg-primary rounded content-centered-x z-index-2 mt-n2 text-white font-size-12">Featured</span>
<img class="img-fluid" src="../assets/img/200x115/img4.jpg" alt="Image Description">
</a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Bpm</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/200x115/img5.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Sunday</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link">
<span class="position-absolute px-2d line-height-lg bg-primary rounded content-centered-x z-index-2 mt-n2 text-white font-size-12">Featured</span>
<img class="img-fluid" src="../assets/img/200x115/img6.jpg" alt="Image Description">
</a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Convenient Groom</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/200x115/img3.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Bpm</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/200x115/img2.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Sunday</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link">
<span class="position-absolute px-2d line-height-lg bg-primary rounded content-centered-x z-index-2 mt-n2 text-white font-size-12">Featured</span>
<img class="img-fluid" src="../assets/img/200x115/img4.jpg" alt="Image Description">
</a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Fantastic Beasts and Where to Find Them</a></div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-four-code-features-example6" role="tabpanel" aria-labelledby="pills-four-code-features-example6-tab">
<div class="js-slick-carousel slick slick-gutters-2"
data-hs-slick-carousel-options='{
"prevArrow": "<span class=\"fas fa-chevron-left slick-arrow slick-arrow-v5 left slick-arrow-right rounded-circle slick-arrow-centered-y left-0 ml-lg-n3 ml-wd-n6\"></span>",
"nextArrow": "<span class=\"fas fa-chevron-right slick-arrow slick-arrow-v5 right slick-arrow-right rounded-circle slick-arrow-centered-y mr-lg-n3 mr-wd-n6\"></span>",
"slidesToShow": 5,
"responsive": [{
"breakpoint": 992,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}]
}'>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/200x115/img1.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Dirt</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link">
<span class="position-absolute px-2d line-height-lg bg-primary rounded content-centered-x z-index-2 mt-n2 text-white font-size-12">Featured</span>
<img class="img-fluid" src="../assets/img/200x115/img2.jpg" alt="Image Description">
</a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Convenient Groom</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/200x115/img3.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Convenient Groom</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link">
<span class="position-absolute px-2d line-height-lg bg-primary rounded content-centered-x z-index-2 mt-n2 text-white font-size-12">Featured</span>
<img class="img-fluid" src="../assets/img/200x115/img4.jpg" alt="Image Description">
</a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Bpm</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/200x115/img5.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Sunday</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link">
<span class="position-absolute px-2d line-height-lg bg-primary rounded content-centered-x z-index-2 mt-n2 text-white font-size-12">Featured</span>
<img class="img-fluid" src="../assets/img/200x115/img6.jpg" alt="Image Description">
</a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Convenient Groom</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/200x115/img3.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Bpm</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link"><img class="img-fluid" src="../assets/img/200x115/img2.jpg" alt="Image Description"></a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Sunday</a></div>
</div>
<div class="product mt-2">
<div class="product-image mb-2">
<a href="#" class="d-inline-block position-relative stretched-link">
<span class="position-absolute px-2d line-height-lg bg-primary rounded content-centered-x z-index-2 mt-n2 text-white font-size-12">Featured</span>
<img class="img-fluid" src="../assets/img/200x115/img4.jpg" alt="Image Description">
</a>
</div>
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Fantastic Beasts and Where to Find Them</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Carousel Content -->