A responsive and excellent blog card is necessary for all blogging sites. It is directly connected with the user experience and user impression. If you are a website developer you might know the importance of a blog card. This post will help to understand and learn how to create a responsive HTML card using HTML and CSS.
.png)
In this post, I will share the source code of a fully responsive grid-based Blog card using HTML and CSS. This type of blog card will give an awesome look to your site. You can use it on your website project without any restrictions.
I have already shared the source code of another blog card created using HTML and CSS. Also, It will be helpful to you. So don't forget to check it out.
Blog cards are an important part of blog design because they help to:
- Showcase the most recent and popular blog posts. By featuring blog cards on the homepage, blog owners can make it easy for visitors to find the content they are most interested in.
- Improve the visual appeal of the blog. Blog cards can be used to create a visually appealing and engaging blog layout. By using high-quality images and fonts, blog owners can make their blog posts stand out from the crowd.
- Increase click-through rates. Blog cards are designed to be clickable, and they can be a very effective way to increase traffic to a blog. By writing clear and concise excerpts, and using eye-catching images, blog owners can encourage readers to click through to read the full post.
Take a look at the video demo:
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>Grid blog card</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div class="postcard">
<img src="/Blog card/Screenshot from 2022-08-04 22-17-55.png" alt="Post image">
<div class="descri">
<span class="lable">BLOG</span> <span class="author">BY: fluratech</span>
<h2><a href="#">THIS IS the title of the post</a></h2>
</div>
</div>
<div class="postcard">
<img src="/Blog card/Screenshot from 2022-08-04 22-17-55.png" alt="Post image">
<div class="descri">
<span class="lable">HTML</span> <span class="author">BY: fluratech</span>
<h2><a href="#">THIS IS the title of the post</a></h2>
</div>
</div>
<div class="postcard">
<img src="/Blog card/Screenshot from 2022-08-04 22-17-55.png" alt="Post image">
<div class="descri">
<span class="lable">CSS</span> <span class="author">BY: fluratech</span>
<h2><a href="#">THIS IS the title of the post</a></h2>
</div>
</div>
<div class="postcard">
<img src="/Blog card/Screenshot from 2022-08-04 22-17-55.png" alt="Post image">
<div class="descri">
<span class="lable">JS</span> <span class="author">BY: fluratech</span>
<h2><a href="#">THIS IS the title of the post</a></h2>
</div>
</div>
<div class="postcard">
<img src="/Blog card/Screenshot from 2022-08-04 22-17-55.png" alt="Post image">
<div class="descri">
<span class="lable">Gaming</span> <span class="author">BY: fluratech</span>
<h2><a href="#">THIS IS the title of the post</a></h2>
</div>
</div>
</main>
</body>
</html>
style.css
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
body {
/* background-color: rgb(231, 231, 231); */
background-image: linear-gradient(rgb(38, 0, 255), rgb(195, 0, 255));
}
main {
max-width: 700px;
margin: auto;
display: grid;
grid-template-columns: auto auto;
grid-gap: 40px;
padding: 30px;
justify-content: space-around;
}
main .postcard {
width: 300px;
height: auto;
background-color: white;
border-radius: 20px;
box-shadow: 1px 1px 14px -1px grey;
}
main .postcard img {
width: 100%;
border-radius: 20px 20px 0 0px;
height: 170px;
object-fit: cover;
transition: .7s;
margin-bottom: 4px;
}
main .postcard img:hover {
width: 100%;
height: 170px;
opacity:60%;
}
main .postcard .lable{
color: rgb(255, 255, 255);
background-image: linear-gradient(rgb(0, 4, 255), rgb(177, 0, 184));
padding: 5px;
margin: 10px;
font-size: 14px;
font-weight: 900;
border-radius: 20px;
}
main .postcard:hover .lable {
background-image: linear-gradient( rgb(142, 0, 185),rgb(0, 4, 255));
}
main .postcard .author{
font-size: 14px;
font-weight: 600;
float: right;
padding: 3px;
color: rgb(44, 44, 44);
}
main .postcard h2{
padding: 10px;
font-size: 19px;
font-weight: 900;
text-align: center;
}
main .postcard h2 a:hover {
color: rgb(26, 1, 117);
}
main .postcard h2 a {color: black;
text-decoration: none;
transition: .5s;
}
@media only screen and (max-width:700px) {
main .postcard {
width: 250px;
}
}
@media only screen and (max-width:600px) {
main{grid-gap: 20px;}
main .postcard {
width: 250px;
}
}
@media only screen and (max-width:550px) {
main {
grid-gap: 20px;
grid-template-columns: auto;
}
main .postcard {
width: 400px ;
}
}
@media only screen and (max-width:415px) {
main {
grid-gap: 20px;
grid-template-columns: auto;
}
main .postcard {
width: 100%;
}
}
Post a Comment