Blog
These sections showcase a collection of articles, insights, or updates published by the brand or individual.
Overview
"Blog" blocks are sections on websites or applications that showcase a collection of articles, insights, or updates published by the brand or individual. These blocks typically display blog titles, brief summaries, publication dates, and thumbnails, allowing users to browse and access content easily.
Some of these examples make use of Swiper.js, a mobile-friendly slider library. To include Swiper in your project, add the following CDN links to your HTML file.
JavaScript
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
CSS
<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet" />
Examples
Below are a few examples of “Blog” sections.
Example 1
Blogs
Stay informed with our latest blog posts
Development
12 Jan 2025
5 Tools Every Remote Developer Should Be Using
Boost productivity with these essential tools for remote coding.
Read more
Design
20 Feb 2025
Designing for Simplicity in a Complex World
Learn how minimal design improves usability and user experience.
Read more
Marketing
6 Jan 2025
Why Brand Storytelling Still Matters in 2025
Discover how storytelling builds trust and drives customer loyalty.
Read more
Startups
10 Mar 2025
From Idea to Launch: Building MVPs That Matter
A quick guide to launching focused, validated minimum viable products.
Read more
UI/UX
30 Mar 2025
Dark Mode Design: Aesthetic or Accessibility Choice?
Unpacking the benefits and tradeoffs of dark mode interfaces.
Read more<section class="bg-body py-5">
<div class="container">
<div class="text-center">
<h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Blogs</h1>
<h2 class="mb-4">Stay informed with our latest blog posts</h2>
</div>
<div class="swiper swiper1">
<div class="swiper-wrapper mb-5">
<div class="swiper-slide" style="height: auto;">
<div class="card border h-100 p-0">
<img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Blog Image">
<div class="card-body d-flex flex-column p-4">
<div class="d-flex align-items-center justify-content-between mb-3">
<span class="badge text-muted text-uppercase border shadow">Development</span>
<span class="text-muted small">12 Jan 2025</span>
</div>
<h5 class="card-title mb-2">5 Tools Every Remote Developer Should Be Using</h5>
<p class="text-muted mb-2">Boost productivity with these essential tools for remote coding.</p>
<a href="#" class="text-decoration-none text-primary mt-auto">Read more<i class="ri-arrow-right-line ms-2"></i></a>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card border h-100 p-0">
<img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Blog Image">
<div class="card-body d-flex flex-column p-4">
<div class="d-flex align-items-center justify-content-between mb-3">
<span class="badge text-muted text-uppercase border shadow">Design</span>
<span class="text-muted small">20 Feb 2025</span>
</div>
<h5 class="card-title mb-2">Designing for Simplicity in a Complex World</h5>
<p class="text-muted mb-2">Learn how minimal design improves usability and user experience.</p>
<a href="#" class="text-decoration-none text-primary mt-auto">Read more<i class="ri-arrow-right-line ms-2"></i></a>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card border h-100 p-0">
<img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Blog Image">
<div class="card-body d-flex flex-column p-4">
<div class="d-flex align-items-center justify-content-between mb-3">
<span class="badge text-muted text-uppercase border shadow">Marketing</span>
<span class="text-muted small">6 Jan 2025</span>
</div>
<h5 class="card-title mb-2">Why Brand Storytelling Still Matters in 2025</h5>
<p class="text-muted mb-2">Discover how storytelling builds trust and drives customer loyalty.</p>
<a href="#" class="text-decoration-none text-primary mt-auto">Read more<i class="ri-arrow-right-line ms-2"></i></a>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card border h-100 p-0">
<img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Blog Image">
<div class="card-body d-flex flex-column p-4">
<div class="d-flex align-items-center justify-content-between mb-3">
<span class="badge text-muted text-uppercase border shadow">Startups</span>
<span class="text-muted small">10 Mar 2025</span>
</div>
<h5 class="card-title mb-2">From Idea to Launch: Building MVPs That Matter</h5>
<p class="text-muted mb-2">A quick guide to launching focused, validated minimum viable products.</p>
<a href="#" class="text-decoration-none text-primary mt-auto">Read more<i class="ri-arrow-right-line ms-2"></i></a>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card border h-100 p-0">
<img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Blog Image">
<div class="card-body d-flex flex-column p-4">
<div class="d-flex align-items-center justify-content-between mb-3">
<span class="badge text-muted text-uppercase border shadow">UI/UX</span>
<span class="text-muted small">30 Mar 2025</span>
</div>
<h5 class="card-title mb-2">Dark Mode Design: Aesthetic or Accessibility Choice?</h5>
<p class="text-muted mb-2">Unpacking the benefits and tradeoffs of dark mode interfaces.</p>
<a href="#" class="text-decoration-none text-primary mt-auto">Read more<i class="ri-arrow-right-line ms-2"></i></a>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="text-center"> <h1 class="text-primary fw-semibold text-uppercase
fs-5 mb-2">Blogs</h1> <h2 class="mb-4">Stay informed with our
latest blog posts</h2> </div> <div class="swiper swiper1"> <div
class="swiper-wrapper mb-5"> <div class="swiper-slide"
style="height: auto;"> <div class="card border h-100 p-0"> <img
src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
class="card-img-top" alt="Blog Image"> <div class="card-body
d-flex flex-column p-4"> <div class="d-flex align-items-center
justify-content-between mb-3"> <span class="badge text-muted text-uppercase
border shadow">Development</span> <span class="text-muted
small">12 Jan 2025</span> </div> <h5 class="card-title
mb-2">5 Tools Every Remote Developer Should Be Using</h5> <p
class="text-muted mb-2">Boost productivity with these essential tools for remote
coding.</p> <a href="#" class="text-decoration-none text-primary
mt-auto">Read more<i class="ri-arrow-right-line
ms-2"></i></a> </div> </div> </div> <div
class="swiper-slide" style="height: auto;"> <div class="card
border h-100 p-0"> <img
src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
class="card-img-top" alt="Blog Image"> <div class="card-body
d-flex flex-column p-4"> <div class="d-flex align-items-center
justify-content-between mb-3"> <span class="badge text-muted text-uppercase
border shadow">Design</span> <span class="text-muted small">20 Feb
2025</span> </div> <h5 class="card-title mb-2">Designing for
Simplicity in a Complex World</h5> <p class="text-muted mb-2">Learn how
minimal design improves usability and user experience.</p> <a href="#"
class="text-decoration-none text-primary mt-auto">Read more<i
class="ri-arrow-right-line ms-2"></i></a> </div> </div>
</div> <div class="swiper-slide" style="height: auto;"> <div
class="card border h-100 p-0"> <img
src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
class="card-img-top" alt="Blog Image"> <div class="card-body
d-flex flex-column p-4"> <div class="d-flex align-items-center
justify-content-between mb-3"> <span class="badge text-muted text-uppercase
border shadow">Marketing</span> <span class="text-muted small">6
Jan 2025</span> </div> <h5 class="card-title mb-2">Why Brand
Storytelling Still Matters in 2025</h5> <p class="text-muted
mb-2">Discover how storytelling builds trust and drives customer loyalty.</p>
<a href="#" class="text-decoration-none text-primary mt-auto">Read
more<i class="ri-arrow-right-line ms-2"></i></a> </div>
</div> </div> <div class="swiper-slide" style="height:
auto;"> <div class="card border h-100 p-0"> <img
src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
class="card-img-top" alt="Blog Image"> <div class="card-body
d-flex flex-column p-4"> <div class="d-flex align-items-center
justify-content-between mb-3"> <span class="badge text-muted text-uppercase
border shadow">Startups</span> <span class="text-muted small">10
Mar 2025</span> </div> <h5 class="card-title mb-2">From Idea to
Launch: Building MVPs That Matter</h5> <p class="text-muted mb-2">A quick
guide to launching focused, validated minimum viable products.</p> <a
href="#" class="text-decoration-none text-primary mt-auto">Read more<i
class="ri-arrow-right-line ms-2"></i></a> </div> </div>
</div> <div class="swiper-slide" style="height: auto;"> <div
class="card border h-100 p-0"> <img
src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
class="card-img-top" alt="Blog Image"> <div class="card-body
d-flex flex-column p-4"> <div class="d-flex align-items-center
justify-content-between mb-3"> <span class="badge text-muted text-uppercase
border shadow">UI/UX</span> <span class="text-muted small">30 Mar
2025</span> </div> <h5 class="card-title mb-2">Dark Mode Design:
Aesthetic or Accessibility Choice?</h5> <p class="text-muted
mb-2">Unpacking the benefits and tradeoffs of dark mode interfaces.</p> <a
href="#" class="text-decoration-none text-primary mt-auto">Read more<i
class="ri-arrow-right-line ms-2"></i></a> </div> </div>
</div> </div> <div class="swiper-pagination"></div>
</div> </div> </section>
.swiper-pagination-bullet {
background: var(--bs-primary);
}
.swiper-pagination-bullet-active {
background: var(--bs-primary);
}
.swiper-pagination-bullet { background: var(--bs-primary); } .swiper-pagination-bullet-active {
background: var(--bs-primary); }
document.addEventListener('DOMContentLoaded', () => {
var swiper = new Swiper(".swiper1", {
slidesPerView: 1,
spaceBetween: 20,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
breakpoints: {
576: {
slidesPerView: 2,
spaceBetween: 24,
},
992: {
slidesPerView: 3,
spaceBetween: 30,
}
}
});
});
document.addEventListener('DOMContentLoaded', () => { var swiper = new
Swiper(".swiper1", { slidesPerView: 1, spaceBetween: 20, pagination: { el:
".swiper-pagination", clickable: true, }, autoplay: { delay: 3000,
disableOnInteraction: false, }, breakpoints: { 576: { slidesPerView: 2, spaceBetween: 24, },
992: { slidesPerView: 3, spaceBetween: 30, } } }); });
Example 2
Blogs
Stay informed with our latest blog posts
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet.
Development
12 Jan 2025
5 Tools Every Remote Developer Should Be Using
Boost productivity with these essential tools for remote coding.
Read more
Design
20 Feb 2025
Designing for Simplicity in a Complex World
Learn how minimal design improves usability and user experience.
Read more
Marketing
6 Jan 2025
Why Brand Storytelling Still Matters in 2025
Discover how storytelling builds trust and drives customer loyalty.
Read more
Startups
10 Mar 2025
From Idea to Launch: Building MVPs That Matter
A quick guide to launching focused, validated minimum viable products.
Read more
UI/UX
30 Mar 2025
Dark Mode Design: Aesthetic or Accessibility Choice?
Unpacking the benefits and tradeoffs of dark mode interfaces.
Read more<section class="bg-body py-5">
<div class="container">
<div class="row mb-4">
<div class="col-lg-6 mb-2 mb-lg-0">
<h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Blogs</h1>
<h2 class="mb-0">Stay informed with our latest blog posts</h2>
</div>
<div class="col-lg-6">
<p class="text-muted mb-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet.
</p>
</div>
</div>
<div class="swiper swiper2">
<div class="swiper-wrapper mb-5">
<div class="swiper-slide" style="height: auto;">
<div class="card border h-100 p-0">
<img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Blog Image">
<div class="card-body d-flex flex-column p-4">
<div class="d-flex align-items-center justify-content-between mb-3">
<span class="badge text-muted text-uppercase border shadow">Development</span>
<span class="text-muted small">12 Jan 2025</span>
</div>
<h5 class="card-title mb-2">5 Tools Every Remote Developer Should Be Using</h5>
<p class="text-muted mb-2">Boost productivity with these essential tools for remote coding.</p>
<a href="#" class="text-decoration-none text-primary mt-auto">Read more<i class="ri-arrow-right-line ms-2"></i></a>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card border h-100 p-0">
<img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Blog Image">
<div class="card-body d-flex flex-column p-4">
<div class="d-flex align-items-center justify-content-between mb-3">
<span class="badge text-muted text-uppercase border shadow">Design</span>
<span class="text-muted small">20 Feb 2025</span>
</div>
<h5 class="card-title mb-2">Designing for Simplicity in a Complex World</h5>
<p class="text-muted mb-2">Learn how minimal design improves usability and user experience.</p>
<a href="#" class="text-decoration-none text-primary mt-auto">Read more<i class="ri-arrow-right-line ms-2"></i></a>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card border h-100 p-0">
<img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Blog Image">
<div class="card-body d-flex flex-column p-4">
<div class="d-flex align-items-center justify-content-between mb-3">
<span class="badge text-muted text-uppercase border shadow">Marketing</span>
<span class="text-muted small">6 Jan 2025</span>
</div>
<h5 class="card-title mb-2">Why Brand Storytelling Still Matters in 2025</h5>
<p class="text-muted mb-2">Discover how storytelling builds trust and drives customer loyalty.</p>
<a href="#" class="text-decoration-none text-primary mt-auto">Read more<i class="ri-arrow-right-line ms-2"></i></a>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card border h-100 p-0">
<img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Blog Image">
<div class="card-body d-flex flex-column p-4">
<div class="d-flex align-items-center justify-content-between mb-3">
<span class="badge text-muted text-uppercase border shadow">Startups</span>
<span class="text-muted small">10 Mar 2025</span>
</div>
<h5 class="card-title mb-2">From Idea to Launch: Building MVPs That Matter</h5>
<p class="text-muted mb-2">A quick guide to launching focused, validated minimum viable products.</p>
<a href="#" class="text-decoration-none text-primary mt-auto">Read more<i class="ri-arrow-right-line ms-2"></i></a>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card border h-100 p-0">
<img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Blog Image">
<div class="card-body d-flex flex-column p-4">
<div class="d-flex align-items-center justify-content-between mb-3">
<span class="badge text-muted text-uppercase border shadow">UI/UX</span>
<span class="text-muted small">30 Mar 2025</span>
</div>
<h5 class="card-title mb-2">Dark Mode Design: Aesthetic or Accessibility Choice?</h5>
<p class="text-muted mb-2">Unpacking the benefits and tradeoffs of dark mode interfaces.</p>
<a href="#" class="text-decoration-none text-primary mt-auto">Read more<i class="ri-arrow-right-line ms-2"></i></a>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row mb-4"> <div class="col-lg-6 mb-2 mb-lg-0"> <h1
class="text-primary fw-semibold text-uppercase fs-5 mb-2">Blogs</h1> <h2
class="mb-0">Stay informed with our latest blog posts</h2> </div>
<div class="col-lg-6"> <p class="text-muted mb-0"> Lorem ipsum
dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos
provident nulla nemo! Quam impedit dolores vel sit amet. </p> </div> </div>
<div class="swiper swiper2"> <div class="swiper-wrapper mb-5">
<div class="swiper-slide" style="height: auto;"> <div
class="card border h-100 p-0"> <img
src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
class="card-img-top" alt="Blog Image"> <div class="card-body
d-flex flex-column p-4"> <div class="d-flex align-items-center
justify-content-between mb-3"> <span class="badge text-muted text-uppercase
border shadow">Development</span> <span class="text-muted
small">12 Jan 2025</span> </div> <h5 class="card-title
mb-2">5 Tools Every Remote Developer Should Be Using</h5> <p
class="text-muted mb-2">Boost productivity with these essential tools for remote
coding.</p> <a href="#" class="text-decoration-none text-primary
mt-auto">Read more<i class="ri-arrow-right-line
ms-2"></i></a> </div> </div> </div> <div
class="swiper-slide" style="height: auto;"> <div class="card
border h-100 p-0"> <img
src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
class="card-img-top" alt="Blog Image"> <div class="card-body
d-flex flex-column p-4"> <div class="d-flex align-items-center
justify-content-between mb-3"> <span class="badge text-muted text-uppercase
border shadow">Design</span> <span class="text-muted small">20 Feb
2025</span> </div> <h5 class="card-title mb-2">Designing for
Simplicity in a Complex World</h5> <p class="text-muted mb-2">Learn how
minimal design improves usability and user experience.</p> <a href="#"
class="text-decoration-none text-primary mt-auto">Read more<i
class="ri-arrow-right-line ms-2"></i></a> </div> </div>
</div> <div class="swiper-slide" style="height: auto;"> <div
class="card border h-100 p-0"> <img
src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
class="card-img-top" alt="Blog Image"> <div class="card-body
d-flex flex-column p-4"> <div class="d-flex align-items-center
justify-content-between mb-3"> <span class="badge text-muted text-uppercase
border shadow">Marketing</span> <span class="text-muted small">6
Jan 2025</span> </div> <h5 class="card-title mb-2">Why Brand
Storytelling Still Matters in 2025</h5> <p class="text-muted
mb-2">Discover how storytelling builds trust and drives customer loyalty.</p>
<a href="#" class="text-decoration-none text-primary mt-auto">Read
more<i class="ri-arrow-right-line ms-2"></i></a> </div>
</div> </div> <div class="swiper-slide" style="height:
auto;"> <div class="card border h-100 p-0"> <img
src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
class="card-img-top" alt="Blog Image"> <div class="card-body
d-flex flex-column p-4"> <div class="d-flex align-items-center
justify-content-between mb-3"> <span class="badge text-muted text-uppercase
border shadow">Startups</span> <span class="text-muted small">10
Mar 2025</span> </div> <h5 class="card-title mb-2">From Idea to
Launch: Building MVPs That Matter</h5> <p class="text-muted mb-2">A quick
guide to launching focused, validated minimum viable products.</p> <a
href="#" class="text-decoration-none text-primary mt-auto">Read more<i
class="ri-arrow-right-line ms-2"></i></a> </div> </div>
</div> <div class="swiper-slide" style="height: auto;"> <div
class="card border h-100 p-0"> <img
src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
class="card-img-top" alt="Blog Image"> <div class="card-body
d-flex flex-column p-4"> <div class="d-flex align-items-center
justify-content-between mb-3"> <span class="badge text-muted text-uppercase
border shadow">UI/UX</span> <span class="text-muted small">30 Mar
2025</span> </div> <h5 class="card-title mb-2">Dark Mode Design:
Aesthetic or Accessibility Choice?</h5> <p class="text-muted
mb-2">Unpacking the benefits and tradeoffs of dark mode interfaces.</p> <a
href="#" class="text-decoration-none text-primary mt-auto">Read more<i
class="ri-arrow-right-line ms-2"></i></a> </div> </div>
</div> </div> <div class="swiper-pagination"></div>
</div> </div> </section>
.swiper-pagination-bullet {
background: var(--bs-primary);
}
.swiper-pagination-bullet-active {
background: var(--bs-primary);
}
.swiper-pagination-bullet { background: var(--bs-primary); } .swiper-pagination-bullet-active {
background: var(--bs-primary); }
document.addEventListener('DOMContentLoaded', () => {
var swiper = new Swiper(".swiper2", {
slidesPerView: 1,
spaceBetween: 20,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
breakpoints: {
576: {
slidesPerView: 2,
spaceBetween: 24,
},
992: {
slidesPerView: 3,
spaceBetween: 30,
}
}
});
});
document.addEventListener('DOMContentLoaded', () => { var swiper = new
Swiper(".swiper2", { slidesPerView: 1, spaceBetween: 20, pagination: { el:
".swiper-pagination", clickable: true, }, autoplay: { delay: 3000,
disableOnInteraction: false, }, breakpoints: { 576: { slidesPerView: 2, spaceBetween: 24, },
992: { slidesPerView: 3, spaceBetween: 30, } } }); });
Example 3
Blogs
Stay informed with our latest blog posts
Design
20 Feb 2025
Designing for Simplicity in a Complex World
Learn how minimal design improves usability and user experience.
Read more
Development
12 Jan 2025
5 Tools Every Remote Developer Should Be Using
Boost productivity with these essential tools for remote coding.
Read more
Marketing
6 Jan 2025
Why Brand Storytelling Still Matters in 2025
Discover how storytelling builds trust and drives customer loyalty.
Read more
Startups
10 Mar 2025
From Idea to Launch: Building MVPs That Matter
A quick guide to launching focused, validated minimum viable products.
Read more
UI/UX
30 Mar 2025
Dark Mode Design: Aesthetic or Accessibility Choice?
Unpacking the benefits and tradeoffs of dark mode interfaces.
Read more<section class="bg-body py-5">
<div class="container">
<div class="text-center text-md-start">
<h1 class="text-primary text-uppercase fw-semibold fs-5 mb-2">Blogs</h1>
<h2 class="mb-4">Stay informed with our latest blog posts</h2>
</div>
<div class="swiper swiper3">
<div class="swiper-wrapper mb-5">
<div class="swiper-slide" style="height: auto;">
<div class="card text-light shadow border-0 position-relative overflow-hidden h-100 p-0">
<img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="w-100 h-100 object-fit-cover position-absolute top-0 start-0" alt="Blog Image">
<div class="card-body position-relative p-4" style="z-index: 2; background: rgba(0, 0, 0, 0.5);">
<div class="d-flex align-items-center justify-content-between mb-3">
<span class="badge bg-secondary text-muted text-uppercase">Design</span>
<span class="small">20 Feb 2025</span>
</div>
<h5 class="h4 mb-2">Designing for Simplicity in a Complex World</h5>
<p class="mb-2">Learn how minimal design improves usability and user experience.</p>
<a href="#" class="link-light">Read more <i class="ri-arrow-right-line"></i></a>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card text-light shadow border-0 position-relative overflow-hidden h-100 p-0">
<img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="w-100 h-100 object-fit-cover position-absolute top-0 start-0" alt="Blog Image">
<div class="card-body position-relative p-4" style="z-index: 2; background: rgba(0, 0, 0, 0.5);">
<div class="d-flex align-items-center justify-content-between mb-3">
<span class="badge bg-secondary text-muted text-uppercase">Development</span>
<span class="small">12 Jan 2025</span>
</div>
<h5 class="h4 mb-2">5 Tools Every Remote Developer Should Be Using</h5>
<p class="mb-2">Boost productivity with these essential tools for remote coding.</p>
<a href="#" class="link-light">Read more <i class="ri-arrow-right-line"></i></a>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card text-light shadow border-0 position-relative overflow-hidden h-100 p-0">
<img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="w-100 h-100 object-fit-cover position-absolute top-0 start-0" alt="Blog Image">
<div class="card-body position-relative p-4" style="z-index: 2; background: rgba(0, 0, 0, 0.5);">
<div class="d-flex align-items-center justify-content-between mb-3">
<span class="badge bg-secondary text-muted text-uppercase">Marketing</span>
<span class="small">6 Jan 2025</span>
</div>
<h5 class="h4 mb-2">Why Brand Storytelling Still Matters in 2025</h5>
<p class="mb-2">Discover how storytelling builds trust and drives customer loyalty.</p>
<a href="#" class="link-light">Read more <i class="ri-arrow-right-line"></i></a>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card text-light shadow border-0 position-relative overflow-hidden h-100 p-0">
<img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="w-100 h-100 object-fit-cover position-absolute top-0 start-0" alt="Blog Image">
<div class="card-body position-relative p-4" style="z-index: 2; background: rgba(0, 0, 0, 0.5);">
<div class="d-flex align-items-center justify-content-between mb-3">
<span class="badge bg-secondary text-muted text-uppercase">Startups</span>
<span class="small">10 Mar 2025</span>
</div>
<h5 class="h4 mb-2">From Idea to Launch: Building MVPs That Matter</h5>
<p class="mb-2">A quick guide to launching focused, validated minimum viable products.</p>
<a href="#" class="link-light">Read more <i class="ri-arrow-right-line"></i></a>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card text-light shadow border-0 position-relative overflow-hidden h-100 p-0">
<img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="w-100 h-100 object-fit-cover position-absolute top-0 start-0" alt="Blog Image">
<div class="card-body position-relative p-4" style="z-index: 2; background: rgba(0, 0, 0, 0.5);">
<div class="d-flex align-items-center justify-content-between mb-3">
<span class="badge bg-secondary text-muted text-uppercase">UI/UX</span>
<span class="small">30 Mar 2025</span>
</div>
<h5 class="h4 mb-2">Dark Mode Design: Aesthetic or Accessibility Choice?</h5>
<p class="mb-2">Unpacking the benefits and tradeoffs of dark mode interfaces.</p>
<a href="#" class="link-light">Read more <i class="ri-arrow-right-line"></i></a>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="text-center mt-2">
<button class="btn btn-outline-secondary">Check all blogs<i class="ri-arrow-right-line ms-2"></i></button>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="text-center text-md-start"> <h1 class="text-primary text-uppercase
fw-semibold fs-5 mb-2">Blogs</h1> <h2 class="mb-4">Stay informed
with our latest blog posts</h2> </div> <div class="swiper swiper3">
<div class="swiper-wrapper mb-5"> <div class="swiper-slide"
style="height: auto;"> <div class="card text-light shadow border-0
position-relative overflow-hidden h-100 p-0"> <img
src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="w-100 h-100
object-fit-cover position-absolute top-0 start-0" alt="Blog Image"> <div
class="card-body position-relative p-4" style="z-index: 2; background: rgba(0, 0,
0, 0.5);"> <div class="d-flex align-items-center justify-content-between
mb-3"> <span class="badge bg-secondary text-muted
text-uppercase">Design</span> <span class="small">20 Feb
2025</span> </div> <h5 class="h4 mb-2">Designing for Simplicity in a
Complex World</h5> <p class="mb-2">Learn how minimal design improves
usability and user experience.</p> <a href="#"
class="link-light">Read more <i
class="ri-arrow-right-line"></i></a> </div> </div>
</div> <div class="swiper-slide" style="height: auto;"> <div
class="card text-light shadow border-0 position-relative overflow-hidden h-100
p-0"> <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
class="w-100 h-100 object-fit-cover position-absolute top-0 start-0" alt="Blog
Image"> <div class="card-body position-relative p-4" style="z-index:
2; background: rgba(0, 0, 0, 0.5);"> <div class="d-flex align-items-center
justify-content-between mb-3"> <span class="badge bg-secondary text-muted
text-uppercase">Development</span> <span class="small">12 Jan
2025</span> </div> <h5 class="h4 mb-2">5 Tools Every Remote
Developer Should Be Using</h5> <p class="mb-2">Boost productivity with
these essential tools for remote coding.</p> <a href="#"
class="link-light">Read more <i
class="ri-arrow-right-line"></i></a> </div> </div>
</div> <div class="swiper-slide" style="height: auto;"> <div
class="card text-light shadow border-0 position-relative overflow-hidden h-100
p-0"> <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
class="w-100 h-100 object-fit-cover position-absolute top-0 start-0" alt="Blog
Image"> <div class="card-body position-relative p-4" style="z-index:
2; background: rgba(0, 0, 0, 0.5);"> <div class="d-flex align-items-center
justify-content-between mb-3"> <span class="badge bg-secondary text-muted
text-uppercase">Marketing</span> <span class="small">6 Jan
2025</span> </div> <h5 class="h4 mb-2">Why Brand Storytelling Still
Matters in 2025</h5> <p class="mb-2">Discover how storytelling builds
trust and drives customer loyalty.</p> <a href="#"
class="link-light">Read more <i
class="ri-arrow-right-line"></i></a> </div> </div>
</div> <div class="swiper-slide" style="height: auto;"> <div
class="card text-light shadow border-0 position-relative overflow-hidden h-100
p-0"> <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
class="w-100 h-100 object-fit-cover position-absolute top-0 start-0" alt="Blog
Image"> <div class="card-body position-relative p-4" style="z-index:
2; background: rgba(0, 0, 0, 0.5);"> <div class="d-flex align-items-center
justify-content-between mb-3"> <span class="badge bg-secondary text-muted
text-uppercase">Startups</span> <span class="small">10 Mar
2025</span> </div> <h5 class="h4 mb-2">From Idea to Launch: Building
MVPs That Matter</h5> <p class="mb-2">A quick guide to launching focused,
validated minimum viable products.</p> <a href="#"
class="link-light">Read more <i
class="ri-arrow-right-line"></i></a> </div> </div>
</div> <div class="swiper-slide" style="height: auto;"> <div
class="card text-light shadow border-0 position-relative overflow-hidden h-100
p-0"> <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
class="w-100 h-100 object-fit-cover position-absolute top-0 start-0" alt="Blog
Image"> <div class="card-body position-relative p-4" style="z-index:
2; background: rgba(0, 0, 0, 0.5);"> <div class="d-flex align-items-center
justify-content-between mb-3"> <span class="badge bg-secondary text-muted
text-uppercase">UI/UX</span> <span class="small">30 Mar
2025</span> </div> <h5 class="h4 mb-2">Dark Mode Design: Aesthetic
or Accessibility Choice?</h5> <p class="mb-2">Unpacking the benefits and
tradeoffs of dark mode interfaces.</p> <a href="#"
class="link-light">Read more <i
class="ri-arrow-right-line"></i></a> </div> </div>
</div> </div> <div class="swiper-pagination"></div>
</div> <div class="text-center mt-2"> <button class="btn
btn-outline-secondary">Check all blogs<i class="ri-arrow-right-line
ms-2"></i></button> </div> </div> </section>
.swiper-pagination-bullet {
background: var(--bs-primary);
}
.swiper-pagination-bullet-active {
background: var(--bs-primary);
}
.swiper-pagination-bullet { background: var(--bs-primary); } .swiper-pagination-bullet-active {
background: var(--bs-primary); }
document.addEventListener('DOMContentLoaded', () => {
var swiper = new Swiper(".swiper3", {
slidesPerView: 1,
spaceBetween: 20,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
breakpoints: {
768: {
slidesPerView: 2,
spaceBetween: 24,
},
992: {
slidesPerView: 3,
spaceBetween: 30,
}
}
});
});
document.addEventListener('DOMContentLoaded', () => { var swiper = new
Swiper(".swiper3", { slidesPerView: 1, spaceBetween: 20, pagination: { el:
".swiper-pagination", clickable: true, }, autoplay: { delay: 3000,
disableOnInteraction: false, }, breakpoints: { 768: { slidesPerView: 2, spaceBetween: 24, },
992: { slidesPerView: 3, spaceBetween: 30, } } }); });
Example 4
Blogs
Stay informed with our latest blog posts
Development
12 Jan 2025
5 Tools Every Remote Developer Should Be Using
Boost productivity with these essential tools for remote coding.
Read moreEditor's Picks
Design
20 Feb 2025
Designing for Simplicity in a Complex World
Learn how minimal design improves usability and user experience.
Read more
Marketing
6 Jan 2025
Why Brand Storytelling Still Matters in 2025
Discover how storytelling builds trust and drives customer loyalty.
Read more
Startups
10 Mar 2025
From Idea to Launch: Building MVPs That Matter
A quick guide to launching focused, validated minimum viable products.
Read more<section class="bg-body py-5">
<div class="container">
<div class="text-center text-lg-start">
<h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Blogs</h1>
<h2 class="mb-4">Stay informed with our latest blog posts</h2>
</div>
<div class="row">
<div class="col-lg-7 mb-4 mb-lg-0">
<div class="card bg-secondary shadow border-0 p-0">
<img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top object-fit-cover" style="max-height: 480px;" alt="Blog Image">
<div class="card-body p-3">
<div class="d-flex align-items-center justify-content-between mb-2">
<span class="badge text-muted text-uppercase border shadow">Development</span>
<span class="text-muted">12 Jan 2025</span>
</div>
<h5 class="h4 mb-2"><a href="#" class="text-decoration-none">5 Tools Every Remote Developer Should Be Using</a></h5>
<p class="text-muted mb-2">Boost productivity with these essential tools for remote coding.</p>
<a href="#" class="text-decoration-none link-primary">Read more<i class="ri-arrow-right-line ms-2"></i></a>
</div>
</div>
</div>
<div class="col-lg-5">
<h5 class="mb-2"><i class="ri-star-fill text-primary fs-5 me-2"></i>Editor's Picks</h5>
<div class="card bg-secondary shadow border-0 p-0 mb-3">
<div class="card-body p-3">
<div class="d-flex align-items-center justify-content-between mb-2">
<span class="badge text-muted text-uppercase border shadow">Design</span>
<span class="text-muted">20 Feb 2025</span>
</div>
<h5 class="card-title mb-2"><a href="#" class="text-decoration-none">Designing for Simplicity in a Complex World</a></h5>
<p class="text-muted mb-2">Learn how minimal design improves usability and user experience.</p>
<a href="#" class="text-decoration-none link-primary">Read more<i class="ri-arrow-right-line ms-2"></i></a>
</div>
</div>
<div class="card bg-secondary shadow border-0 p-0 mb-3">
<div class="card-body p-3">
<div class="d-flex align-items-center justify-content-between mb-2">
<span class="badge text-muted text-uppercase border shadow">Marketing</span>
<span class="text-muted">6 Jan 2025</span>
</div>
<h5 class="card-title mb-2"><a href="#" class="text-decoration-none">Why Brand Storytelling Still Matters in 2025</a></h5>
<p class="text-muted mb-2">Discover how storytelling builds trust and drives customer loyalty.</p>
<a href="#" class="text-decoration-none link-primary">Read more<i class="ri-arrow-right-line ms-2"></i></a>
</div>
</div>
<div class="card bg-secondary shadow border-0 p-0 mb-3">
<div class="card-body p-3">
<div class="d-flex align-items-center justify-content-between mb-2">
<span class="badge text-muted text-uppercase border shadow">Startups</span>
<span class="text-muted">10 Mar 2025</span>
</div>
<h5 class="card-title mb-2">From Idea to Launch: Building MVPs That Matter</h5>
<p class="text-muted mb-2">A quick guide to launching focused, validated minimum viable products.</p>
<a href="#" class="text-decoration-none link-primary">Read more<i class="ri-arrow-right-line ms-2"></i></a>
</div>
</div>
<div class="text-center text-md-end">
<button class="btn btn-outline-secondary">Check all blogs<i class="ri-arrow-right-line ms-2"></i></button>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="text-center text-lg-start"> <h1 class="text-primary fw-semibold
text-uppercase fs-5 mb-2">Blogs</h1> <h2 class="mb-4">Stay
informed with our latest blog posts</h2> </div> <div class="row">
<div class="col-lg-7 mb-4 mb-lg-0"> <div class="card bg-secondary shadow
border-0 p-0"> <img
src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
class="card-img-top object-fit-cover" style="max-height: 480px;"
alt="Blog Image"> <div class="card-body p-3"> <div
class="d-flex align-items-center justify-content-between mb-2"> <span
class="badge text-muted text-uppercase border shadow">Development</span>
<span class="text-muted">12 Jan 2025</span> </div> <h5
class="h4 mb-2"><a href="#"
class="text-decoration-none">5 Tools Every Remote Developer Should Be
Using</a></h5> <p class="text-muted mb-2">Boost productivity with
these essential tools for remote coding.</p> <a href="#"
class="text-decoration-none link-primary">Read more<i
class="ri-arrow-right-line ms-2"></i></a> </div> </div>
</div> <div class="col-lg-5"> <h5 class="mb-2"><i
class="ri-star-fill text-primary fs-5 me-2"></i>Editor's Picks</h5>
<div class="card bg-secondary shadow border-0 p-0 mb-3"> <div
class="card-body p-3"> <div class="d-flex align-items-center
justify-content-between mb-2"> <span class="badge text-muted text-uppercase
border shadow">Design</span> <span class="text-muted">20 Feb
2025</span> </div> <h5 class="card-title mb-2"><a
href="#" class="text-decoration-none">Designing for Simplicity in a
Complex World</a></h5> <p class="text-muted mb-2">Learn how minimal
design improves usability and user experience.</p> <a href="#"
class="text-decoration-none link-primary">Read more<i
class="ri-arrow-right-line ms-2"></i></a> </div> </div>
<div class="card bg-secondary shadow border-0 p-0 mb-3"> <div
class="card-body p-3"> <div class="d-flex align-items-center
justify-content-between mb-2"> <span class="badge text-muted text-uppercase
border shadow">Marketing</span> <span class="text-muted">6 Jan
2025</span> </div> <h5 class="card-title mb-2"><a
href="#" class="text-decoration-none">Why Brand Storytelling Still
Matters in 2025</a></h5> <p class="text-muted mb-2">Discover how
storytelling builds trust and drives customer loyalty.</p> <a href="#"
class="text-decoration-none link-primary">Read more<i
class="ri-arrow-right-line ms-2"></i></a> </div> </div>
<div class="card bg-secondary shadow border-0 p-0 mb-3"> <div
class="card-body p-3"> <div class="d-flex align-items-center
justify-content-between mb-2"> <span class="badge text-muted text-uppercase
border shadow">Startups</span> <span class="text-muted">10 Mar
2025</span> </div> <h5 class="card-title mb-2">From Idea to Launch:
Building MVPs That Matter</h5> <p class="text-muted mb-2">A quick guide to
launching focused, validated minimum viable products.</p> <a href="#"
class="text-decoration-none link-primary">Read more<i
class="ri-arrow-right-line ms-2"></i></a> </div> </div>
<div class="text-center text-md-end"> <button class="btn
btn-outline-secondary">Check all blogs<i class="ri-arrow-right-line
ms-2"></i></button> </div> </div> </div> </div>
</section>
ESC