Movies Tab
Component #1
Hot Premieres
Have a Nice Day
A city in southern China and a bag containing a million yuan draw several people from diverse backgrounds with different personal motives into a bloody conflict
Black Mirror
In 1984, a young programmer begins to question reality as he works to adapt a fantasy novel into a video game.
Delta Bravo
strange black entity from another world bonds with Peter Parker and causes inner turmoil as he contends with new villains, temptations, and revenge.
Have a Nice Day
A city in southern China and a bag containing a million yuan draw several people from diverse backgrounds with different personal motives into a bloody conflict
Black Mirror
In 1984, a young programmer begins to question reality as he works to adapt a fantasy novel into a video game.
Delta Bravo
strange black entity from another world bonds with Peter Parker and causes inner turmoil as he contends with new villains, temptations, and revenge.
Have a Nice Day
A city in southern China and a bag containing a million yuan draw several people from diverse backgrounds with different personal motives into a bloody conflict
Black Mirror
In 1984, a young programmer begins to question reality as he works to adapt a fantasy novel into a video game.
Delta Bravo
strange black entity from another world bonds with Peter Parker and causes inner turmoil as he contends with new villains, temptations, and revenge.
Have a Nice Day
A city in southern China and a bag containing a million yuan draw several people from diverse backgrounds with different personal motives into a bloody conflict
Black Mirror
In 1984, a young programmer begins to question reality as he works to adapt a fantasy novel into a video game.
Delta Bravo
strange black entity from another world bonds with Peter Parker and causes inner turmoil as he contends with new villains, temptations, and revenge.
<!-- featured-movie -->
<section class="bg-img-hero space-3" style="background-image: url(../assets/img/1920x600/img1.jpg);">
<div class="container px-md-4">
<div class="row">
<div class="col-lg-6 col-xl-5">
<div class="">
<img class="img-fluid mb-6 d-block" src="../assets/img/188x60/img1.png" alt="Image Description">
<a href="#" class="display-8 h-w-primary d-inline-block font-secondary mb-6">Delta Bravo</a>
<p class="text-gray-1800 mb-6 font-secondary d-block font-size-1 font-weight-medium">strange black entity from another world bonds with Peter Parker and causes inner turmoil as he contends with new villains, temptations, and revenge.</p>
<div class="d-md-flex">
<a href="#" class="btn btn-primary px-6 py-3d btn-sm mb-3 mb-md-0" tabindex="0">WATCH NOW</a>
<a href="#" class="btn btn-outline-light ml-md-4 px-6 py-3d btn-sm" tabindex="0">+ PLAYLIST</a>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-7 d-none d-lg-flex align-items-center justify-content-center">
<div class="">
<!-- Video -->
<a class="js-fancybox btn btn-play d-flex align-items-center justify-content-center rounded-circle" href="javascript:;"
data-hs-fancybox-options='{
"src": "//youtube.com/0qisGSwZym4",
"speed": 700
}'>
<i class="fas fa-play text-primary"></i>
</a>
<!-- End Video -->
</div>
</div>
</div>
</div>
</section>
<!-- End featured-movie -->
Component #2
2020 Top Movies
<!-- Tab Content -->
<section>
<div class="bg-gray-2000 space-1">
<div class="container px-md-6 px-xl-7 px-wd-6 pb-3 pt-2">
<div class="border-bottom pb-4 border-g-1200-op mb-1">
<div class="home-section">
<header class="d-md-flex align-items-center justify-content-between mb-5 w-100">
<div class="font-size-24 font-weight-medium mb-3 mb-md-0 text-white font-secondary">2020 Top Movies</div>
<div class="d-none d-lg-block border-top col p-0 mx-3 border-gray-6830"></div>
<div class="tab-nav__v2">
<ul class="nav justify-content-start flex-nowrap flex-lg-wrap overflow-auto" role="tab-list">
<li class="nav-item flex-shrink-0 flex-shrink-md-1">
<a class="nav-link active" id="pills-one-code-features-example3-tab" data-toggle="pill" href="#pills-one-code-features-example3" role="tab" aria-controls="pills-one-code-features-example3" aria-selected="true">Action</a>
</li>
<li class="nav-item flex-shrink-0 flex-shrink-md-1">
<a class="nav-link" id="pills-two-code-features-example3-tab" data-toggle="pill" href="#pills-two-code-features-example3" role="tab" aria-controls="pills-two-code-features-example3" aria-selected="false">Biography</a>
</li>
<li class="nav-item flex-shrink-0 flex-shrink-md-1">
<a class="nav-link" id="pills-three-code-features-example3-tab" data-toggle="pill" href="#pills-three-code-features-example3" role="tab" aria-controls="pills-three-code-features-example3" aria-selected="false">Sci-Fi</a>
</li>
<li class="nav-item flex-shrink-0 flex-shrink-md-1">
<a class="nav-link" id="pills-four-code-features-example3-tab" data-toggle="pill" href="#pills-four-code-features-example3" role="tab" aria-controls="pills-four-code-features-example3" aria-selected="false">Crime</a>
</li>
<li class="nav-item flex-shrink-0 flex-shrink-md-1">
<a class="nav-link" id="pills-five-code-features-example3-tab" data-toggle="pill" href="#pills-five-code-features-example3" role="tab" aria-controls="pills-five-code-features-example3" aria-selected="false">Drama</a>
</li>
<li class="nav-item flex-shrink-0 flex-shrink-md-1">
<a class="nav-link" id="pills-six-code-features-example3-tab" data-toggle="pill" href="#pills-six-code-features-example3" role="tab" aria-controls="pills-six-code-features-example3" aria-selected="false">kids</a>
</li>
</ul>
</div>
</header>
</div>
<div class="tab-content">
<div class="tab-pane fade show active dark" id="pills-one-code-features-example3" role="tab-panel" aria-labelledby="pills-one-code-features-example3-tab">
<div class="row mx-n2d">
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-lg-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img4.jpg" alt="Image-Descrition">
</div>
<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 top-0">Featured</span>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Delta Bravo</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-lg-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img5.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Drama</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Mad</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-lg-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img6.jpg" alt="Image-Descrition">
</div>
<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 top-0">Featured</span>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
<span><a href="#">Comedy</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Oh Lucy</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-md-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img7.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
<span><a href="#">Adventures</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Euphoria</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-md-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img8.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
<span><a href="#">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Black Mirror</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img9.jpg" alt="Image-Descrition">
</div>
<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 top-0">Featured</span>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Groom</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade dark" id="pills-two-code-features-example3" role="tab-panel" aria-labelledby="pills-two-code-features-example3-tab">
<div class="row mx-n2d">
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-lg-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img9.jpg" alt="Image-Descrition">
</div>
<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 top-0">Featured</span>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Delta Bravo</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-lg-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img8.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Drama</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Mad</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-lg-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img7.jpg" alt="Image-Descrition">
</div>
<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 top-0">Featured</span>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
<span><a href="#">Comedy</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Oh Lucy</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-md-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img6.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
<span><a href="#">Adventures</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Euphoria</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-md-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img5.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
<span><a href="#">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Black Mirror</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img4.jpg" alt="Image-Descrition">
</div>
<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 top-0">Featured</span>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Groom</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade dark" id="pills-three-code-features-example3" role="tab-panel" aria-labelledby="pills-three-code-features-example3-tab">
<div class="row mx-n2d">
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-lg-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img5.jpg" alt="Image-Descrition">
</div>
<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 top-0">Featured</span>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Delta Bravo</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-lg-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img7.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Drama</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Mad</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-lg-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img9.jpg" alt="Image-Descrition">
</div>
<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 top-0">Featured</span>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
<span><a href="#">Comedy</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Oh Lucy</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-md-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img4.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
<span><a href="#">Adventures</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Euphoria</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-md-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img6.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
<span><a href="#">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Black Mirror</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img8.jpg" alt="Image-Descrition">
</div>
<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 top-0">Featured</span>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Groom</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade dark" id="pills-four-code-features-example3" role="tab-panel" aria-labelledby="pills-four-code-features-example3-tab">
<div class="row mx-n2d">
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-lg-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img4.jpg" alt="Image-Descrition">
</div>
<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 top-0">Featured</span>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Delta Bravo</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-lg-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img6.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Drama</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Mad</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-lg-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img8.jpg" alt="Image-Descrition">
</div>
<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 top-0">Featured</span>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
<span><a href="#">Comedy</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Oh Lucy</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-md-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img5.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
<span><a href="#">Adventures</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Euphoria</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-md-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img7.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
<span><a href="#">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Black Mirror</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img9.jpg" alt="Image-Descrition">
</div>
<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 top-0">Featured</span>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Groom</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade dark" id="pills-five-code-features-example3" role="tab-panel" aria-labelledby="pills-five-code-features-example3-tab">
<div class="row mx-n2d">
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-lg-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img8.jpg" alt="Image-Descrition">
</div>
<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 top-0">Featured</span>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Delta Bravo</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-lg-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img9.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Drama</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Mad</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-lg-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img6.jpg" alt="Image-Descrition">
</div>
<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 top-0">Featured</span>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
<span><a href="#">Comedy</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Oh Lucy</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-md-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img7.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
<span><a href="#">Adventures</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Euphoria</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-md-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img4.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
<span><a href="#">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Black Mirror</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img5.jpg" alt="Image-Descrition">
</div>
<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 top-0">Featured</span>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Groom</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade dark" id="pills-six-code-features-example3" role="tab-panel" aria-labelledby="pills-six-code-features-example3-tab">
<div class="row mx-n2d">
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-lg-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img6.jpg" alt="Image-Descrition">
</div>
<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 top-0">Featured</span>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Delta Bravo</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-lg-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img5.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Drama</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Mad</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-lg-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img4.jpg" alt="Image-Descrition">
</div>
<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 top-0">Featured</span>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
<span><a href="#">Comedy</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Oh Lucy</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-md-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img9.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
<span><a href="#">Adventures</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Euphoria</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-4 mb-md-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img7.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
<span><a href="#">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">Black Mirror</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-2 px-2d">
<div class="mb-0">
<div class="position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/300x450/img8.jpg" alt="Image-Descrition">
</div>
<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 top-0">Featured</span>
<div class="position-absolute bottom-0 pb-2 pl-3">
<div class="product--title product-meta font-size-12">
<span><a href="#">2020</a></span>
<span><a href="#">Action</a></span>
</div>
<div class="product-title font-weight-bold font-size-1"><a href="#">The Groom</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<a href="#" class="h-w-primary text-gray-1300 d-inline-flex align-items-center font-secondary font-weight-medium font-size-13">VIEW ALL
<svg class="ml-2" xmlns="http://www.w3.org/2000/svg" width="4" height="7"><path d="M3.979,3.703 C3.987,3.785 3.966,3.869 3.903,3.934 L1.038,6.901 C0.921,7.023 0.724,7.029 0.598,6.916 L0.143,6.506 C0.017,6.393 0.011,6.203 0.128,6.082 L2.190,3.946 C2.276,3.829 2.356,3.691 2.356,3.548 C2.356,3.214 1.947,2.885 1.947,2.885 L1.963,2.877 L0.080,0.905 C-0.036,0.784 -0.029,0.592 0.095,0.479 L0.547,0.068 C0.671,-0.045 0.867,-0.039 0.983,0.083 L3.823,3.057 C3.867,3.102 3.876,3.161 3.885,3.218 C3.945,3.267 3.988,3.334 3.988,3.416 L3.988,3.681 C3.988,3.690 3.979,3.694 3.979,3.703 Z" fill="rgb(148, 156, 176)"></path></svg>
</a>
</div>
</div>
</div>
</section>
<!-- End Tab Content -->