Blog component - 9
COPY
<section class="py-5">
<div class="container">
<div class="row justify-content-center text-center pb-3 mb-3">
<div class="col-xl-6 col-lg-7 col-md-9">
<h2 class="h1 mb-lg-4 text-primary">Our Recent Post</h2>
<p class="mb-0 fs-6">Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
aliquid ex ea commodi consequatur?.</p>
</div>
</div>
<div class="row g-5">
<div class="col-lg-4">
<div class="d-block ">
<div class="mb-4">
<a href="#">
<img src="/html-component/images/nature/lake-green-mountains-peaceful.jpg" alt="Image" class="img-fluid">
</a>
</div>
<div class="content">
<div class="mb-1">
<a href="#" class="text-decoration-none">Business</a>,
<a href="#" class="text-decoration-none">Travel</a> —
<span class="date text-black-50">July 2, 2020</span>
</div>
<h4 class="fs-4 mb-3">
<a href="#" class="text-decoration-none text-black">Your most unhappy customers are
your greatest source of learning.</a>
</h4>
<p class="text-dark-emphasis">Far far away, behind the word mountains, far from the countries Vokalia and
Consonantia, there live the blind texts.</p>
<a href="#" class="post-author d-flex align-items-center text-decoration-none">
<div class="me-3" style="flex: 0 0 45px;">
<img src="/html-component/images/avatar/m3.jpg" alt="Image" width="50" class="rounded-pill border">
</div>
<div class="text-black">
<strong class="text-primary">Sergy Campbell</strong><br>
<span>CEO and Founder</span>
</div>
</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class=" d-block ">
<div class="mb-4">
<a href="#">
<img src="/html-component/images/nature/trient-incontournables.jpg" alt="Image" class="img-fluid">
</a>
</div>
<div class="content">
<div class="mb-1">
<a href="#" class="text-decoration-none">Business</a>,
<a href="#" class="text-decoration-none">Travel</a> —
<span class="date text-black-50">July 2, 2020</span>
</div>
<h4 class="fs-4 mb-3">
<a href="#" class="text-decoration-none text-black">Your most unhappy customers are
your greatest source of learning.</a>
</h4>
<p class="text-danger-emphasis">Far far away, behind the word mountains, far from the countries Vokalia
and Consonantia, there live the blind texts.</p>
<a href="#" class="post-author d-flex align-items-center text-decoration-none">
<div class="me-3" style="flex: 0 0 45px;">
<img src="/html-component/images/avatar/m1.jpg" alt="Image" width="50" class="rounded-pill border">
</div>
<div class="text-black">
<strong class="text-primary">Sergy Campbell</strong><br>
<span>CEO and Founder</span>
</div>
</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class=" d-block ">
<div class="mb-4">
<a href="#">
<img src="/html-component/images/nature/woods-trees.jpg" alt="Image" class="img-fluid">
</a>
</div>
<div class="content">
<div class="mb-1">
<a href="#" class="text-decoration-none">Business</a>, <a href="#" class="text-decoration-none">Travel</a> —
<span class="date text-black-50">July 2, 2020</span>
</div>
<h4 class="fs-4 mb-3">
<a href="#" class="text-decoration-none text-black">Your most unhappy customers are your greatest source
of learning.</a>
</h4>
<p class="text-danger-emphasis">Far far away, behind the word mountains, far from the countries Vokalia
and Consonantia, there live the
blind texts.</p>
<a href="#" class="post-author d-flex align-items-center text-decoration-none">
<div class="me-3" style="flex: 0 0 45px;">
<img src="/html-component/images/avatar/m5.jpg" alt="Image" width="50" class="rounded-pill border">
</div>
<div class="text-black">
<strong class="text-primary">Sergy Campbell</strong><br>
<span>CEO and Founder</span>
</div>
</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class=" d-block ">
<div class="mb-4">
<a href="#">
<img src="/html-component/images/nature/south1.jpg" alt="Image" class="img-fluid">
</a>
</div>
<div class="content">
<div class="mb-1">
<a href="#" class="text-decoration-none">Business</a>,
<a href="#" class="text-decoration-none">Travel</a> —
<span class="date text-black-50">July 2, 2020</span>
</div>
<h4 class="fs-4 mb-3">
<a href="#" class="text-decoration-none text-black">Your most unhappy customers are
your greatest source of learning.</a>
</h4>
<p class="text-danger-emphasis">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the
blind texts.</p>
<a href="#" class="post-author d-flex align-items-center text-decoration-none">
<div class="me-3" style="flex: 0 0 45px;">
<img src="/html-component/images/avatar/m4.jpg" alt="Image" width="50" class="rounded-pill border">
</div>
<div class="text-black">
<strong class="text-primary">Sergy Campbell</strong><br>
<span>CEO and Founder</span>
</div>
</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class=" d-block ">
<div class="mb-4">
<a href="#">
<img src="/html-component/images/nature/cascade-pissevache.jpg" alt="Image" class="img-fluid">
</a>
</div>
<div class="content">
<div class="mb-1">
<a href="#" class="text-decoration-none">Business</a>,
<a href="#" class="text-decoration-none">Travel</a> —
<span class="date text-black-50">July 2, 2020</span>
</div>
<h4 class="fs-4 mb-3">
<a href="#" class="text-decoration-none text-black">Your most unhappy customers are
your greatest source of learning.</a>
</h4>
<p class="text-danger-emphasis">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the
blind texts.</p>
<a href="#" class="post-author d-flex align-items-center text-decoration-none">
<div class="me-3" style="flex: 0 0 45px;">
<img src="/html-component/images/avatar/m5.jpg" alt="Image" width="50" class="rounded-pill border">
</div>
<div class="text-black">
<strong class="text-primary">Sergy Campbell</strong><br>
<span>CEO and Founder</span>
</div>
</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class=" d-block ">
<div class="mb-4">
<a href="#">
<img src="/html-component/images/nature/lake-green-mountains-peaceful.jpg" alt="Image" class="img-fluid">
</a>
</div>
<div class="content">
<div class="mb-1">
<a href="#" class="text-decoration-none">Business</a>,
<a href="#" class="text-decoration-none">Travel</a> —
<span class="date text-black-50">July 2, 2020</span>
</div>
<h4 class="fs-4 mb-3">
<a href="#" class="text-decoration-none text-black">Your most unhappy customers are
your greatest source of learning.</a>
</h4>
<p class="text-danger-emphasis">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the
blind texts.</p>
<a href="#" class="post-author d-flex align-items-center text-decoration-none">
<div class="me-3" style="flex: 0 0 45px;">
<img src="/html-component/images/avatar/m2.jpg" alt="Image" width="50" class="rounded-pill border">
</div>
<div class="text-black">
<strong class="text-primary">Sergy Campbell</strong><br>
<span>CEO and Founder</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-green: #00992e;
--bs-black: #000000;
--bs-primary: var(--bs-green);
--bs-secondary: var(--bs-black);
--bs-text-primary: var(--bs-green);
--bs-text-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .9rem;
}
a {
color: var(--bs-primary);
}
.fs-xs {
font-size: 0.75rem !important;
}
.text-primary {
color: var(--bs-text-primary) !important;
}
Blog page - 8
COPY
<section class="py-5 px-0 blog">
<div class="container">
<div class="row">
<div class="col-md-7 me-auto">
<h6 class="mb-1 text-uppercase text-primary fs-xs">Home improvement</h6>
<h1 class="display-5 fw-medium mt-0">Digital strategy & reporting: inspiration for new goals</h1>
<div class="py-3 mb-4 fw-bold">
<a class="nav-link d-inline-block me-4 p-0 text-black-50 fs-xs" href="#">
<i class="bi bi-calendar3 me-2"></i>Dec 4
</a>
<a class="nav-link d-inline-block me-3 p-0 text-black-50 fs-xs" href="#">
<i class="bi bi-chat me-2"></i>2
</a>
<a class="nav-link d-inline-block me-3 p-0 text-black-50 fs-xs" href="#">
<i class="bi bi-share me-2"></i>12
</a>
</div>
<p>Ut pellentesque bibendum dignissim a molestie. Ultrices diam ut vel neque tincidunt eget. Sed ut quis sit
semper nunc at etiam lacinia. Quam laoreet eget id sapien a pharetra, ornare diam dignissim. Lorem amet
nisl, enim mi aenean mauris. Porta nisl a ultrices ut libero id. Gravida a mi neque, tristique justo, et
pharetra. Laoreet nulla est nulla cras ac arcu sed mattis tristique. Morbi convallis suspendisse enim
blandit massa. Cursus augue dui mattis morbi velit.</p>
<h4 class="mt-5">Dolor laoreet fermentum lectus praesent aenean </h4>
<p>Proin non congue sem, sed tristique ante. Donec et sollicitudin tellus. Duis maximus, dui eget egestas
mattis, purus ex tempor nulla, quis tempor sapien neque at nisl. Aliquam eu nisi ut nisl ultrices posuere.
Praesent dignissim efficitur nisi, a hendrerit ipsum elementum sit amet. Vivamus non ante nisl. Nunc
faucibus velit at eros mollis semper. Curabitur aliquam eros tellus, nec facilisis nisl finibus sit amet. Ut
et dolor nec lorem gravida elementum.</p>
</div>
<div class="col-3">
<img src="/html-component/images/nature/road-in-jangol.jpg" alt="Image" class="img-fluid rounded-3 mb-5">
<h3>Share this post: </h3>
<div class="mt-n3 ms-n3 mb-lg-5 mb-4 pb-3 pb-lg-0">
<a class="btn btn-outline-secondary btn-icon btn-instagram rounded-circle mt-3 me-3" href="#">
<i class="bi bi-instagram"></i></a>
<a class="btn btn-outline-secondary btn-icon btn-facebook rounded-circle mt-3 me-3" href="#">
<i class="bi bi-facebook"></i></a>
<a class="btn btn-outline-secondary btn-icon btn-telegram rounded-circle mt-3 me-3" href="#">
<i class="bi bi-telegram"></i></a>
<a class="btn btn-outline-secondary btn-icon btn-twitter rounded-circle mt-3 me-3" href="#">
<i class="bi bi-twitter"></i></a>
</div>
<h3>Relevant topics: </h3>
<div class="d-flex flex-wrap mt-n3 ms-n3 mb-lg-5 mb-4 pb-3 pb-lg-0">
<a class="btn btn-outline-secondary rounded-pill mt-2 me-2" href="#">Nature</a>
<a class="btn btn-outline-secondary rounded-pill mt-2 me-2" href="#">Inspiration</a>
<a class="btn btn-outline-secondary rounded-pill mt-2 me-2" href="#">Travel</a>
<a class="btn btn-outline-secondary rounded-pill mt-2 me-2" href="#">Psychology</a>
<a class="btn btn-outline-secondary rounded-pill mt-2 me-2" href="#">Technology</a>
</div>
</div>
</div>
<div class="my-3">
<img src="/html-component/images/nature/dreem-evening-3.jpg" alt="Image" class="img-fluid">
<p class="small text-muted ms-3">Image source: https://unsplash.com</p>
</div>
<div class="container my-5">
<div class="row">
<div class="col-md-8 me-auto">
<p>Dolor laoreet fermentum lectus praesent aenean molestie mollis integer. Sem ullamcorper montes, lorem
ullamcorper orci, pellentesque ipsum malesuada gravida. Donec imperdiet nulla suscipit in. Dignissim
ornare
ac lorem consectetur massa a. Pellentesque urna pharetra, quis maecenas. Sit dolor amet nulla aenean eu,
ac.
Nisl mi tempus, iaculis viverra vestibulum scelerisque imperdiet montes. Mauris massa elit pretium
elementum
eget tortor quis. Semper interdum lectus odio diam.</p>
<p>Ut pellentesque bibendum dignissim a molestie. Ultrices diam ut vel neque tincidunt eget. Sed ut quis sit
semper nunc at etiam lacinia. Quam laoreet eget id sapien a pharetra, ornare diam dignissim. Lorem amet
nisl, enim mi aenean mauris. Porta nisl a ultrices ut libero id. Gravida a mi neque, tristique justo, et
pharetra. Laoreet nulla est nulla cras ac arcu sed mattis tristique. Morbi convallis suspendisse enim
blandit massa. Cursus augue dui mattis morbi velit.</p>
<h4 class="mt-5">Dolor laoreet fermentum lectus praesent aenean </h4>
<p>Proin non congue sem, sed tristique ante. Donec et sollicitudin tellus. Duis maximus, dui eget egestas
mattis, purus ex tempor nulla, quis tempor sapien neque at nisl. Aliquam eu nisi ut nisl ultrices posuere.
Praesent dignissim efficitur nisi, a hendrerit ipsum elementum sit amet. Vivamus non ante nisl. Nunc
faucibus velit at eros mollis semper. Curabitur aliquam eros tellus, nec facilisis nisl finibus sit amet.
Ut
et dolor nec lorem gravida elementum.</p>
<div class="my-4">
<img src="/html-component/images/nature/neom-Wh-2.jpg" alt="Image" class="img-fluid rounded-3">
<p class="small text-muted ms-3">Image source: https://unsplash.com</p>
</div>
<div class="card border-0 bg-light p-4 mb-3">
<div class="card-body">
<figure>
<blockquote class="blockquote">
<p>Ut pellentesque bibendum dignissim a molestie ultrices diam ut vel neque tincidunt eget sed ut
quis sit semper nunc at etiam lacinia quam laoreet eget id sapien a pharetra, ornare diam
dignissim neque tincidunt.</p>
</blockquote>
<figcaption class="blockquote-footer mt-3"><i>Darlene Robertson</i></figcaption>
</figure>
</div>
</div>
</div>
<div class="col-md-3">
<div class="position-relative mb-5">
<i class="bi bi-search position-absolute sr-icon"></i>
<input type="search" class="py-2 ps-4-5 input-search form-control rounded-5">
</div>
<h3>Categories:</h3>
<ul class="nav flex-column mb-lg-5 mb-4">
<li class="mb-2"><a class="nav-link d-flex p-0 active" href="#">All categories<span class="fs-sm text-muted ms-2">(110)</span></a></li>
<li class="mb-2"><a class="nav-link d-flex p-0" href="#">Inspiration<span class="fs-sm text-muted ms-2">(34)</span></a></li>
<li class="mb-2"><a class="nav-link d-flex p-0" href="#">Brand strategy<span class="fs-sm text-muted ms-2">(8)</span></a></li>
<li class="mb-2"><a class="nav-link d-flex p-0" href="#">Advertisement<span class="fs-sm text-muted ms-2">(45)</span></a></li>
<li class="mb-2"><a class="nav-link d-flex p-0" href="#">Ecommerce<span class="fs-sm text-muted ms-2">(17)</span></a></li>
<li><a class="nav-link d-flex p-0" href="#">Travel & Vacation<span class="fs-sm text-muted ms-2">(6)</span></a></li>
</ul>
<h3>Trending posts:</h3>
<div class="mb-lg-5 mb-4">
<article class="position-relative d-flex align-items-center mb-4">
<img class="rounded" src="/html-component/images/nature/south1.jpg" width="92" alt="Post image">
<div class="ps-3">
<h4 class="h6 mb-2"><a class="stretched-link" href="#">Instagram trends that will
definitely work</a></h4>
<span class="fs-sm text-muted">13 hours ago</span>
</div>
</article>
<article class="position-relative d-flex align-items-center mb-4">
<img class="rounded" src="/html-component/images/nature/lake-green-mountains-peaceful.jpg" width="92" alt="Post image">
<div class="ps-3">
<h4 class="h6 mb-2"><a class="stretched-link" href="#">A session with a
psychologist</a></h4>
<span class="fs-sm text-muted">May 12, 2022</span>
</div>
</article>
<article class="position-relative d-flex align-items-center">
<img class="rounded" src="/html-component/images/nature/woods-trees.jpg" width="92" alt="Post image">
<div class="ps-3">
<h4 class="h6 mb-2"><a class="stretched-link" href="#">How to look for inspiration
for new goals</a></h4>
<span class="fs-sm text-muted">June 10, 2022</span>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #1264ff;
--bs-primary-dark: #0248ca;
--bs-primary-rgb: 18, 100, 255;
--bs-secondary: #1c1a28;
--bs-secondary-rgb: 28, 26, 40;
}
body {
font-family: 'Inter', sans-serif;
font-size: .9rem;
}
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
.blog a {
text-decoration: none !important;
}
.blog .fs-xs {
font-size: 0.75rem !important;
}
.blog .text-light-stroke {
color: transparent !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #c7c7c7;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.blockquote {
position: relative;
}
.sr-icon {
top: 10px;
left: 18px;
opacity: .5;
}
.ps-4-5 {
padding-left: 45px;
}
Blog page - 7
COPY
<section class="py-5">
<div class="container">
<div class="row pb-3 mb-3">
<div class="col-md-12">
<h2 class="h1 text-primary">Our Recent Post</h2>
<p class="mb-0 fs-6">Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
aliquid ex ea commodi consequatur?.</p>
</div>
</div>
<section class="px-0 blog">
<div class="container my-5">
<div class="row">
<div class="col-md-8 me-auto">
<div class="row g-4">
<article class="col-lg-4">
<div class="d-block ">
<div class="mb-4">
<a href="#">
<img src="/html-component/images/nature/lake-green-mountains-peaceful.jpg" alt="Image" class="img-fluid">
</a>
</div>
<div class="content">
<div class="mb-1">
<a href="#" class="text-decoration-none">Business</a>,
<a href="#" class="text-decoration-none">Travel</a> —
<span class="date text-black-50">July 2, 2020</span>
</div>
<h4 class="fs-4 mb-3">
<a href="#" class="text-decoration-none text-black">Unhappy customers are
your greatest source of learning.</a>
</h4>
<p class="text-dark-emphasis">Far far away, behind the word mountains, far from the countries
Vokalia and
Consonantia, there live the blind texts.</p>
<a href="#" class="post-author d-flex align-items-center text-decoration-none">
<div class="me-3" style="flex: 0 0 45px;">
<img src="/html-component/images/avatar/m3.jpg" alt="Image" width="50" class="rounded-pill border">
</div>
<div class="text-black">
<strong class="text-primary">Sergy Campbell</strong><br>
<span>CEO and Founder</span>
</div>
</a>
</div>
</div>
</article>
<article class="col-lg-4">
<div class=" d-block ">
<div class="mb-4">
<a href="#">
<img src="/html-component/images/nature/trient-incontournables.jpg" alt="Image" class="img-fluid">
</a>
</div>
<div class="content">
<div class="mb-1">
<a href="#" class="text-decoration-none">Business</a>,
<a href="#" class="text-decoration-none">Travel</a> —
<span class="date text-black-50">July 2, 2020</span>
</div>
<h4 class="fs-4 mb-3">
<a href="#" class="text-decoration-none text-black">Unhappy customers are
your greatest source of learning.</a>
</h4>
<p class="text-danger-emphasis">Far far away, behind the word mountains, far from the countries
Vokalia
and Consonantia, there live the blind texts.</p>
<a href="#" class="post-author d-flex align-items-center text-decoration-none">
<div class="me-3" style="flex: 0 0 45px;">
<img src="/html-component/images/avatar/m1.jpg" alt="Image" width="50" class="rounded-pill border">
</div>
<div class="text-black">
<strong class="text-primary">Sergy Campbell</strong><br>
<span>CEO and Founder</span>
</div>
</a>
</div>
</div>
</article>
<article class="col-lg-4">
<div class=" d-block ">
<div class="mb-4">
<a href="#">
<img src="/html-component/images/nature/woods-trees.jpg" alt="Image" class="img-fluid">
</a>
</div>
<div class="content">
<div class="mb-1">
<a href="#" class="text-decoration-none">Business</a>, <a href="#" class="text-decoration-none">Travel</a> —
<span class="date text-black-50">July 2, 2020</span>
</div>
<h4 class="fs-4 mb-3">
<a href="#" class="text-decoration-none text-black">Unhappy customers are your
greatest source
of learning.</a>
</h4>
<p class="text-danger-emphasis">Far far away, behind the word mountains, far from the countries
Vokalia
and Consonantia, there live the
blind texts.</p>
<a href="#" class="post-author d-flex align-items-center text-decoration-none">
<div class="me-3" style="flex: 0 0 45px;">
<img src="/html-component/images/avatar/m5.jpg" alt="Image" width="50" class="rounded-pill border">
</div>
<div class="text-black">
<strong class="text-primary">Sergy Campbell</strong><br>
<span>CEO and Founder</span>
</div>
</a>
</div>
</div>
</article>
<article class="col-lg-4">
<div class=" d-block ">
<div class="mb-4">
<a href="#">
<img src="/html-component/images/nature/south1.jpg" alt="Image" class="img-fluid">
</a>
</div>
<div class="content">
<div class="mb-1">
<a href="#" class="text-decoration-none">Business</a>,
<a href="#" class="text-decoration-none">Travel</a> —
<span class="date text-black-50">July 2, 2020</span>
</div>
<h4 class="fs-4 mb-3">
<a href="#" class="text-decoration-none text-black">Unhappy customers are
your greatest source of learning.</a>
</h4>
<p class="text-danger-emphasis">Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia, there live the
blind texts.</p>
<a href="#" class="post-author d-flex align-items-center text-decoration-none">
<div class="me-3" style="flex: 0 0 45px;">
<img src="/html-component/images/avatar/m4.jpg" alt="Image" width="50" class="rounded-pill border">
</div>
<div class="text-black">
<strong class="text-primary">Sergy Campbell</strong><br>
<span>CEO and Founder</span>
</div>
</a>
</div>
</div>
</article>
<article class="col-lg-4">
<div class=" d-block ">
<div class="mb-4">
<a href="#">
<img src="/html-component/images/nature/cascade-pissevache.jpg" alt="Image" class="img-fluid">
</a>
</div>
<div class="content">
<div class="mb-1">
<a href="#" class="text-decoration-none">Business</a>,
<a href="#" class="text-decoration-none">Travel</a> —
<span class="date text-black-50">July 2, 2020</span>
</div>
<h4 class="fs-4 mb-3">
<a href="#" class="text-decoration-none text-black">Unhappy customers are
your greatest source of learning.</a>
</h4>
<p class="text-danger-emphasis">Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia, there live the
blind texts.</p>
<a href="#" class="post-author d-flex align-items-center text-decoration-none">
<div class="me-3" style="flex: 0 0 45px;">
<img src="/html-component/images/avatar/m5.jpg" alt="Image" width="50" class="rounded-pill border">
</div>
<div class="text-black">
<strong class="text-primary">Sergy Campbell</strong><br>
<span>CEO and Founder</span>
</div>
</a>
</div>
</div>
</article>
<article class="col-lg-4">
<div class=" d-block ">
<div class="mb-4">
<a href="#">
<img src="/html-component/images/nature/lake-green-mountains-peaceful.jpg" alt="Image" class="img-fluid">
</a>
</div>
<div class="content">
<div class="mb-1">
<a href="#" class="text-decoration-none">Business</a>,
<a href="#" class="text-decoration-none">Travel</a> —
<span class="date text-black-50">July 2, 2020</span>
</div>
<h4 class="fs-4 mb-3">
<a href="#" class="text-decoration-none text-black">Unhappy customers are
your greatest source of learning.</a>
</h4>
<p class="text-danger-emphasis">Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia, there live the
blind texts.</p>
<a href="#" class="post-author d-flex align-items-center text-decoration-none">
<div class="me-3" style="flex: 0 0 45px;">
<img src="/html-component/images/avatar/m2.jpg" alt="Image" width="50" class="rounded-pill border">
</div>
<div class="text-black">
<strong class="text-primary">Sergy Campbell</strong><br>
<span>CEO and Founder</span>
</div>
</a>
</div>
</div>
</article>
</div>
</div>
<div class="col-md-3">
<div class="position-relative mb-5">
<i class="bi bi-search position-absolute sr-icon"></i>
<input type="search" class="py-2 ps-4-5 input-search form-control rounded-5">
</div>
<h3>Categories:</h3>
<ul class="nav flex-column mb-lg-5 mb-4">
<li class="mb-2"><a class="nav-link d-flex p-0 active" href="#">All categories<span class="fs-sm text-muted ms-2">(110)</span></a></li>
<li class="mb-2"><a class="nav-link d-flex p-0" href="#">Inspiration<span class="fs-sm text-muted ms-2">(34)</span></a></li>
<li class="mb-2"><a class="nav-link d-flex p-0" href="#">Brand strategy<span class="fs-sm text-muted ms-2">(8)</span></a></li>
<li class="mb-2"><a class="nav-link d-flex p-0" href="#">Advertisement<span class="fs-sm text-muted ms-2">(45)</span></a></li>
<li class="mb-2"><a class="nav-link d-flex p-0" href="#">Ecommerce<span class="fs-sm text-muted ms-2">(17)</span></a></li>
<li><a class="nav-link d-flex p-0" href="#">Travel & Vacation<span class="fs-sm text-muted ms-2">(6)</span></a></li>
</ul>
<h3>Trending posts:</h3>
<div class="mb-lg-5 mb-4">
<article class="position-relative d-flex align-items-center mb-4">
<img class="rounded" src="/html-component/images/nature/south1.jpg" width="92" alt="Post image">
<div class="ps-3">
<h4 class="h6 mb-2"><a class="stretched-link" href="#">Instagram trends that will
definitely work</a></h4>
<span class="fs-sm text-muted">13 hours ago</span>
</div>
</article>
<article class="position-relative d-flex align-items-center mb-4">
<img class="rounded" src="/html-component/images/nature/lake-green-mountains-peaceful.jpg" width="92" alt="Post image">
<div class="ps-3">
<h4 class="h6 mb-2"><a class="stretched-link" href="#">A session with a
psychologist</a></h4>
<span class="fs-sm text-muted">May 12, 2022</span>
</div>
</article>
<article class="position-relative d-flex align-items-center">
<img class="rounded" src="/html-component/images/nature/woods-trees.jpg" width="92" alt="Post image">
<div class="ps-3">
<h4 class="h6 mb-2"><a class="stretched-link" href="#">How to look for inspiration
for new goals</a></h4>
<span class="fs-sm text-muted">June 10, 2022</span>
</div>
</article>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #1264ff;
--bs-primary-dark: #0248ca;
--bs-primary-rgb: 18, 100, 255;
--bs-secondary: #1c1a28;
--bs-secondary-rgb: 28, 26, 40;
}
body {
font-family: 'Inter', sans-serif;
font-size: .9rem;
}
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
.blog a {
text-decoration: none !important;
--bs-text-opacity: 1;
color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
}
.blog a:hover {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
.sr-icon {
top: 10px;
left: 18px;
opacity: .5;
}
.ps-4-5 {
padding-left: 45px;
}
Blog component - 6
COPY
<section class="blog">
<div class="container my-5">
<div class="row mb-4 align-content-center align-items-center">
<div class="col-md-8 me-auto">
<h2 class="h1 fw-semibold">Our Recent Post</h2>
<p class="mb-0 fs-6">Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
aliquid ex ea commodi consequatur?.</p>
</div>
<div class="col-md-3">
<div class="position-relative mb-3">
<i class="bi bi-search position-absolute sr-icon"></i>
<input type="search" class="ps-4-5 input-search form-control rounded-5">
</div>
</div>
</div>
<div class="row">
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-011s.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="d-flex flex-column p-0">
<div class="mt-auto card-text p-3 py-4">
<h4 class="fs-5 text-white text-truncate">Sed do eiusmod tempor..</h4>
<p class="small text-white mb-0 opacity-75">What hasn't been a great fit in
e-mobility until now. What hasn't been a great fit in
e-mobility until now.</p>
</div>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-022s.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="d-flex flex-column p-0">
<div class="mt-auto card-text p-3 py-4">
<h4 class="fs-5 text-white text-truncate">Occaecat cupidatat non</h4>
<p class="small text-white mb-0 opacity-75">What hasn't been a great fit in
e-mobility until now. What hasn't been a great fit in
e-mobility until now.</p>
</div>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-044s.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="d-flex flex-column p-0">
<div class="mt-auto card-text p-3 py-4">
<h4 class="fs-5 text-white text-truncate">The missing link</h4>
<p class="small text-white mb-0 opacity-75">What hasn't been a great fit in
e-mobility until now. What hasn't been a great fit in
e-mobility until now.</p>
</div>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-011s.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="d-flex flex-column p-0">
<div class="mt-auto card-text p-3 py-4">
<h4 class="fs-5 text-white text-truncate">Lorem ipsum dolor</h4>
<p class="small text-white mb-0 opacity-75">What hasn't been a great fit in
e-mobility until now. What hasn't been a great fit in
e-mobility until now.</p>
</div>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-033s.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="d-flex flex-column p-0">
<div class="mt-auto card-text p-3 py-4">
<h4 class="fs-5 text-white text-truncate">Aliquip ex ea commod</h4>
<p class="small text-white mb-0 opacity-75">What hasn't been a great fit in
e-mobility until now. What hasn't been a great fit in
e-mobility until now.</p>
</div>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-011s.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="d-flex flex-column p-0">
<div class="mt-auto card-text p-3 py-4">
<h4 class="fs-5 text-white text-truncate">Sed do incididunt</h4>
<p class="small text-white mb-0 opacity-75">What hasn't been a great fit in
e-mobility until now. What hasn't been a great fit in
e-mobility until now.</p>
</div>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-022s.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="d-flex flex-column p-0">
<div class="mt-auto card-text p-3 py-4">
<h4 class="fs-5 text-white text-truncate">Excepteur sint occaecat </h4>
<p class="small text-white mb-0 opacity-75">What hasn't been a great fit in
e-mobility until now. What hasn't been a great fit in
e-mobility until now.</p>
</div>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-033s.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="d-flex flex-column p-0">
<div class="mt-auto card-text p-3 py-4 py-4">
<h4 class="fs-5 text-white text-truncate">Aliquip ex ea commodo</h4>
<p class="small text-white mb-0 opacity-75">What hasn't been a great fit in
e-mobility until now. What hasn't been a great fit in
e-mobility until now.</p>
</div>
</div>
</a>
</div>
</div><!-- row END -->
<!-- Load more START -->
<div class="row">
<div class="col-12">
<div class="text-center mt-5">
<button type="button" class="btn btn-light px-4">Load more! <i class="bi bi-arrow-clockwise ms-2"></i></button>
</div>
</div>
</div>
<!-- Load more END -->
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
svg {
fill: #fff;
opacity: .5;
}
.card-metro {
overflow: hidden;
background: #000000;
height: 100%;
}
.card-metro:hover .card-image img {
-webkit-transform: scale(1.08);
transform: scale(1.08);
}
.card-metro img {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.card-metro:hover .card-text {
margin-bottom: 10px;
}
.card-metro .card-text {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background: #000000a6;
}
.card-metro .card-text:last-child {
margin-bottom: 0;
}
.sr-icon {
top: 10px;
left: 18px;
opacity: .5;
}
.ps-4-5 {
padding-left: 45px;
}
Comment component - 5
COPY
<section class="p-3 p-md-5">
<div class="row">
<div class="col-12">
<h5 class="mb-4">Comment</h5>
<div class="d-flex mb-4">
<div class="avatar avatar-sm flex-shrink-0 me-2">
<a href="#"> <img class="avatar-img rounded-circle" width="40" src="/html-component/images/avatar/m3.jpg" alt=""> </a>
</div>
<form class="w-100 d-flex">
<textarea class="one form-control pe-4 bg-light" id="autoheighttextarea" rows="1" placeholder="Add a comment..." spellcheck="false"></textarea>
<button class="btn btn-primary ms-2 mb-0" type="button">Post</button>
</form>
</div>
<div class="border p-2 p-sm-4 rounded-3 mb-4">
<ul class="list-unstyled mb-0">
<li class="comment-item">
<div class="d-flex mb-3">
<div class="avatar avatar-sm flex-shrink-0">
<a href="#">
<img class="avatar-img rounded-circle" width="40" src="/html-component/images/avatar/m1.jpg" alt="">
</a>
</div>
<div class="ms-2 flex-fill">
<div class="bg-light p-3 rounded">
<div class="d-flex w-100">
<div class="me-2 flex-fill">
<h6 class="mb-1 lead fw-bold"> <a href="#!"> Frances Guerrero </a></h6>
<p class="mb-0">Removed demands expense account in outward tedious
do. Particular way thoroughly unaffected projection?</p>
</div>
<small class="fs-8 text-muted">5hr</small>
</div>
</div>
<ul class="nav py-2">
<li class="nav-item"> <a class="fs-8 text-muted me-3" href="#"> Like (13)</a> </li>
<li class="nav-item"> <a class="fs-8 text-muted me-3" href="#"> Reply (5)</a> </li>
<li class="nav-item"> <a class="fs-8 text-muted" href="#"> View 5 replies</a>
</li>
</ul>
</div>
</div>
<ul class="list-unstyled ms-4">
<li class="comment-item">
<div class="d-flex">
<div class="avatar avatar-xs flex-shrink-0">
<a href="#">
<img class="avatar-img rounded-circle" width="40" src="/html-component/images/avatar/m2.jpg" alt="">
</a>
</div>
<div class="ms-2 flex-fill">
<div class="bg-light p-3 rounded">
<div class="d-flex w-100">
<div class="me-2 flex-fill">
<h6 class="mb-1 lead fw-bold">
<a href="#"> Lori Stevens </a>
</h6>
<p class="mb-0">See resolved goodness felicity shy civility
domestic had but Drawings offended yet answered Jennings
perceive. Domestic had but Drawings offended yet answered
Jennings perceive.</p>
</div>
<small class="fs-8 text-muted">2hr</small>
</div>
</div>
<ul class="nav py-2">
<li class="nav-item"><a class="fs-8 text-muted me-3" href="#!">Like (1)</a></li>
<li class="nav-item"><a class="fs-8 text-muted" href="#!"> Reply(1)</a></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<div class="border p-2 p-sm-4 rounded-3">
<ul class="list-unstyled mb-0">
<li class="comment-item">
<div class="d-flex">
<div class="avatar avatar-sm flex-shrink-0">
<a href="#">
<img class="avatar-img rounded-circle" width="40" src="/html-component/images/avatar/m4.jpg" alt="">
</a>
</div>
<div class="ms-2 flex-fill">
<div class="bg-light p-3 rounded">
<div class="d-flex w-100">
<div class="me-2 flex-fill">
<h6 class="mb-1 lead fw-bold"><a href="#!"> Louis Ferguson </a></h6>
<p class="mb-0">Removed demands expense account in outward tedious
do. Particular way thoroughly unaffected projection?</p>
</div>
<small class="fs-8 text-muted">5hr</small>
</div>
</div>
<ul class="nav py-2">
<li class="nav-item"> <a class="fs-8 text-muted me-3" href="#"> Like</a> </li>
<li class="nav-item"> <a class="fs-8 text-muted" href="#"> Reply</a> </li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
body {
font-size: .85rem;
}
a {
color: #333;
text-decoration: none;
}
.fs-7 {
font-size: .95rem;
}
.fs-8 {
font-size: .90rem;
}
Blog component - 4
COPY
<section class="blog">
<div class="container my-5">
<div class="row">
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-011.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="card-img-overlay d-flex flex-column">
<img class="w-50" src="/html-component/images/logo/google-logo.svg" alt="">
<div class="mt-auto card-text">
<h4 class="text-white text-truncate">Sed do eiusmod tempor incididunt</h4>
<p class="small text-white mb-0 text-truncate">Quis nostrud exercitation ullamco laboris
nisi ut aliquip</p>
</div>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-022.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="card-img-overlay d-flex flex-column">
<img class="w-50" src="/html-component/images/logo/ev-logo.svg" alt="">
<div class="mt-auto card-text">
<h4 class="text-white text-truncate">Excepteur sint occaecat cupidatat non proident</h4>
<p class="small text-white mb-0 text-truncate">Duis aute irure dolor in reprehenderit in
voluptate</p>
</div>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-044.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="card-img-overlay d-flex flex-column">
<img class="w-50" src="/html-component/images/logo/ms-logo.svg" alt="">
<div class="mt-auto card-text">
<h4 class="text-white text-truncate">The missing link in e-Mobility</h4>
<p class="small text-white mb-0 text-truncate">What hasn't been a great fit in
e-mobility until now.</p>
</div>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-011.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="card-img-overlay d-flex flex-column">
<img class="w-50" src="/html-component/images/logo/ev-logo.svg" alt="">
<div class="mt-auto card-text">
<h4 class="text-white text-truncate">Lorem ipsum dolor sit amet</h4>
<p class="small text-white mb-0 text-truncate">Sed ut perspiciatis unde omnis iste natus
error.</p>
</div>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-033.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="card-img-overlay d-flex flex-column">
<img class="w-50" src="/html-component/images/logo/ms-logo.svg" alt="">
<div class="mt-auto card-text">
<h4 class="text-white text-truncate">Aliquip ex ea commodo consequat</h4>
<p class="small text-white mb-0 text-truncate">What hasn't been a great fit in
e-mobility until now.</p>
</div>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-011.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="card-img-overlay d-flex flex-column">
<img class="w-50" src="/html-component/images/logo/google-logo.svg" alt="">
<div class="mt-auto card-text">
<h4 class="text-white text-truncate">Sed do eiusmod tempor incididunt</h4>
<p class="small text-white mb-0 text-truncate">Quis nostrud exercitation ullamco laboris
nisi ut aliquip</p>
</div>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-022.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="card-img-overlay d-flex flex-column">
<img class="w-50" src="/html-component/images/logo/ev-logo.svg" alt="">
<div class="mt-auto card-text">
<h4 class="text-white text-truncate">Excepteur sint occaecat cupidatat non proident</h4>
<p class="small text-white mb-0 text-truncate">Duis aute irure dolor in reprehenderit in
voluptate</p>
</div>
</div>
</a>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<a href="#" class="card card-metro rounded-0">
<!-- Card Image -->
<div class="card-image">
<img src="/html-component/images/portrait/portrait-033.jpg" class="img-fluid" alt="card image">
</div>
<!-- Card Overlay -->
<div class="card-img-overlay d-flex flex-column">
<img class="w-50" src="/html-component/images/logo/ms-logo.svg" alt="">
<div class="mt-auto card-text">
<h4 class="text-white text-truncate">Aliquip ex ea commodo consequat</h4>
<p class="small text-white mb-0 text-truncate">What hasn't been a great fit in
e-mobility until now.</p>
</div>
</div>
</a>
</div>
</div><!-- row END -->
<!-- Load more START -->
<div class="row">
<div class="col-12">
<div class="text-center mt-5">
<button type="button" class="btn btn-light px-4">Load more! <i class="bi bi-arrow-clockwise ms-2"></i></button>
</div>
</div>
</div>
<!-- Load more END -->
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
body {
font-size: .9rem;
}
svg {
fill: #fff;
opacity: .5;
}
.card-metro {
overflow: hidden;
background: #000;
height: 100%;
}
.card-image img {
opacity: .3;
}
.card-metro:hover .card-image img {
-webkit-transform: scale(1.08);
transform: scale(1.08);
opacity: 1;
}
.card-metro img {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.card-metro:hover .card-text {
margin-bottom: 10px;
}
.card-metro .card-text {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.card-metro .card-text:last-child {
margin-bottom: 0;
}
.card-metro img.w-50 {
width: 100px !important;
}
Blog component - 3
COPY
<section class="py-5 px-3 blog">
<div class="row">
<div class="col-md-12">
<!-- Service item -->
<div class="d-flex mb-5">
<h2 class="display-2 fa-fw fw-bolder text-end text-light-stroke">01</h2>
<div class="ms-3 ms-md-4">
<h6 class="mb-1 text-uppercase text-success fs-xs">Home improvement</h6>
<h4 class="fs-5 mt-0">Digital Strategy & Reporting</h4>
<p class="mb-2 text-dark text-opacity-75">Go he prisoners And mountains in just switching city steps Might
rung line what Mr Bulk; Was or between towards</p>
<div>
<a class="nav-link d-inline-block me-4 p-0 text-black-50 fs-xs" href="#">
<i class="bi bi-calendar3 me-2"></i>Dec 4
</a>
<a class="nav-link d-inline-block me-3 p-0 text-black-50 fs-xs" href="#">
<i class="bi bi-chat me-2"></i>2
</a>
</div>
</div>
</div>
<!-- Service item -->
<div class="d-flex mb-5">
<h2 class="display-2 fa-fw fw-bolder text-end text-light-stroke">02</h2>
<div class="ms-3 ms-md-4">
<h6 class="mb-1 text-uppercase text-success fs-xs">TIPS & ADVICE</h6>
<h4 class="fs-5 mt-0">Content Marketing</h4>
<p class="mb-0 text-dark text-opacity-75">It was the remember a although lead in were through serving their
assistant fame day have for its after would</p>
<div>
<a class="nav-link d-inline-block me-4 p-0 text-black-50 fs-xs" href="#">
<i class="bi bi-calendar3 me-2"></i>Dec 4
</a>
<a class="nav-link d-inline-block me-3 p-0 text-black-50 fs-xs" href="#">
<i class="bi bi-chat me-2"></i>8
</a>
</div>
</div>
</div>
<!-- Service item -->
<div class="d-flex">
<h2 class="display-2 fa-fw fw-bolder text-end text-light-stroke">03</h2>
<div class="ms-3 ms-md-4">
<h6 class="mb-1 text-uppercase text-success fs-xs">Home improvement</h6>
<h4 class="fs-5 mt-0">Web Development</h4>
<p class="mb-0 text-dark text-opacity-75">Cheek dull have what in go feedback assignment Her of a any help
if the a of semantics is rational overhauls</p>
<div>
<a class="nav-link d-inline-block me-4 p-0 text-black-50 fs-xs" href="#">
<i class="bi bi-calendar3 me-2"></i>Dec 4
</a>
<a class="nav-link d-inline-block me-3 p-0 text-black-50 fs-xs" href="#">
<i class="bi bi-chat me-2"></i>9
</a>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
:root {
--bs-green: #00992e;
--bs-black: #000000;
--bs-primary: var(--bs-green);
--bs-secondary: var(--bs-black);
--bs-text-primary: var(--bs-green);
--bs-text-secondary: var(--bs-black);
}
body {
font-size: .9rem;
}
.blog a {
text-decoration: none !important;
}
.blog .fs-xs {
font-size: 0.75rem !important;
}
.blog .text-light-stroke {
color: transparent !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #c7c7c7;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
Blog page - 2
COPY
<section class="py-5 px-0 blog">
<div class="container my-5">
<div class="row">
<div class="col-md-8 me-auto">
<div class="h-100 w-100 bg-light">
</div>
</div>
<div class="col-md-3">
<div class="position-relative mb-5">
<i class="bi bi-search position-absolute sr-icon"></i>
<input type="search" class="py-2 ps-4-5 input-search form-control rounded-5">
</div>
<h3>Categories:</h3>
<ul class="nav flex-column mb-lg-5 mb-4">
<li class="mb-2"><a class="nav-link d-flex p-0 active" href="#">All categories<span class="fs-sm text-muted ms-2">(110)</span></a></li>
<li class="mb-2"><a class="nav-link d-flex p-0" href="#">Inspiration<span class="fs-sm text-muted ms-2">(34)</span></a></li>
<li class="mb-2"><a class="nav-link d-flex p-0" href="#">Brand strategy<span class="fs-sm text-muted ms-2">(8)</span></a></li>
<li class="mb-2"><a class="nav-link d-flex p-0" href="#">Advertisement<span class="fs-sm text-muted ms-2">(45)</span></a></li>
<li class="mb-2"><a class="nav-link d-flex p-0" href="#">Ecommerce<span class="fs-sm text-muted ms-2">(17)</span></a></li>
<li><a class="nav-link d-flex p-0" href="#">Travel & Vacation<span class="fs-sm text-muted ms-2">(6)</span></a></li>
</ul>
<h3>Trending posts:</h3>
<div class="mb-lg-5 mb-4">
<article class="position-relative d-flex align-items-center mb-4">
<img class="rounded" src="/html-component/images/nature/south1.jpg" width="92" alt="Post image">
<div class="ps-3">
<h4 class="h6 mb-2"><a class="stretched-link" href="#">Instagram trends that will
definitely work</a></h4>
<span class="fs-sm text-muted">13 hours ago</span>
</div>
</article>
<article class="position-relative d-flex align-items-center mb-4">
<img class="rounded" src="/html-component/images/nature/lake-green-mountains-peaceful.jpg" width="92" alt="Post image">
<div class="ps-3">
<h4 class="h6 mb-2"><a class="stretched-link" href="#">A session with a
psychologist</a></h4>
<span class="fs-sm text-muted">May 12, 2022</span>
</div>
</article>
<article class="position-relative d-flex align-items-center">
<img class="rounded" src="/html-component/images/nature/woods-trees.jpg" width="92" alt="Post image">
<div class="ps-3">
<h4 class="h6 mb-2"><a class="stretched-link" href="#">How to look for inspiration
for new goals</a></h4>
<span class="fs-sm text-muted">June 10, 2022</span>
</div>
</article>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
:root {
--bs-primary: #1264ff;
--bs-primary-dark: #0248ca;
--bs-primary-rgb: 18, 100, 255;
--bs-secondary: #1c1a28;
--bs-secondary-rgb: 28, 26, 40;
}
body {
font-family: 'Inter', sans-serif;
font-size: .9rem;
}
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
.blog a {
text-decoration: none !important;
--bs-text-opacity: 1;
color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
}
.blog a:hover {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
.sr-icon {
top: 10px;
left: 18px;
opacity: .5;
}
.ps-4-5 {
padding-left: 45px;
}
Blog component - 1
COPY
<section class="py-5 px-5 blog">
<div class="row">
<div class="col-12">
<h4 class="h5">Recent Posts</h4>
<article class="d-flex align-items-start">
<a class="d-none d-sm-block flex-shrink-0 me-sm-4 mb-sm-0 mb-3" href="#">
<img class="" src="/html-component/images/blog/house-thumb-01.jpg" width="100" alt="Blog post"></a>
<div>
<h6 class="mb-1 text-uppercase text-primary fs-xs">Home improvement</h6>
<h5 class="mb-2"><a class="nav-link" href="#">Your Guide to a Smart Apartment Searching</a></h5>
<p class="mb-2 fs-sm">Mi justo, varius vitae cursus ipsum sem massa amet pellentesque. Ipsum enim sit nulla
ridiculus semper nam...</p>
<a class="nav-link d-inline-block me-4 p-0 text-black-50 fs-xs" href="#">
<i class="bi bi-calendar3 me-2"></i>Dec 4
</a>
<a class="nav-link d-inline-block me-3 p-0 text-black-50 fs-xs" href="#">
<i class="bi bi-chat me-2"></i>2 comments
</a>
</div>
</article>
<hr class="text-dark opacity-10 my-4">
<article class="d-flex align-items-start">
<a class="d-none d-sm-block flex-shrink-0 me-sm-4 mb-sm-0 mb-3" href="#">
<img class="" src="/html-component/images/blog/house-thumb-02.jpg" width="100" alt="Blog post"></a>
<div>
<h6 class="mb-1 text-uppercase text-primary fs-xs">Tips & advice</h6>
<h5 class="mb-2"><a class="nav-link" href="#">Top 10 Ways to Refresh Your Space</a></h5>
<p class="mb-2 fs-sm">Volutpat, orci, vitae arcu feugiat vestibulum ultricies nisi, aenean eget. Vitae enim,
tellus tempor consequat mi vitae...</p>
<a class="nav-link d-inline-block me-3 p-0 text-black-50 fs-xs" href="#"><i class="bi bi-calendar3 me-2"></i>Nov 23</a>
<a class="nav-link d-inline-block me-3 p-0 text-black-50 fs-xs" href="#"><i class="bi bi-chat me-2"></i>No
comments</a>
</div>
</article>
<hr class="text-dark opacity-10 my-4">
<article class="d-flex align-items-start">
<a class="d-none d-sm-block flex-shrink-0 me-sm-4 mb-sm-0 mb-3" href="#">
<img class="" src="/html-component/images/blog/house-thumb-03.jpg" width="100" alt="Blog post"></a>
<div>
<h6 class="mb-1 text-uppercase text-primary fs-xs">Home improvement</h6>
<h5 class="mb-2"><a class="nav-link" href="#">Your Guide to a Smart Apartment Searching</a></h5>
<p class="mb-2 fs-sm">Mi justo, varius vitae cursus ipsum sem massa amet pellentesque. Ipsum enim sit nulla
ridiculus semper nam...</p>
<a class="nav-link d-inline-block me-4 p-0 text-black-50 fs-xs" href="#"><i class="bi bi-calendar3 me-2"></i>Dec 4</a>
<a class="nav-link d-inline-block me-3 p-0 text-black-50 fs-xs" href="#"><i class="bi bi-chat me-2"></i>2
comments</a>
</div>
</article>
<hr class="text-dark opacity-10 my-4">
<article class="d-flex align-items-start">
<a class="d-none d-sm-block flex-shrink-0 me-sm-4 mb-sm-0 mb-3" href="#">
<img class="" src="/html-component/images/blog/house-thumb-01.jpg" width="100" alt="Blog post"></a>
<div>
<h6 class="mb-1 text-uppercase text-primary fs-xs">Tips & advice</h6>
<h5 class="mb-2"><a class="nav-link" href="#">Top 10 Ways to Refresh Your Space</a></h5>
<p class="mb-2 fs-sm">Volutpat, orci, vitae arcu feugiat vestibulum ultricies nisi, aenean eget. Vitae enim,
tellus tempor consequat mi vitae...</p>
<a class="nav-link d-inline-block me-3 p-0 text-black-50 fs-xs" href="#"><i class="bi bi-calendar3 me-2"></i>Nov 23</a>
<a class="nav-link d-inline-block me-3 p-0 text-black-50 fs-xs" href="#"><i class="bi bi-chat me-2"></i>No
comments</a>
</div>
</article>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-green: #00992e;
--bs-black: #000000;
--bs-primary: var(--bs-green);
--bs-secondary: var(--bs-black);
--bs-text-primary: var(--bs-green);
--bs-text-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .9rem;
}
.blog .fs-xs {
font-size: 0.75rem !important;
}
.blog .text-primary {
color: var(--bs-text-primary) !important;
}
More coming soon
Regular license
- Free to use this design
- Customization by expert designer $20/hr
- For more information please get in touch with our marketing person - info@webui.io