Videos Grid
Component #1
Football World Cup
View All
<!-- Grid Content -->
<section>
<div class="container px-md-4">
<div class="home-section home-section-episode-with-feature-episode">
<header class="d-md-flex align-items-center justify-content-between mb-3 pb-1 w-100">
<h6 class="font-size-24 font-weight-medium mb-md-0 text-gray-700">Football World Cup</h6>
<div class="d-none d-md-block border-top col p-0 mx-3 border-gray-3600"></div>
<a href="#" class="h-g-primary font-size-1 font-weight-medium font-secondary">View All</a>
</header>
<div class="row mx-n2">
<div class="col-md-3 px-2">
<div class="product mb-3 mb-lg-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<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 w-100" src="../assets/img/261x148/img6.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">FIFA World Cup Final</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
<div class="col-md-3 px-2">
<div class="product mb-3 mb-lg-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<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 w-100" src="../assets/img/261x148/img7.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">Croatia v England – 2018 FIFA World Cup Russia</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
<div class="col-md-3 px-2">
<div class="product mb-3 mb-lg-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<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 w-100" src="../assets/img/261x148/img8.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">Top 10 Goals</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
<div class="col-md-3 px-2">
<div class="product mb-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<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 w-100" src="../assets/img/261x148/img9.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">An Unforgettable World Cup</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
</div>
</div>
</div>
<div class="collapse mt-6" id="collapseExample1">
<div class="container px-md-4">
<div class="row mx-n2">
<div class="col-md-3 px-2">
<div class="product mb-3 mb-lg-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<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 w-100" src="../assets/img/261x148/img6.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">FIFA World Cup Final</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
<div class="col-md-3 px-2">
<div class="product mb-3 mb-lg-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<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 w-100" src="../assets/img/261x148/img7.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">Croatia v England – 2018 FIFA World Cup Russia</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
<div class="col-md-3 px-2">
<div class="product mb-3 mb-lg-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<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 w-100" src="../assets/img/261x148/img8.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">Top 10 Goals</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
<div class="col-md-3 px-2">
<div class="product mb-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<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 w-100" src="../assets/img/261x148/img9.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">An Unforgettable World Cup</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
</div>
</div>
</div>
<div class="space-1 position-relative d-flex">
<button class="btn btn-outline-1 mx-auto px-7 py-3 font-size-1 z-index-2 font-weight-medium font-secondary" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">
+ View more
</button>
<div class="border-top content-centered w-100 border-gray-1300"></div>
</div>
</section>
<!-- End Grid Content -->
Component #2
Moto GP
View All
<!-- Grid Content -->
<section>
<div class="container px-md-4">
<div class="home-section home-section-episode-with-feature-episode">
<header class="d-md-flex align-items-center justify-content-between mb-3 pb-1 w-100">
<h6 class="font-size-24 font-weight-medium mb-md-0 text-gray-700">Moto GP</h6>
<div class="d-none d-md-block border-top col p-0 mx-3 border-gray-3600"></div>
<a href="#" class="h-g-primary font-size-1 font-weight-medium font-secondary">View All</a>
</header>
<div class="row mx-n2">
<div class="col-md-3 px-2">
<div class="product mb-3 mb-lg-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid w-100" src="../assets/img/261x148/img10.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">Biggest wobbles and best saves in MotoGP</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
<div class="col-md-3 px-2">
<div class="product mb-3 mb-lg-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<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 w-100" src="../assets/img/261x148/img11.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">Winning Moment in Moto GP</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
<div class="col-md-3 px-2">
<div class="product mb-3 mb-lg-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid w-100" src="../assets/img/261x148/img12.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">Valentino Rossi || MotoGP's Superhero 46</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
<div class="col-md-3 px-2">
<div class="product mb-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<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 w-100" src="../assets/img/261x148/img13.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">Matthias Walkner Dakar</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
</div>
</div>
</div>
<div class="collapse mt-6" id="collapseExample2">
<div class="container px-md-4">
<div class="row mx-n2">
<div class="col-md-3 px-2">
<div class="product mb-3 mb-lg-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid w-100" src="../assets/img/261x148/img10.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">Biggest wobbles and best saves in MotoGP</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
<div class="col-md-3 px-2">
<div class="product mb-3 mb-lg-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<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 w-100" src="../assets/img/261x148/img11.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">Winning Moment in Moto GP</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
<div class="col-md-3 px-2">
<div class="product mb-3 mb-lg-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid w-100" src="../assets/img/261x148/img12.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">Valentino Rossi || MotoGP's Superhero 46</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
<div class="col-md-3 px-2">
<div class="product mb-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<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 w-100" src="../assets/img/261x148/img13.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">Matthias Walkner Dakar</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
</div>
</div>
</div>
<div class="space-1 position-relative d-flex">
<button class="btn btn-outline-1 mx-auto px-7 py-3 font-size-1 z-index-2 font-weight-medium font-secondary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
+ View more
</button>
<div class="border-top content-centered w-100 border-gray-1300"></div>
</div>
</section>
<!-- End Grid Content -->
Component #3
Trending Leagues
<!-- Grid Content -->
<section>
<div class="home-section home-section-episode-with-feature-episode">
<div class="container px-md-4">
<header class="d-md-flex align-items-center justify-content-between mb-3 pb-1">
<h6 class="font-size-24 font-weight-medium mb-md-0 text-gray-700">Trending Leagues</h6>
<div class="d-none d-lg-block border-top col p-0 mx-3 border-gray-3600"></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-two-code-features-example3" aria-selected="true">Today</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">This Week</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">This Month</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">Last 3 Months</a>
</li>
</ul>
</div>
</header>
<div class="tab-content">
<div class="tab-pane fade show active" id="pills-one-code-features-example3" role="tabpanel" ari-labelledby="pills-one-code-features-example3-tab">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-lg-0 position-relative" style="background-image: url(../assets/img/250x465/img1.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Basketball</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-lg-0 position-relative" style="background-image: url(../assets/img/250x465/img2.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Football</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-md-0 position-relative" style="background-image: url(../assets/img/250x465/img3.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Games</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 position-relative" style="background-image: url(../assets/img/250x465/img4.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">SuperBowl</a>
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-two-code-features-example3" role="tabpanel" ari-labelledby="pills-two-code-features-example3-tab">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-lg-0 position-relative" style="background-image: url(../assets/img/250x465/img2.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Basketball</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-lg-0 position-relative" style="background-image: url(../assets/img/250x465/img3.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Football</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-md-0 position-relative" style="background-image: url(../assets/img/250x465/img4.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Games</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 position-relative" style="background-image: url(../assets/img/250x465/img1.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">SuperBowl</a>
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-three-code-features-example3" role="tabpanel" ari-labelledby="pills-three-code-features-example3-tab">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-lg-0 position-relative" style="background-image: url(../assets/img/250x465/img2.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Basketball</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-lg-0 position-relative" style="background-image: url(../assets/img/250x465/img4.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Football</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-md-0 position-relative" style="background-image: url(../assets/img/250x465/img1.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Games</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 position-relative" style="background-image: url(../assets/img/250x465/img3.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">SuperBowl</a>
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-four-code-features-example3" role="tabpanel" ari-labelledby="pills-four-code-features-example3-tab">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-lg-0 position-relative" style="background-image: url(../assets/img/250x465/img4.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Basketball</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-lg-0 position-relative" style="background-image: url(../assets/img/250x465/img3.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Football</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-md-0 position-relative" style="background-image: url(../assets/img/250x465/img2.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Games</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 position-relative" style="background-image: url(../assets/img/250x465/img1.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">SuperBowl</a>
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Grid Content -->
Trending Leagues
<!-- Grid Content -->
<section>
<div class="home-section home-section-episode-with-feature-episode">
<div class="container px-md-4">
<header class="d-md-flex align-items-center justify-content-between mb-3 pb-1">
<h6 class="font-size-24 font-weight-medium mb-md-0 text-gray-700">Trending Leagues</h6>
<div class="d-none d-lg-block border-top col p-0 mx-3 border-gray-3600"></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-two-code-features-example3" aria-selected="true">Today</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">This Week</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">This Month</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">Last 3 Months</a>
</li>
</ul>
</div>
</header>
<div class="tab-content">
<div class="tab-pane fade show active" id="pills-one-code-features-example3" role="tabpanel" ari-labelledby="pills-one-code-features-example3-tab">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-lg-0 position-relative" style="background-image: url(../assets/img/250x465/img1.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Basketball</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-lg-0 position-relative" style="background-image: url(../assets/img/250x465/img2.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Football</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-md-0 position-relative" style="background-image: url(../assets/img/250x465/img3.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Games</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 position-relative" style="background-image: url(../assets/img/250x465/img4.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">SuperBowl</a>
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-two-code-features-example3" role="tabpanel" ari-labelledby="pills-two-code-features-example3-tab">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-lg-0 position-relative" style="background-image: url(../assets/img/250x465/img2.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Basketball</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-lg-0 position-relative" style="background-image: url(../assets/img/250x465/img3.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Football</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-md-0 position-relative" style="background-image: url(../assets/img/250x465/img4.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Games</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 position-relative" style="background-image: url(../assets/img/250x465/img1.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">SuperBowl</a>
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-three-code-features-example3" role="tabpanel" ari-labelledby="pills-three-code-features-example3-tab">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-lg-0 position-relative" style="background-image: url(../assets/img/250x465/img2.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Basketball</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-lg-0 position-relative" style="background-image: url(../assets/img/250x465/img4.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Football</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-md-0 position-relative" style="background-image: url(../assets/img/250x465/img1.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Games</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 position-relative" style="background-image: url(../assets/img/250x465/img3.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">SuperBowl</a>
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-four-code-features-example3" role="tabpanel" ari-labelledby="pills-four-code-features-example3-tab">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-lg-0 position-relative" style="background-image: url(../assets/img/250x465/img4.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Basketball</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-lg-0 position-relative" style="background-image: url(../assets/img/250x465/img3.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Football</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 mb-5 mb-md-0 position-relative" style="background-image: url(../assets/img/250x465/img2.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">Games</a>
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="bg-img-hero dark gradient-x-overlay-1 position-relative" style="background-image: url(../assets/img/250x465/img1.jpg); height: 467px;">
<div class="px-3 pt-3">
<div class="border border-white rounded-pseudo m-1">
<div class="h-425rem">
<h6 class="product-title font-size-18 text-center position-absolute bottom-0 right-0 left-0 mb-5">
<a href="#">SuperBowl</a>
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Grid Content -->
Component #4
Recommended for You
<!-- Grid Content -->
<section>
<div class="home-section home-section-episode-with-feature-episode">
<div class="container px-md-4">
<header class="d-md-flex align-items-center justify-content-between mb-3 pb-1">
<h6 class="font-size-24 font-weight-medium m-0 text-gray-700">Recommended for You</h6>
<div class="d-none d-md-block border-top col p-0 ml-3 border-gray-3600"></div>
</header>
<div class="row mx-n2">
<div class="col-md-4 col-lg px-2">
<div class="product mb-3 mb-lg-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid w-100" src="../assets/img/206x117/img6.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">Unstoppable Vihari Cruises with 151*</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
<div class="col-md-4 col-lg px-2">
<div class="product mb-3 mb-lg-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<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 w-100" src="../assets/img/206x117/img7.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">All-India Selection Committee Meet</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
<div class="col-md-4 col-lg px-2">
<div class="product mb-3 mb-lg-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid w-100" src="../assets/img/206x117/img8.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">VIVO IPL Player Auction 2019</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
<div class="col-md-4 col-lg px-2">
<div class="product mb-3 mb-lg-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<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 w-100" src="../assets/img/206x117/img9.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">Dhoni, India seal tense ODI series win</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
<div class="col-md-4 col-lg px-2">
<div class="product mb-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<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 w-100" src="../assets/img/206x117/img10.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">Pakistan Vs Australia 2018 | 3rd T20Is</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Grid Content -->
Recommended for You
<!-- Grid Content -->
<section>
<div class="home-section home-section-episode-with-feature-episode">
<div class="container px-md-4">
<header class="d-md-flex align-items-center justify-content-between mb-3 pb-1">
<h6 class="font-size-24 font-weight-medium m-0 text-gray-700">Recommended for You</h6>
<div class="d-none d-md-block border-top col p-0 ml-3 border-gray-3600"></div>
</header>
<div class="row mx-n2">
<div class="col-md-4 col-lg px-2">
<div class="product mb-3 mb-lg-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid w-100" src="../assets/img/206x117/img6.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">Unstoppable Vihari Cruises with 151*</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
<div class="col-md-4 col-lg px-2">
<div class="product mb-3 mb-lg-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<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 w-100" src="../assets/img/206x117/img7.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">All-India Selection Committee Meet</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
<div class="col-md-4 col-lg px-2">
<div class="product mb-3 mb-lg-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid w-100" src="../assets/img/206x117/img8.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">VIVO IPL Player Auction 2019</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
<div class="col-md-4 col-lg px-2">
<div class="product mb-3 mb-lg-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<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 w-100" src="../assets/img/206x117/img9.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">Dhoni, India seal tense ODI series win</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
<div class="col-md-4 col-lg px-2">
<div class="product mb-0">
<div class="product-image mb-2 pb-1">
<a class="d-block position-relative stretched-link" href="#">
<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 w-100" src="../assets/img/206x117/img10.jpg" alt="Image-Description">
</a>
</div>
<h6 class="product-title font-size-1 mb-0">
<a href="#">Pakistan Vs Australia 2018 | 3rd T20Is</a>
</h6>
<span class="font-size-12 font-weight-normal text-gray-1300">1 year ago</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Grid Content -->
Component #5
Trending Videos
<!-- Grid Content -->
<section>
<div class="mb-4">
<div class="home-section">
<header class="d-md-flex align-items-center justify-content-between mb-4 pb-1 w-100">
<h6 class="font-size-24 font-weight-medium m-0 text-gray-700">Trending Videos</h6>
<div class="border-top col p-0 ml-3 border-gray-3600"></div>
</header>
</div>
<div class="row mx-n2">
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img23.jpg" alt="Image-Description">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Funny And Cute Cats – Funniest Cats Compilation 2020</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>1.2k views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img24.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">The fastest workers are high – level experts and professionals</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>443 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img25.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Funniest Baby and Baby Animals</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>347 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img26.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Never Celebrate Too Early</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>145 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4 mb-lg-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img27.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Personality Test: What Do You See First and What It Says About You</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>133 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4 mb-lg-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img28.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">What type of person are you really? This pick one personality test will reveal who you truly are</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>132 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4 mb-lg-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img29.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Huawei P30 Pro Review: Optical Excellence!</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>120 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img30.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">TOP 15 BRAIN FOODS</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>53 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Grid Content -->
Trending Videos
<!-- Grid Content -->
<section>
<div class="mb-4">
<div class="home-section">
<header class="d-md-flex align-items-center justify-content-between mb-4 pb-1 w-100">
<h6 class="font-size-24 font-weight-medium m-0 text-gray-700">Trending Videos</h6>
<div class="border-top col p-0 ml-3 border-gray-3600"></div>
</header>
</div>
<div class="row mx-n2">
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img23.jpg" alt="Image-Description">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Funny And Cute Cats – Funniest Cats Compilation 2020</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>1.2k views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img24.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">The fastest workers are high – level experts and professionals</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>443 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img25.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Funniest Baby and Baby Animals</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>347 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img26.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Never Celebrate Too Early</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>145 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4 mb-lg-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img27.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Personality Test: What Do You See First and What It Says About You</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>133 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4 mb-lg-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img28.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">What type of person are you really? This pick one personality test will reveal who you truly are</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>132 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-4 mb-lg-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img29.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Huawei P30 Pro Review: Optical Excellence!</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>120 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md-4 col-lg-3 px-2">
<div class="product mb-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img30.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">TOP 15 BRAIN FOODS</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>53 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Grid Content -->
Component #6
Funny Cats
<!-- Grid Content -->
<section>
<div class="mb-4">
<div class="home-section">
<header class="d-md-flex align-items-center justify-content-between mb-4 pb-1 w-100">
<h6 class="font-size-24 font-weight-medium m-0 text-gray-700">Funny Cats</h6>
<div class="border-top col p-0 ml-3 border-gray-3600"></div>
</header>
</div>
<div class="row mx-n2">
<div class="col-md px-2">
<div class="product mb-4 mb-lg-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img23.jpg" alt="Image-Description">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Funny And Cute Cats – Funniest Cats Compilation 2020</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>1.2k views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md px-2">
<div class="product mb-4 mb-lg-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img31.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Funny And Cutest Cat Video</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>121 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md px-2">
<div class="product mb-4 mb-lg-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img32.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Funny Animals Compilation Best Videos Cats Dogs Goat Horse</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>96 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md px-2">
<div class="product mb-4 mb-lg-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img33.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Funny Cat Compilation Video</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>120 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md px-2">
<div class="product mb-4 mb-lg-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img34.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">It’s TIME for SUPER LAUGH! – Best FUNNY CAT videos</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>81 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Grid Content -->
Funny Cats
<!-- Grid Content -->
<section>
<div class="mb-4">
<div class="home-section">
<header class="d-md-flex align-items-center justify-content-between mb-4 pb-1 w-100">
<h6 class="font-size-24 font-weight-medium m-0 text-gray-700">Funny Cats</h6>
<div class="border-top col p-0 ml-3 border-gray-3600"></div>
</header>
</div>
<div class="row mx-n2">
<div class="col-md px-2">
<div class="product mb-4 mb-lg-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img23.jpg" alt="Image-Description">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Funny And Cute Cats – Funniest Cats Compilation 2020</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>1.2k views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md px-2">
<div class="product mb-4 mb-lg-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img31.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Funny And Cutest Cat Video</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>121 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md px-2">
<div class="product mb-4 mb-lg-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img32.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Funny Animals Compilation Best Videos Cats Dogs Goat Horse</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>96 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md px-2">
<div class="product mb-4 mb-lg-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img33.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Funny Cat Compilation Video</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>120 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md px-2">
<div class="product mb-4 mb-lg-0">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img34.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">It’s TIME for SUPER LAUGH! – Best FUNNY CAT videos</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>81 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Grid Content -->
Component #7
<!-- Grid Content -->
<section>
<div class="row mx-n2 mb-md-4 pb-md-1">
<div class="col-md-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img23.jpg" alt="Image-Description">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Funny And Cute Cats – Funniest Cats Compilation 2020</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>1.2k views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img24.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">The fastest workers are high – level experts and professionals</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>443 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img25.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Funniest Baby and Baby Animals</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>347 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img26.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Never Celebrate Too Early</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>145 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
</div>
</section>
<!-- End Grid Content -->
<!-- Grid Content -->
<section>
<div class="row mx-n2 mb-md-4 pb-md-1">
<div class="col-md-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img23.jpg" alt="Image-Description">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Funny And Cute Cats – Funniest Cats Compilation 2020</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>1.2k views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img24.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">The fastest workers are high – level experts and professionals</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>443 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img25.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Funniest Baby and Baby Animals</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>347 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
<div class="col-md-3 px-2">
<div class="product mb-4">
<div class="product-image mb-2">
<a class="d-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/480x270/img26.jpg" alt="Image-Desc">
</a>
</div>
<h6 class="font-size-1 font-weight-bold mb-0 product-title d-inline-block">
<a href="#">Never Celebrate Too Early</a>
</h6>
<div class="font-size-12 text-gray-1300">
<span>145 views</span>
<span class="product-comment">1 year ago</span>
</div>
</div>
</div>
</div>
</section>
<!-- End Grid Content -->