Blogs - Grid
Component #1
<!-- Blog Post -->
<section class="blog-post">
<div class="container px-md-5">
<div class="mx-md-1">
<div class="row mb-5">
<div class="col-md-6 col-lg-3">
<div class="mb-5 mb-lg-0">
<a class="d-block mb-3" href="#">
<img class="img-fluid h-185rem" src="../assets/img/248x185/img1.jpg" alt="Image-Description">
</a>
<div class="text-center">
<a class="font-size-13 font-weight-bold" href="#">Movie News</a>
<h6 class="product_title font-size-15 font-weight-semi-bold font-secondary text-lh-lg mb-1">
<a href="#">Emmy 2020: “Game of Throne” featured having 22 nominee</a>
</h6>
<a class="h-g-primary font-size-13 font-weight-normal font-italic" href="#">January 30, 2020</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="mb-5 mb-lg-0">
<a class="d-block mb-3" href="#">
<img class="img-fluid h-185rem" src="../assets/img/248x185/img2.jpg" alt="Image-Description">
</a>
<div class="text-center">
<a class="font-size-13 font-weight-bold" href="#">Reviews</a>
<h6 class="product_title font-size-15 font-weight-semi-bold font-secondary text-lh-lg mb-1">
<a href="#">The 6 Best Hard Movies That Aren't Not Actually Hard</a>
</h6>
<a class="h-g-primary font-size-13 font-weight-normal font-italic" href="#">January 30, 2020</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="mb-5 mb-lg-0">
<a class="d-block mb-3" href="#">
<img class="img-fluid h-185rem" src="../assets/img/248x185/img3.jpg" alt="Image-Description">
</a>
<div class="text-center">
<a class="font-size-13 font-weight-bold" href="#">Tv Series</a>
<h6 class="product_title font-size-15 font-weight-semi-bold font-secondary text-lh-lg mb-1">
<a href="#">Why Announcing Bad Never Let Walt Try His Blue Meth</a>
</h6>
<a class="h-g-primary font-size-13 font-weight-normal font-italic" href="#">January 30, 2020</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<a class="d-block mb-3" href="#">
<img class="img-fluid h-185rem" src="../assets/img/248x185/img4.jpg" alt="Image-Description">
</a>
<div class="text-center">
<a class="font-size-13 font-weight-bold" href="#">Movie Trailers</a>
<h6 class="product_title font-size-15 font-weight-semi-bold font-secondary text-lh-lg mb-1">
<a href="#">Galaxy Wars: XII Is Bringing BackWilliams as Anne Trailer #2</a>
</h6>
<a class="h-g-primary font-size-13 font-weight-normal font-italic" href="#">January 30, 2020</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Blog Post -->
Component #2
Movie Reviews
VIEW ALL
The Couple Was Originally A Direct To Video Release, According To Crew
Praesent iaculis, purus ac vehicula mattis, arcu lorem blandit nisl, non laoreet dui mi eget elit. Donec porttitor ex vel augue maximus luctus. Vivamus finibus nibh eu nunc volutpat suscipit.
Movies That Earned a 0% Rating on Rotten Pomidoros
Praesent iaculis, purus ac vehicula mattis, arcu lorem blandit nisl, non laoreet dui mi eget elit. Donec porttitor ex vel augue maximus luctus. Vivamus finibus nibh eu nunc volutpat suscipit.
<!-- Blog Section -->
<div class="container">
<div class="d-flex align-items-center justify-content-between mb-4 pb-1">
<h5 class="font-size-24 font-weight-medium font-secondary mb-0">Movie Reviews</h5>
<div class="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>
</div>
<div class="row mb-5 mb-lg-0">
<div class="col-lg-6">
<div class="mb-5 mb-lg-0">
<a href="#" class="d-block mb-3 pb-1">
<img class="img-fluid" src="../assets/img/360x200/img1.jpg" alt="Image-Description">
</a>
<h6 class="font-size-22 font-weight-semi-bold font-secondary text-lh-1dot3 mb-1">
<a href="#" class="text-dark">The Couple Was Originally A Direct To Video Release, According To Crew</a>
</h6>
<div class="mb-2 pb-1">
<a href="#" class="font-weight-bold font-size-13">
<span>Hot Rumours</span>
</a>
<a href="#" class="product-comment font-weight-normal font-size-13 font-italic h-g-primary">
<span>February 2 2020</span>
</a>
<a href="#" class="product-comment font-weight-normal font-size-13 font-italic h-g-primary">
<span>1 Comment</span>
</a>
</div>
<p class="font-size-1 mb-0">Praesent iaculis, purus ac vehicula mattis, arcu lorem blandit nisl, non laoreet dui mi eget elit. Donec porttitor ex vel augue maximus luctus. Vivamus finibus nibh eu nunc volutpat suscipit.</p>
</div>
</div>
<div class="col-lg-6">
<div >
<a href="#" class="d-block mb-3 pb-1">
<img class="img-fluid" src="../assets/img/360x200/img2.jpg" alt="Image-Description">
</a>
<h6 class="font-size-22 font-weight-semi-bold font-secondary text-lh-1dot3 mb-1">
<a href="#" class="text-dark">Movies That Earned a 0% Rating on Rotten Pomidoros</a>
</h6>
<div class="mb-2 pb-1">
<a href="#" class="font-weight-bold font-size-13">
<span>Movie News</span>
</a>
<a href="#" class="product-comment font-weight-normal font-size-13 font-italic h-g-primary">
<span>November 2 2020</span>
</a>
<a href="#" class="product-comment font-weight-normal font-size-13 font-italic h-g-primary">
<span>1 Comment</span>
</a>
</div>
<p class="font-size-1 mb-0">Praesent iaculis, purus ac vehicula mattis, arcu lorem blandit nisl, non laoreet dui mi eget elit. Donec porttitor ex vel augue maximus luctus. Vivamus finibus nibh eu nunc volutpat suscipit.</p>
</div>
</div>
</div>
</div>
<!-- End Blog Section -->
Component #3
Televisions
VIEW ALL
Whats More, That Isnt Even The Only Possible Callback
Praesent iaculis, purus ac vehicula mattis, arcu lorem blandit nisl, non laoreet dui mi eget elit. Donec porttitor ex vel augue maximus luctus. Vivamus finibus nibh eu nunc volutpat suscipit.
<!-- Blogs Section -->
<div class="container">
<div class="mb-5 mb-lg-0">
<div class="d-flex align-items-center justify-content-between mb-4 pb-1">
<h5 class="font-size-24 font-weight-medium font-secondary mb-0">Televisions</h5>
<div class="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>
</div>
<div class="row">
<div class="col-xl-6">
<div class="mb-5 mb-xl-0">
<a class="d-block mb-3 pb-1" href="#">
<img class="img-fluid" src="../assets/img/345x270/img1.jpg" alt="Image-Description">
</a>
<h6 class="product_title font-size-22 font-weight-semi-bold font-secondary text-lh-1dot25 mb-1">
<a href="#">Whats More, That Isnt Even The Only Possible Callback</a>
</h6>
<div class="mb-2 pb-1">
<a href="#" class="font-weight-bold font-size-13">
<span>TV Series</span>
</a>
<a href="#" class="product-comment font-weight-normal font-size-13 font-italic h-g-primary">
<span>August 5 2020</span>
</a>
</div>
<p class="font-size-1 mb-0">Praesent iaculis, purus ac vehicula mattis, arcu lorem blandit nisl, non laoreet dui mi eget elit. Donec porttitor ex vel augue maximus luctus. Vivamus finibus nibh eu nunc volutpat suscipit.</p>
</div>
</div>
<div class="col-xl-6">
<div class="d-md-flex mb-4">
<a class="d-block mb-3 mb-md-0" href="#">
<img class="img-fluid" src="../assets/img/175x115/img1.jpg" alt="Image-Description">
</a>
<div class="ml-md-3">
<h6 class="product_title font-size-17 font-weight-semi-bold font-secondary text-lh-1dot25 mb-1">
<a href="#">Whats More, That Isnt Even The Only Possible Callback</a>
</h6>
<div class="mb-2 pb-1">
<a href="#" class="font-weight-bold font-size-13">
<span>TV Series</span>
</a>
<a href="#" class="product-comment font-weight-normal font-size-13 font-italic h-g-primary">
<span>August 5 2020</span>
</a>
</div>
</div>
</div>
<div class="d-md-flex mb-4">
<a class="d-block mb-3 mb-md-0" href="#">
<img class="img-fluid" src="../assets/img/175x115/img2.jpg" alt="Image-Description">
</a>
<div class="ml-md-3">
<h6 class="product_title font-size-17 font-weight-semi-bold font-secondary text-lh-1dot25 mb-1">
<a href="#">Whats More, That Isnt Even The Only Possible Callback</a>
</h6>
<div class="mb-2 pb-1">
<a href="#" class="font-weight-bold font-size-13">
<span>TV Series</span>
</a>
<a href="#" class="product-comment font-weight-normal font-size-13 font-italic h-g-primary">
<span>August 5 2020</span>
</a>
</div>
</div>
</div>
<div class="d-md-flex mb-0">
<a class="d-block mb-3 mb-md-0" href="#">
<img class="img-fluid" src="../assets/img/175x115/img3.jpg" alt="Image-Description">
</a>
<div class="ml-md-3">
<h6 class="product_title font-size-17 font-weight-semi-bold font-secondary text-lh-1dot25 mb-1">
<a href="#">Whats More, That Isnt Even The Only Possible Callbackg</a>
</h6>
<div class="mb-2 pb-1">
<a href="#" class="font-weight-bold font-size-13">
<span>TV Series</span>
</a>
<a href="#" class="product-comment font-weight-normal font-size-13 font-italic h-g-primary">
<span>August 5 2020</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Blogs Section -->
Component #4
<!-- Blogs -->
<div class="container">
<div class="d-flex align-items-center justify-content-between mb-4 pb-1">
<h5 class="font-size-24 font-weight-medium font-secondary mb-0">TV Rumours</h5>
<div class="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>
</div>
<div class="row">
<div class="col-lg-4">
<div>
<a class="d-block mb-3 pb-1" href="#">
<img class="img-fluid" src="../assets/img/230x130/img1.jpg" alt="Image-Description">
</a>
<h6 class="product_title font-size-17 font-weight-semi-bold text-lh-md mb-1">
<a href="#">First Glass Photos Bring Unbreakable and Split Villians Togethers</a>
</h6>
<div class="mb-2 pb-1">
<a href="#" class="font-weight-bold font-size-13">
<span>Hot Rumours</span>
</a>
<a href="#" class="product-comment font-weight-normal font-size-13 font-italic h-g-primary">
<span>August 5 2020</span>
</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div>
<a class="d-block mb-3 pb-1" href="#">
<img class="img-fluid" src="../assets/img/230x130/img2.jpg" alt="Image-Description">
</a>
<h6 class="product_title font-size-17 font-weight-semi-bold text-lh-md mb-1">
<a href="#">Scarlett Drops Out Transgender Man Following Backlash</a>
</h6>
<div class="mb-2 pb-1">
<a href="#" class="font-weight-bold font-size-13">
<span>Hot Rumours</span>
</a>
<a href="#" class="product-comment font-weight-normal font-size-13 font-italic h-g-primary">
<span>August 5 2020</span>
</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div>
<a class="d-block mb-3 pb-1" href="#">
<img class="img-fluid" src="../assets/img/230x130/img3.jpg" alt="Image-Description">
</a>
<h6 class="product_title font-size-17 font-weight-semi-bold text-lh-md mb-1">
<a href="#">The 6 Best Hard Movies</a>
</h6>
<div class="mb-2 pb-1">
<a href="#" class="font-weight-bold font-size-13">
<span>Hot Rumours</span>
</a>
<a href="#" class="product-comment font-weight-normal font-size-13 font-italic h-g-primary">
<span>August 5 2020</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- End Blogs -->
Component #5
Thorin Used Anti-glay Slur
Praesent iaculis, purus ac vehicula mattis, arcu lorem blandit nisl, non laoreet dui mi eget elit. Donec porttitor ex vel augue maximus luctus. Vivamus finibus nibh eu nunc volutpat suscipit.
Record-Setting Griefer or Villain?
Praesent iaculis, purus ac vehicula mattis, arcu lorem blandit nisl, non laoreet dui mi eget elit. Donec porttitor ex vel augue maximus luctus. Vivamus finibus nibh eu nunc volutpat suscipit.
GTA V1 – Rumors & Facts
Praesent iaculis, purus ac vehicula mattis, arcu lorem blandit nisl, non laoreet dui mi eget elit. Donec porttitor ex vel augue maximus luctus. Vivamus finibus nibh eu nunc volutpat suscipit.
Thorin Used Anti-glay Slur
Praesent iaculis, purus ac vehicula mattis, arcu lorem blandit nisl, non laoreet dui mi eget elit. Donec porttitor ex vel augue maximus luctus. Vivamus finibus nibh eu nunc volutpat suscipit.
GTA V2 – Rumors & Facts
Praesent iaculis, purus ac vehicula mattis, arcu lorem blandit nisl, non laoreet dui mi eget elit. Donec porttitor ex vel augue maximus luctus. Vivamus finibus nibh eu nunc volutpat suscipit.
<!-- Blogs Section -->
<section class="bg-gray-1100">
<div class="space-top-1 space-top-xl-4 bg-img-hero" style="background-image: url(../assets/img/1920x758/img1.jpg); height: auto;">
<div class="container px-md-6 pb-lg-4 space-1 mt-5">
<!-- Blog Post -->
<div class="row mx-n2 dark">
<div class="col-lg-6 px-2">
<div class="product position-relative mb-4 mb-lg-0">
<div class="position-relative">
<a class="d-block gradient-x-overlay-2" href="#">
<img class="img-fluid" src="../assets/img/696x560/img1.jpg" alt="Image-Description">
</a>
</div>
<div class="position-absolute bottom-0 px-3 pb-3 z-index-2">
<h6 class="product-title font-secondary font-weight-semi-bold font-size-18 mb-1">
<a href="#">Thorin Used Anti-glay Slur</a>
</h6>
<p class="mb-0 line-clamp-1 font-size-1 text-white">Praesent iaculis, purus ac vehicula mattis, arcu lorem blandit nisl, non laoreet dui mi eget elit. Donec porttitor ex vel augue maximus luctus. Vivamus finibus nibh eu nunc volutpat suscipit.</p>
<div class="d-flex align-items-center">
<div class="text-lh-1dot1">
<a class="font-size-13 font-weight-bold" href="#">News</a>
</div>
<div>
<a href="#" class="product-comment font-weight-normal font-size-13 font-italic h-g-primary">
<span>October 6 2020</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 px-2">
<div class="row mx-n2">
<div class="col-md-6 px-2">
<div class="product mb-3 position-relative">
<div class="position-relative">
<a class="d-block gradient-x-overlay-2" href="#">
<img class="img-fluid" src="../assets/img/640x620/img1.jpg" alt="Image-Description">
</a>
</div>
<div class="position-absolute bottom-0 mx-3 mb-3 z-index-2">
<h6 class="product-title font-secondary font-weight-semi-bold font-size-18 mb-1">
<a href="#">Record-Setting Griefer or Villain?</a>
</h6>
<p class="mb-0 line-clamp-1 font-size-1 text-white">Praesent iaculis, purus ac vehicula mattis, arcu lorem blandit nisl, non laoreet dui mi eget elit. Donec porttitor ex vel augue maximus luctus. Vivamus finibus nibh eu nunc volutpat suscipit.</p>
<div class="d-flex align-items-center">
<div class="text-lh-1dot1">
<a class="font-size-13 font-weight-bold" href="#">Uncategorized</a>
</div>
<div>
<a href="#" class="product-comment font-weight-normal font-size-13 font-italic h-g-primary">
<span>October 6 2020</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 px-2">
<div class="product mb-3 position-relative">
<div class="position-relative">
<a class="d-block gradient-x-overlay-2" href="#">
<img class="img-fluid" src="../assets/img/640x620/img2.jpg" alt="Image-Description">
</a>
</div>
<div class="position-absolute bottom-0 mx-3 mb-3 z-index-2">
<h6 class="product-title font-secondary font-weight-semi-bold font-size-18 mb-1">
<a href="#">GTA V1 – Rumors & Facts</a>
</h6>
<p class="mb-0 line-clamp-1 font-size-1 text-white">Praesent iaculis, purus ac vehicula mattis, arcu lorem blandit nisl, non laoreet dui mi eget elit. Donec porttitor ex vel augue maximus luctus. Vivamus finibus nibh eu nunc volutpat suscipit.</p>
<div class="d-flex align-items-center">
<div class="text-lh-1dot1">
<a class="font-size-13 font-weight-bold" href="#">Movie</a>
</div>
<div>
<a href="#" class="product-comment font-weight-normal font-size-13 font-italic h-g-primary">
<span>August 6 2020</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 px-2">
<div class="product mb-3 position-relative">
<div class="position-relative">
<a class="d-block gradient-x-overlay-2" href="#">
<img class="img-fluid" src="../assets/img/640x620/img3.jpg" alt="Image-Description">
</a>
</div>
<div class="position-absolute bottom-0 mx-3 mb-3 z-index-2">
<h6 class="product-title font-secondary font-weight-semi-bold font-size-18 mb-1">
<a href="#">Thorin Used Anti-glay Slur</a>
</h6>
<p class="mb-0 line-clamp-1 font-size-1 text-white">Praesent iaculis, purus ac vehicula mattis, arcu lorem blandit nisl, non laoreet dui mi eget elit. Donec porttitor ex vel augue maximus luctus. Vivamus finibus nibh eu nunc volutpat suscipit.</p>
<div class="d-flex align-items-center">
<div class="text-lh-1dot1">
<a class="font-size-13 font-weight-bold" href="#">Hot Rumours</a>
</div>
<div>
<a href="#" class="product-comment font-weight-normal font-size-13 font-italic h-g-primary">
<span>October 6 2020</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 px-2">
<div class="product mb-3 position-relative">
<div class="position-relative">
<a class="d-block gradient-x-overlay-2" href="#">
<img class="img-fluid" src="../assets/img/640x620/img4.jpg" alt="Image-Description">
</a>
</div>
<div class="position-absolute bottom-0 mx-3 mb-3 z-index-2">
<h6 class="product-title font-secondary font-weight-semi-bold font-size-18 mb-1">
<a href="#">GTA V2 – Rumors & Facts</a>
</h6>
<p class="mb-0 line-clamp-1 font-size-1 text-white">Praesent iaculis, purus ac vehicula mattis, arcu lorem blandit nisl, non laoreet dui mi eget elit. Donec porttitor ex vel augue maximus luctus. Vivamus finibus nibh eu nunc volutpat suscipit.</p>
<div class="d-flex align-items-center">
<div class="text-lh-1dot1">
<a class="font-size-13 font-weight-bold" href="#">News</a>
</div>
<div>
<a href="#" class="product-comment font-weight-normal font-size-13 font-italic h-g-primary">
<span>September 6 2020</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Blog Post -->
</div>
</div>
</section>
<!-- End Blogs Section -->