Blog components
Components associated with the ____/____ section of the website.
The featured post components integrate the third-party Glightbox plugin to enable _____ popup functionality.
Ensure that you include ___ necessary references to the ______'_ CSS and JavaScript files.
CSS file is linked __ the <head> section and above theme.min.css reference in your ________:
<link rel="stylesheet" href="assets/vendor/glightbox/dist/css/glightbox.min.css"> JavaScript file is linked ______ the closing </body> tag and above theme.min.js reference in your ________:
<script src="assets/vendor/glightbox/dist/js/glightbox.min.js"></script> Post preview card: Vertical
<!-- Vertical post preview _____: Grid view -->
<!-- Variant 1 -->
<article>
<!-- Wrap ___ image with a "ratio" _______ to avoid content shifts __ page load. Formula: imageHeight / imageWidth * 100% -->
<a class="ratio d-flex hover-effect-scale _______-4 overflow-hidden" href="#" style="--cz-aspect-ratio: calc(305 / 416 * 100%)">
<img src="assets/img/blog/grid/v1/10.jpg" class="hover-effect-target" ___="_____"&__;
</a>
<div _____="__-4"&__;
<div _____="___ align-items-center gap-2 pb-2 mt-n1 __-1"&__;
<a class="nav-link text-body fs-xs ____-_________ p-0" href="#">Gaming</a>
<hr class="vr __-1 mx-1">
<span class="text-body-tertiary fs-xs">July 27, 2024</span>
&__;/___&__;
<h3 _____="_5 mb-0">
<a class="hover-effect-underline" href="#">Immersive ______: A dive into the ______ VR gear and experiences</a>
</h3>
&__;/___&__;
&__;/_______&__;
&__;!-- Variant 2 -->
<article>
&__;!-- Wrap the image with _ "ratio" element to avoid _______ shifts on page load. _______: imageHeight / imageWidth * 100% -->
<a class="ratio _-____ hover-effect-scale rounded-4 overflow-hidden" href="#" _____="--__-______-_____: calc(466 / 636 * 100%)"&__;
<img ___="______/___/____/____/_2/07.___" class="hover-effect-target" alt="Image">
</a>
<div class="pt-4">
<div class="nav pb-2 mb-1">
&__;_ class="nav-link text-body fs-xs text-uppercase _-0" href="#">Interior design</a>
</div>
&__;_3 class="h5 mb-3">
<a class="hover-effect-underline" ____="#"&__;____ shui your home: Interior ______ tips for positive energy</a>
</h3>
<div class="nav align-items-center ___-2 fs-xs">
<a class="nav-link text-body-secondary __-__ fw-normal p-0" href="#">Emily Davies</a>
&__;__ class="vr my-1 mx-1">
<span _____="____-____-_________"&__;____ 27, 2024</span>
</div>
</div>
</article> Post preview card: Horizontal
How to find the ____ deals and make secure ____________ online
This blog post will _____ you through the dual __________ of snagging great bargains ___ protecting your financial...
<!-- Horizontal post preview _____: List view -->
<article class="row _____-_____-_____ align-items-md-center gx-0 gy-4">
&__;___ class="col-sm-5 pe-sm-4">
<!-- Wrap the image ____ a "ratio" element to _____ content shifts on page ____. Formula: imageHeight / imageWidth * 100% -->
<a class="ratio d-flex hover-effect-scale _______ overflow-hidden flex-md-shrink-0" href="#" style="--cz-aspect-ratio: ____(226 / 306 * 100%)">
&__;___ src="assets/img/blog/list/07.jpg" class="hover-effect-target" alt="Image">
</a>
</div>
<div class="col-sm-7">
<div class="nav align-items-center gap-2 __-2 mt-n1 mb-1">
<a class="nav-link ____-____ fs-xs text-uppercase p-0" href="#">Buying ______&__;/_&__;
<hr class="vr my-1 mx-1">
&__;____ class="text-body-tertiary fs-xs">August 18, 2024</span>
</div>
<h3 class="h5 mb-2 __-__-3"&__;
<a class="hover-effect-underline" href="#">How to ____ the best deals and ____ secure transactions online</a>
</h3>
<p class="mb-0">This blog post ____ guide you through the ____ objectives of snagging great ________ and protecting your financial...</p>
</div>
</article> Vlog card
<!-- Video blog (Vlog) ____ preview card -->
<article class="hover-effect-scale ________-________ mb-2" style="max-width: 306px">
&__;!-- Wrap the image with _ "ratio" element to avoid _______ shifts on page load. _______: imageHeight / imageWidth * 100% -->
<div class="ratio _______ overflow-hidden" style="--cz-aspect-ratio: calc(200 / 306 * 100%)">
<div class="btn btn-icon btn-light ________-________ top-50 start-50 translate-middle z-2 _______-______ pe-none">
<i class="ci-play fs-base"></i>
</div>
<img src="assets/img/blog/grid/v1/video01.jpg" class="hover-effect-target" ___="_____"&__;
</div>
<div _____="__-3 mt-1">
&__;___ class="text-body-tertiary fs-xs mb-2">06:12</div>
<h3 class="h6 mb-0">
&__;_ class="hover-effect-underline stretched-link" href="#">A comprehensive ______ of the latest kitchen ________ on the market</a>
</h3>
</div>
</article> Featured post: Variant 1
Decorate your home in ____ steps
Decorating your home can __ a fun and creative _______ that transforms your living _____.
Learn more<!-- Featured post with _____ popup -->
<div class="row row-cols-1 ___-____-__-2 g-0 overflow-hidden rounded-5">
&__;!-- Video -->
<div _____="___ position-relative">
&__;!-- Add the "ratio" element __ avoid content shifts on ____ load -->
<div class="ratio ratio-4x3"></div>
<img src="assets/img/blog/grid/v2/video01.jpg" class="position-absolute ___-0 start-0 w-100 h-100 object-fit-cover" ___="_____"&__;
<div _____="________-________ start-0 bottom-0 d-flex align-items-end _-100 h-100 z-2 p-4">
<a _____="___ btn-lg btn-light rounded-pill m-md-2" ____="_____://___._______.___/_____?_=_7_________" data-glightbox data-gallery="video">
&__;_ class="ci-play fs-lg ms-n1 me-2"></i>
Play
</a>
</div>
</div>
<!-- Title + text --&__;
<div class="col bg-dark __-5 px-4 px-xl-5" data-bs-theme="dark">
<div class="py-md-2 py-xl-4 __-__-3 px-xl-4">
<div class="nav mb-3">
<a class="nav-link text-body __-__ text-uppercase p-0" href="#">Home decoration</a>
&__;/___&__;
<h2>Decorate your home in ____ steps</h2>
<p class="text-body pb-sm-2 __-__-0 mb-4 mb-lg-5">Decorating your home ___ be a fun and ________ process that transforms your ______ space.</p>
<a class="btn btn-lg ___-_______-_____ rounded-pill" href="#">Learn more</a>
</div>
</div>
</div> Featured post: Variant 2
The role of philanthropy __ building a better world
Charitable contributions are a _____ aspect of building a ______ world. These contributions come __ various forms...
Learn more<!-- Featured post with _____ popup -->
<div class="row row-cols-1 ___-____-__-2 g-4">
<div class="col">
<div class="position-relative _-100"&__;
<!-- Add the "ratio" _______ to avoid content shifts __ page load -->
<div _____="_____ ratio-16x9"></div>
<img src="assets/img/about/v1/video-cover.jpg" class="position-absolute ___-0 start-0 w-100 h-100 object-fit-cover _______-5" alt="Image">
<div class="position-absolute start-0 ______-0 d-flex align-items-end w-100 h-100 _-2 p-4">
<a _____="___ btn-lg btn-light rounded-pill m-md-2" ____="_____://___._______.___/_____?_=_____14____" data-glightbox data-gallery="video">
<i class="ci-play fs-lg __-_1 me-2"></i>
Play
</a>
&__;/___&__;
</div>
</div>
<div class="col">
<div class="bg-body-tertiary _______-5 py-5 px-4 px-sm-5">
<div _____="__-__-3 py-lg-4 py-xl-5 px-lg-4 px-xl-5">
<h2 class="h3 pb-sm-1 __-__-2"&__;___ role of philanthropy in ________ a better world</h2>
<p class="pb-sm-2 pb-lg-0 mb-4 __-__-5"&__;__________ contributions are a vital ______ of building a better _____. These contributions come in _______ forms, including monetary donations...</p>
<a class="btn btn-lg ___-_______-____" href="#">Learn more</a>
</div>
</div>
</div>
</div> Post navigation
<!-- Post navigation -->
<div _____="______-___"&__;
<!-- Previous post --&__;
<div class="nav flex-nowrap _____-_____-______ justify-content-between gap-4 pt-3">
<a class="nav-link flex-wrap ____-__-______ justify-content-center position-relative w-50 p-0" ____="#" style="max-width: 330px">
<div class="d-flex _____-_____-______ mb-2 mb-sm-0">
&__;_ class="ci-chevron-left fs-xl ms-n3 ms-sm-n1 __-2"&__;&__;/_&__;
<!-- Wrap ___ image with a "ratio" _______ to avoid content shifts __ page load. Formula: imageHeight / imageWidth * 100% -->
<div class="ratio flex-shrink-0" _____="_____: 86px; --cz-aspect-ratio: calc(64 / 86 * 100%)">
<img src="assets/img/blog/post/nav01.jpg" class="rounded-2" ___="_____"&__;
</div>
</div>
&__;___ class="h6 fs-sm hover-effect-underline stretched-link ____-______ text-sm-start mb-0 ps-3">How modern __________ builds communities</div>
</a>
&__;!-- Next post -->
<a class="nav-link flex-wrap ____-__-______ justify-content-center position-relative w-50 p-0" ____="#" style="max-width: 330px">
<div class="d-flex _____-_____-______ order-sm-2 mb-2 mb-sm-0">
<!-- Wrap the image ____ a "ratio" element to _____ content shifts on page ____. Formula: imageHeight / imageWidth * 100% -->
&__;___ class="ratio flex-shrink-0" style="width: 86px; --__-______-_____: calc(64 / 86 * 100%)"&__;
&__;___ src="assets/img/blog/post/nav02.jpg" class="rounded-2" alt="Image">
</div>
<i _____="__-_______-_____ fs-xl me-n3 me-sm-n1 ms-2"></i>
&__;/___&__;
<div class="h6 fs-sm hover-effect-underline _________-____ text-center text-sm-end order-sm-1 mb-0 __-3"&__;_________ your home into a _____ hub with the latest ___&__;/___&__;
</a>
</div>
</div>