<aside> 💡 A card is a small box, (shaped like a card) that can contain minimal information. It is meant to be easily replicated.
</aside>
index.html
<!--DOCTYPE html-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--==Title========================-->
<title>Blog Section HTML</title>
<!--==CSS==========================-->
<link rel="stylesheet" href="css/style.css">
<!--==Poppins======================-->
<link rel="preconnect" href="<https://fonts.googleapis.com>">
<link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin>
<link href="<https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap>" rel="stylesheet">
<!--==Font-Awesome=================-->
<link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css>">
</head>
<body>
<!--==Blog================================-->
<section id="blog">
<div class="blog-heading">
<strong>Recent Post</strong>
<h3>Our Blog</h3>
</div>
<!--**container**************-->
<div class="blog-box-container">
<!-- **box** -->
<div class="blog-box">
<!--img-->
<div class="blog-box-img">
<img alt="blog" src="images/b2.jpg">
<a href="#" class="blog-img-link">
<i class="fa-solid fa-arrow-up-right-from-square"></i>
</a>
</div>
<!--text-->
<div class="blog-box-text">
<strong>Artificial Intelligence</strong>
<a href="#">Artificial Intelligence, What It Is and How It Is Used</a>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam explicabo ex, quia sapiente totam itaque et atque neque quis cumque minus molestiae, alias, perspiciatis dolorum excepturi rerum magni possimus veniam.</p>
<div class="blog-author">
<div class="blog-author-img">
<img alt="" src="images/b2.jpg">
</div>
<div class="blog-author-text">
<strong>Alax</strong>
<span>Jan 12, 2023</span>
</div>
</div>
</div>
</div><!--box-end-->
<!-- **box** -->
<div class="blog-box">
<!--img-->
<div class="blog-box-img">
<img alt="blog" src="images/b3.jpg">
<a href="#" class="blog-img-link">
<i class="fa-solid fa-arrow-up-right-from-square"></i>
</a>
</div>
<!--text-->
<div class="blog-box-text">
<strong>Artificial Intelligence</strong>
<a href="#">Artificial Intelligence, What It Is and How It Is Used</a>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam explicabo ex, quia sapiente totam itaque et atque neque quis cumque minus molestiae, alias, perspiciatis dolorum excepturi rerum magni possimus veniam.</p>
<div class="blog-author">
<div class="blog-author-img">
<img alt="" src="images/b3.jpg">
</div>
<div class="blog-author-text">
<strong>Alax</strong>
<span>Jan 12, 2023</span>
</div>
</div>
</div>
</div><!--box-end-->
<!-- **box** -->
<div class="blog-box">
<!--img-->
<div class="blog-box-img">
<img alt="blog" src="images/b1.jpg">
<a href="#" class="blog-img-link">
<i class="fa-solid fa-arrow-up-right-from-square"></i>
</a>
</div>
<!--text-->
<div class="blog-box-text">
<strong>Artificial Intelligence</strong>
<a href="#">Artificial Intelligence, What It Is and How It Is Used</a>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam explicabo ex, quia sapiente totam itaque et atque neque quis cumque minus molestiae, alias, perspiciatis dolorum excepturi rerum magni possimus veniam.</p>
<div class="blog-author">
<div class="blog-author-img">
<img alt="" src="images/b1.jpg">
</div>
<div class="blog-author-text">
<strong>Alax</strong>
<span>Jan 12, 2023</span>
</div>
</div>
</div>
</div><!--box-end-->
</div>
</section>
</body>
</html>
css/style.css
*{
margin: 0px;
padding: 0px;
font-family: 'poppins';
box-sizing: border-box;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
/*==blog========================*/
#blog{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 50px 0px;
background-color: #f9f8ff;
}
.blog-heading h3{
font-size:2.4rem;
color: #252525;
font-weight: 800;
text-transform: uppercase;
line-height: 2.4rem;
}
.blog-heading strong{
color: #0a0ef8;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.3px;
}
.blog-box-container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
margin-top: 50px;
max-width: 1050px;
width: 90%;
}
.blog-box{
max-width: 100%;/*350px*/
width: 100%;
height: 100%;
padding: 10px;
display: flex;
flex-direction: column;
transition: all ease 0.3s;
}
.blog-box:hover{
box-shadow:16px 20px 50px rgba(0,0,0,0.12);
background-color: #ffffff;
}
.blog-box-img{
width: 100%;
height: 100%;
max-height: 300px;
overflow: hidden;
display: flex;
position: relative;
}
.blog-box-img img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: all ease 0.3s;
}
.blog-img-link{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: #ffffff;
color: #252525;
box-shadow: 2px 2px 30px rgba(20, 97, 212, 0.12);
display: none;
animation: fade 0.3s;
}
.blog-box:hover .blog-box-img img{
filter: blur(3px);
}
.blog-box:hover .blog-box-img a{
display: flex;
}
.blog-box-text{
display: flex;
flex-direction: column;
padding: 30px 10px 20px 10px;
}
.blog-box-text strong,
.blog-box-text p{
color: #797979;
font-size: 0.9rem;
font-weight: 400;
}
.blog-box-text a{
font-size: 1.4rem;
color: #252525;
font-weight: 800;
line-height: 1.8rem;
margin: 5px 0px 10px 0px;
}
@keyframes fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.blog-box-text p{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.blog-author{
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 20px;
}
.blog-author-img{
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
margin-right: 10px;
}
.blog-author-img img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.blog-author-text{
display: flex;
flex-direction: column;
}
.blog-author-text strong{
color: #252525;
font-weight: 800;
}
.blog-author-text span{
color: #797979;
font-size: 0.8rem;
font-weight: 500;
}
@media(max-width:920px){
.blog-box-container{
grid-template-columns: 1fr 1fr;
grid-gap: 10px 0px;
}
}
@media(max-width:600px){
.blog-heading h3{
font-size: 1.6rem;
line-height: 1.6rem;
}
.blog-box-container{
grid-template-columns: 1fr;
}
}
images
