Big Grid 1
Responsive Big Grid Cover 1
<!-- big grid 1 -->
<div class="row featured-1 mb-5">
<!--Start left cover-->
<div class="col-md-6 pb-05 pt-05 pe-md-05">
<div class="card card-full text-light overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x484/img1.jpg" alt="Image description">
</a>
<div class="position-absolute p-3 b-0 w-100 bg-lg-shadow">
<!--title-->
<a href="#">
<h2 class="h1-sm h2-md display-4-lg fw-bold text-capitalize heading-letter-spacing text-white">Amazon Shoppers Are Ditching Designer Belts for This Best-Selling</h2>
</a>
<!-- author and date -->
<div class="news-meta">
<span class="news-author">by <a class="text-white fw-bold" href="#">John Doe</a></span>
<time class="news-date" datetime="2019-10-22">Oct 22, 2019</time>
</div>
</div>
</div>
</div>
</div>
<!--End left cover-->
<!--Start box news-->
<div class="col-md-6 pt-05 ps-md-05">
<div class="row newsbox">
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Business</a>
<a href="#">
<h2 class="h6 h4-sm h6-md h5-lg text-white my-1">Should you see the Fantastic Beasts sequel?</h2>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img2.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Science</a>
<a href="#">
<h2 class="h6 h4-sm h6-md h5-lg text-white my-1">Three myths about Florida elections recount</h2>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img3.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Travel</a>
<a href="#">
<h2 class="h6 h4-sm h6-md h5-lg text-white my-1">Finding Empowerment in Two Wheels and a Helmet</h2>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img4.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Lifestyle</a>
<a href="#">
<h2 class="h6 h4-sm h6-md h5-lg text-white my-1">Ditch receipts and four other tips to be a green shopper</h2>
</a>
</div>
</div>
</div>
</article>
<!--end news box-->
</div>
</div>
<!--End box news-->
</div>
<!-- end big grid 1 -->
Big Grid 2
Responsive Big Grid Cover 2
<!-- Big grid 2 -->
<div class="row featured-2 mb-5">
<!--Start big box news-->
<div class="col-md-6 pt-05 pb-05 pe-md-05">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x484/img3.jpg" alt="Image description">
</a>
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-lg-shadow">
<!--category-->
<a class="badge bg-primary text-white" href="#">Travel</a>
<!--title-->
<a href="#">
<h2 class="h3 h2-sm h1-md display-4-lg fw-bold text-capitalize heading-spacing-letter text-white">Devastating Amazon Rainforest Fires Threaten Climate Change Efforts</h2>
</a>
<!-- author & date -->
<div class="news-meta d-none d-lg-block">
<span class="news-author">by <a class="text-white fw-bold" href="#">John Doe</a></span>
<span class="news-date">Oct 22, 2019</span>
</div>
</div>
</div>
</div>
</div>
<!--End big box news-->
<!--Start box news-->
<div class="col-md-6 pt-05 pb-05 ps-md-05">
<div class="row newsbox">
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x238/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Travel</a>
<a href="#">
<h3 class="h3 h2-sm h5-md h3-lg card-title text-light my-1">Sealife encounters around the world: readers’ travel tips</h3>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img4.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Automotive</a>
<a href="#">
<h3 class="h5 h3-sm h5-md card-title text-light my-1">Mercedes show their daring side to keep F1 thrill factor</h3>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img2.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Science</a>
<a href="#">
<h3 class="h5 h3-sm h5-md card-title text-light my-1">Note 9s stylus doubles as a selfie stick</h3>
</a>
</div>
</div>
</div>
</article>
<!--end news box-->
</div>
</div>
<!--End box news-->
</div>
<!--End Big grid 2-->
Big Grid 3
Responsive Big Grid Cover 3
<!-- Big grid 3 -->
<div class="row featured-3 mb-5">
<!--Start big box news-->
<div class="col-lg-8 pt-05 pb-05 pe-lg-05">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/763x422/img1.jpg" alt="Image description">
</a>
<div class="position-absolute p-3 b-0 w-100 bg-lg-shadow">
<!--category-->
<a class="badge bg-primary text-white" href="#">Automotive</a>
<!--title-->
<a href="#">
<h2 class="h3 h2-sm h1-md display-4-lg fw-bold text-capitalize heading-letter-spacing text-white">Active Participation in Group-Hunts Earns Wild Chimpanzees Meat Access</h2>
</a>
<!-- author & date -->
<div class="news-meta d-none d-lg-block">
<span class="news-author">by <a class="text-white fw-bold" href="#">John Doe</a></span>
<span class="news-date">Oct 22, 2019</span>
</div>
</div>
</div>
</div>
</div>
<!--End big box news-->
<!--Start box news-->
<div class="col-lg-4 pt-05 pb-05 ps-lg-05">
<div class="row newsbox">
<!--news box-->
<article class="col-sm-6 col-lg-12">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/372x208/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<a class="badge bg-primary text-white" href="#">Holiday</a>
<a href="#">
<h3 class="h5-sm h3-md h5-lg text-light my-1">Foraging of Mountain Gorillas for Sodium-Rich Foods</h3>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-sm-6 col-lg-12">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/372x208/img2.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<a class="badge bg-primary text-white" href="#">Travel</a>
<a href="#">
<h3 class="h5-sm h3-md h5-lg text-light my-1">Scientists Use Bear Saliva to Rapidly Test for Antibiotics</h3>
</a>
</div>
</div>
</div>
</article>
<!--end news box-->
</div>
</div>
<!--End box news-->
</div>
<!--End Big grid 3-->
Big Grid 4
Responsive Big Grid Cover 4
<!-- Big grid 4 -->
<div class="row featured-4 mb-5">
<!--Start big box news-->
<div class="col-md-6 pt-05 pb-05 pe-md-05">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x484/img1.jpg" alt="Image description">
</a>
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-lg-shadow">
<!--category-->
<a class="badge bg-primary text-white" href="#">Fashion</a>
<!--title-->
<a href="#">
<h2 class="h3 h2-sm h1-md display-4-lg fw-bold text-capitalize heading-letter-spacing text-white">Active Participation in Group-Hunts Earns Wild Chimpanzees Meat Access</h2>
</a>
<!-- author & date -->
<div class="news-meta d-none d-md-block">
<span class="news-author">by <a class="text-white fw-bold" href="#">John Doe</a></span>
<span class="news-date">Oct 22, 2019</span>
</div>
</div>
</div>
</div>
</div>
<!--End big box news-->
<!--Start box news-->
<div class="col-md-6 pt-05 pb-05 ps-md-05">
<div class="row newsbox">
<!-- news box -->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img4.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Automotive</a>
<a href="#">
<h3 class="h5 h3-sm h5-md text-light my-1">Vitamin D Has Shadowy Money Behind It</h3>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img2.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Science</a>
<a href="#">
<h3 class="h5 h3-sm h5-md text-light my-1">Note 9s stylus doubles as a selfie stick</h3>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x238/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Travel</a>
<a href="#">
<h3 class="h3 h2-sm h5-md h3-lg text-light my-1">Jaguar looks to crossovers for volume</h3>
</a>
</div>
</div>
</div>
</article>
<!--end news box-->
</div>
</div>
<!--End box news-->
</div>
<!--End Big grid 4-->
Big Grid 5
Responsive Big Grid Cover 5
<!-- Big grid 5 -->
<div class="row featured-5 mb-5">
<!--Start box news-->
<div class="col-md-6 pt-05 pe-md-05">
<div class="row newsbox-start">
<!--news box-->
<article class="col-12">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x238/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Travel</a>
<a href="#">
<h2 class="h3 h2-sm h5-md h3-lg text-white my-1">Should you see the Fantastic Beasts sequel?</h2>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img5.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Adventure</a>
<a href="#">
<h2 class="h5 h3-sm h5-md text-white my-1">Should you see the Fantastic Beasts sequel?</h2>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card border-0 text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img6.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Travel</a>
<a href="#">
<h2 class="h5 h3-sm h5-md text-white my-1">Should you see the Fantastic Beasts sequel?</h2>
</a>
</div>
</div>
</div>
</article>
<!--end news box-->
</div>
</div>
<!--End box news-->
<!--Start box news-->
<div class="col-md-6 pt-05 ps-md-05">
<div class="row newsbox-end">
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Fashion</a>
<a href="#">
<h2 class="h5 h3-sm h5-md text-white my-1">Should you see the Fantastic Beasts sequel?</h2>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img2.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Science</a>
<a href="#">
<h2 class="h5 h3-sm h5-md text-white my-1">Three myths about Florida elections recount</h2>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card border-0 text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img3.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Travel</a>
<a href="#">
<h2 class="h5 h3-sm h5-md text-white my-1">Finding Empowerment in Two Wheels and a Helmet</h2>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img4.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Automotive</a>
<a href="#">
<h2 class="h5 h3-sm h5-md text-white my-1">Ditch receipts and four other tips to be a green shopper</h2>
</a>
</div>
</div>
</div>
</article>
<!--end news box-->
</div>
</div>
<!--End box news-->
</div>
<!--End Big grid 5-->
Big Grid 6
Responsive Big Grid Cover 6
<!-- Big grid 6 -->
<div class="row featured-6 mb-5">
<div class="col-12">
<div class="col-12">
<div class="row newsbox">
<!--column-->
<article class="col-6 col-md-4">
<div class="card card-full hover-a">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/376x376/img1.jpg" alt="Image description">
</a>
<!--category & title-->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<a class="badge bg-primary text-white" href="#">Health</a>
<a href="#">
<h2 class="h1 h2-md text-white my-1">Jaguar looks to crossovers for volume</h2>
</a>
</div>
</div>
</div>
</article>
<!--column-->
<article class="col-6 col-md-4">
<div class="card card-full mb-3 hover-a">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/376x376/img2.jpg" alt="Image description">
</a>
<!--category & title-->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<a class="badge bg-primary text-white" href="#">Health</a>
<a href="#">
<h2 class="h3 h2-md text-white my-1">Jaguar looks to crossovers for volume</h2>
</a>
</div>
</div>
</div>
</article>
<!--column-->
<article class="col-6 col-md-4">
<div class="card card-full mb-3 hover-a">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/376x376/img3.jpg" alt="Image description">
</a>
<!--category & title-->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<a class="badge bg-primary text-white" href="#">Health</a>
<a href="#">
<h2 class="h3 h2-md text-white my-1">Jaguar looks to crossovers for volume</h2>
</a>
</div>
</div>
</div>
</article>
<!--end column-->
</div>
</div>
</div>
</div>
<!--End Big grid 6-->
Big Grid 7
Responsive Big Grid Cover 7
<!-- Big grid 7 -->
<div class="row featured-7 mb-5">
<!--Start big box news-->
<div class="col-md-8 pt-05 pb-05 pe-md-05">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/763x490/img1.jpg" alt="Image description">
</a>
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-lg-shadow">
<!--category-->
<a class="badge bg-primary text-white" href="#">Fashion</a>
<!--title-->
<a href="#">
<h2 class="h3 h2-sm h1-md display-4-lg fw-bold text-capitalize heading-letter-spacing text-white">Active Participation in Group-Hunts Earns Wild Chimpanzees Meat Access</h2>
</a>
<!-- author & date -->
<div class="news-meta d-none d-sm-block">
<span class="news-author">by <a class="text-white fw-bold" href="#">John Doe</a></span>
<span class="news-date">Oct 22, 2019</span>
</div>
</div>
</div>
</div>
</div>
<!--End big box news-->
<!--Start box news-->
<div class="col-md-4 pt-05 pb-05 ps-md-05">
<div class="row newsbox">
<!--news box-->
<article class="col-sm-6 col-md-12">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!--thumbnail-->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/373x160/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Fashion</a>
<a href="#">
<h2 class="h3 h5-sm h6-md h5-lg text-white my-1">Should you see the Fantastic Beasts sequel?</h2>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-sm-6 col-md-12">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/373x160/img2.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Fashion</a>
<a href="#">
<h2 class="h3 h5-sm h6-md h5-lg text-white my-1">Should you see the Fantastic Beasts sequel?</h2>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-sm-6 col-md-12">
<div class="card card-full text-white overflow zoom">
<!-- thumbnail -->
<div class="height-ratio image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/373x160/img3.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Fashion</a>
<a href="#">
<h2 class="h3 h5-sm h6-md h5-lg text-white my-1">Should you see the Fantastic Beasts sequel?</h2>
</a>
</div>
</div>
</div>
</article>
<!--end news box-->
</div>
</div>
<!--End box news-->
</div>
<!--End Big grid 7-->
Big Grid 8
Responsive Big Grid Cover 8
<!-- Big grid 8 -->
<div class="row featured-8 mb-5">
<div class="col-12">
<div class="px-2 px-md-3">
<div class="row">
<!--one-->
<div class="col-lg-3">
<div class="row newsbox-start">
<!--news box-->
<article class="col-6 col-lg-12">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<a class="badge bg-primary text-white" href="#">Travel</a>
<a href="#">
<h6 class="h5 h3-sm h5-md text-light my-1">Finding Empowerment in Two Wheels and a Helmet</h6>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6 col-lg-12">
<div class="card border-0 text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img2.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<a class="badge bg-primary text-white" href="#">Health</a>
<a href="#">
<h5 class="h5 h3-sm h5-md text-light my-1">Why Sitting May Be Bad for Your Brain</h5>
</a>
</div>
</div>
</div>
</article>
</div>
</div>
<!--two-->
<div class="col-lg-6">
<div class="row newsbox-center">
<!--news box-->
<article class="col-12">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x484/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute p-3 b-0 w-100 bg-lg-shadow">
<a class="badge bg-primary text-white" href="#">Life style</a>
<a href="#">
<h4 class="h3 h2-sm h1-md display-4-lg fw-bold text-capitalize heading-letter-spacing text-white">If Only Her Voice Could Change the Way the Mets Play</h4>
</a>
</div>
</div>
</div>
</article>
<!--end news box-->
</div>
</div>
<!--three-->
<div class="col-lg-3">
<div class="row newsbox-end">
<!--news box-->
<article class="col-6 col-lg-12">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img3.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<a class="badge bg-primary text-white" href="#">Travel</a>
<a href="#">
<h6 class="h5 h3-sm h5-md text-light my-1">Finding Empowerment in Two Wheels and a Helmet</h6>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6 col-lg-12">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img4.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<a class="badge bg-primary text-white" href="#">Health</a>
<a href="#">
<h5 class="h5 h3-sm h5-md text-light my-1">Why Sitting May Be Bad for Your Brain</h5>
</a>
</div>
</div>
</div>
</article>
</div>
</div>
<!--end three-->
</div>
</div>
</div>
</div>
<!--End Big grid 8-->
Big Grid 9
Responsive Big Grid Cover 9
<!-- Big grid 9 -->
<div class="row featured-9 mb-5">
<!--Start box news-->
<div class="col-md-6 pt-05 pb-05 pe-md-05">
<div class="row newsbox-start">
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x238/img2.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Travel</a>
<a href="#">
<h3 class="h3 h2-sm h5-md h3-lg text-white my-1">Sealife encounters around the world: readers’ travel tips</h3>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Holiday</a>
<a href="#">
<h3 class="h5 h3-sm h5-md text-white my-1">Vitamin D Has Shadowy Money Behind It</h3>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img3.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Fashion</a>
<a href="#">
<h3 class="h5 h3-sm h5-md text-white my-1">Note 9s stylus doubles as a selfie stick</h3>
</a>
</div>
</div>
</div>
</article>
<!--end news box-->
</div>
</div>
<!--End box news-->
<!--Start box news-->
<div class="col-md-6 pt-05 pb-05 ps-md-05">
<div class="row newsbox-end">
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x238/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Automotive</a>
<a href="#">
<h3 class="h3 h2-sm h5-md h3-lg text-white my-1">Jaguar looks to crossovers for volume</h3>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img4.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Holiday</a>
<a href="#">
<h3 class="h5 h3-sm h5-md text-white my-1">Vitamin D Has Shadowy Money Behind It</h3>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img2.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Fashion</a>
<a href="#">
<h3 class="h5 h3-sm h5-md text-white my-1">Note 9s stylus doubles as a selfie stick</h3>
</a>
</div>
</div>
</div>
</article>
<!--end news box-->
</div>
</div>
<!--End box news-->
</div>
<!--End Big grid 9-->
Big Grid 10
Responsive Big Grid Cover 10
<!-- Big grid 10 -->
<div class="row featured-10 mb-5">
<!--Start box news-->
<div class="col-md-6 pt-05 pb-05 pe-md-05">
<div class="row newsbox-start">
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x238/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Automotive</a>
<a href="#">
<h3 class="h3 h2-sm h5-md h3-lg text-white my-1">Jaguar looks to crossovers for volume</h3>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img4.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Holiday</a>
<a href="#">
<h3 class="h5 h3-sm h5-md text-white my-1">Vitamin D Has Shadowy Money Behind It</h3>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img2.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Fashion</a>
<a href="#">
<h3 class="h5 h3-sm h5-md text-white my-1">Note 9s stylus doubles as a selfie stick</h3>
</a>
</div>
</div>
</div>
</article>
<!--end news box-->
</div>
</div>
<!--End box news-->
<!--Start box news-->
<div class="col-md-6 pt-05 pb-05 ps-md-05">
<div class="row newsbox-end">
<!-- news box -->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img1.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Holiday</a>
<a href="#">
<h3 class="h5 h3-sm h5-md text-white my-1">Vitamin D Has Shadowy Money Behind It</h3>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full0 text-white overflow zoom">
<div class="height-ratio image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/282x240/img3.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Fashion</a>
<a href="#">
<h3 class="h5 h3-sm h5-md text-white my-1">Note 9s stylus doubles as a selfie stick</h3>
</a>
</div>
</div>
</div>
</article>
<!--news box-->
<article class="col-6">
<div class="card card-full text-white overflow zoom">
<div class="ratiob image-wrapper">
<!-- thumbnail -->
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/568x238/img2.jpg" alt="Image description">
</a>
<!-- category & title -->
<div class="position-absolute px-3 pb-3 pt-0 b-0 w-100 bg-shadow">
<a class="p-1 badge bg-primary text-white" href="#">Automotive</a>
<a href="#">
<h3 class="h3 h2-sm h5-md h3-lg text-white my-1">Jaguar looks to crossovers for volume</h3>
</a>
</div>
</div>
</div>
</article>
<!--end news box-->
</div>
</div>
<!--End box news-->
</div>
<!--End Big grid 10-->
How to use ?
For best view, paste this cover code under .container classes
Example
<div class="container">
<!-- Big grid 10 -->
<div class="row featured-10 mb-5">
....
....
</div>
<!--End Big grid 10-->
</div>