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.
Hello my dear beginners, bloggers and developers, today I am going to share with you the Source code of a Responsive Blog Card. After reading this post you can able to understand how to create an awesome-looking column-based Blog card with a Title, image, label, author name and description.
Importance of responsive Blog card
A well-designed blog card is essential for all types of blogging sites. It has a vital role in maintaining and increasing user experience and impression. Some blogging sites don't have a user-friendly blog card, which may badly affect those sites' user impressions.
This Blog card is absolutely responsive which means that it can change its view according to the device. That's why we can see the card in a different view on different devices. The post title, post label, author name and blog description are the main elements of this Blog card. If you are using a tablet with a screen size of more than 500px or less than 600px, then you can't able to see the description.
You can use this code in your projects and your websites. There is no restriction for using these codes that I am giving, for your purpose. Also, we are not responsible for your mismanagement. I know you are waiting for the source code.
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.
Source code of responsive blog card
First, you want to create 2 files, index.html, and style.css in a folder.
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>Fluratech</title>
<!-- link CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div class="posts">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0H65D26BjR2MkbpdS1Yzi3Zuj7KfZM7JihFNTDRR5P8zPV002zxpXjcRnLebRhyobEBoBNfIIdoDhF4H1xVDdz6aZ6P75y9_0p-Z35Qj-1X2GpeZkj9r8thRvUytan6oX0iVgw7NX_RCIo8Ij5WDLGOJCI57fce3Hx3oxXHJ6tc3mAG2Q3v1KLNiyzQ/s1920/Indian%20constitution.png" alt="Blog img">
<div class="postinfo">
<a href="#">
<h2>This is the heading of the post</h2>
</a>
<div><span class="lable"><a href="#">BLOG</a></span> <span class="author">By: FLURATECH</span></div>
<span class="dec">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem atque aliquam id, eveniet
obcaecati provident hic quia modi placeatm corporis!</span>
</div>
</div>
<div class="posts">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0H65D26BjR2MkbpdS1Yzi3Zuj7KfZM7JihFNTDRR5P8zPV002zxpXjcRnLebRhyobEBoBNfIIdoDhF4H1xVDdz6aZ6P75y9_0p-Z35Qj-1X2GpeZkj9r8thRvUytan6oX0iVgw7NX_RCIo8Ij5WDLGOJCI57fce3Hx3oxXHJ6tc3mAG2Q3v1KLNiyzQ/s1920/Indian%20constitution.png" alt="Blog img">
<div class="postinfo">
<a href="#">
<h2>This is the heading of the post</h2>
</a>
<div><span class="lable"><a href="#">BLOG</a></span> <span class="author">By: FLURATECH</span></div>
<span class="dec">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem atque aliquam id, eveniet
obcaecati provident hic quia modi placeatm corporis!</span>
</div>
</div>
<div class="posts">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0H65D26BjR2MkbpdS1Yzi3Zuj7KfZM7JihFNTDRR5P8zPV002zxpXjcRnLebRhyobEBoBNfIIdoDhF4H1xVDdz6aZ6P75y9_0p-Z35Qj-1X2GpeZkj9r8thRvUytan6oX0iVgw7NX_RCIo8Ij5WDLGOJCI57fce3Hx3oxXHJ6tc3mAG2Q3v1KLNiyzQ/s1920/Indian%20constitution.png" alt="Blog img">
<div class="postinfo">
<a href="#">
<h2>This is the heading of the post</h2>
</a>
<div><span class="lable"><a href="#">BLOG</a></span> <span class="author">By: FLURATECH</span></div>
<span class="dec">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem atque aliquam id, eveniet
obcaecati provident hic quia modi placeatm corporis!</span>
</div>
</div>
<div class="posts">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0H65D26BjR2MkbpdS1Yzi3Zuj7KfZM7JihFNTDRR5P8zPV002zxpXjcRnLebRhyobEBoBNfIIdoDhF4H1xVDdz6aZ6P75y9_0p-Z35Qj-1X2GpeZkj9r8thRvUytan6oX0iVgw7NX_RCIo8Ij5WDLGOJCI57fce3Hx3oxXHJ6tc3mAG2Q3v1KLNiyzQ/s" alt="Blog img">
<div class="postinfo">
<a href="#">
<h2>This is the heading of the post</h2>
</a>
<div><span class="lable"><a href="#">BLOG</a></span> <span class="author">By: FLURATECH</span></div>
<span class="dec">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem atque aliquam id, eveniet
obcaecati provident hic quia modi placeatm corporis!</span>
</div>
</div>
<div class="posts">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0H65D26BjR2MkbpdS1Yzi3Zuj7KfZM7JihFNTDRR5P8zPV002zxpXjcRnLebRhyobEBoBNfIIdoDhF4H1xVDdz6aZ6P75y9_0p-Z35Qj-1X2GpeZkj9r8thRvUytan6oX0iVgw7NX_RCIo8Ij5WDLGOJCI57fce3Hx3oxXHJ6tc3mAG2Q3v1KLNiyzQ/s1920/Indian%20constitution.png" alt=" Blog img">
<div class="postinfo">
<a href="#">
<h2>This is the heading of the post</h2>
</a>
<div><span class="lable"><a href="#">BLOG</a></span> <span class="author">By: FLURATECH</span></div>
<span class="dec">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem atque aliquam id, eveniet
obcaecati provident hic quia modi placeatm corporis!</span>
</div>
</div>
</main>
</body>
</html>
style.css
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: rgb(188, 200, 255);
}
main {
max-width: 900px;
margin: auto;
}
main .posts {
height: auto;
display: flex;
flex-direction: row;
margin: 20px;
box-shadow: 0px 0px 9px -5px;
border-radius: 20px;
background-color: white;
}
main .posts img {
width: 350px;
height: 250px;
object-fit: cover;
border-radius: 20px 0 0 20px;
}
main .posts .postinfo {
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px;
}
main .posts .postinfo a {
text-decoration: none;
}
main .posts .postinfo a h2 {
color: rgb(243, 26, 10);
font-size: 28px;
font-weight: 800;
}
main .posts .postinfo div {
margin: 7px;
}
main .posts .postinfo .lable a {
color: rgb(255, 255, 255);
background-color: rgb(255, 0, 0);
padding: 3px;
border-radius: 5px;
font-size: 13px;
font-weight: 600;
}
main .posts .postinfo .author {
font-weight: 600;
font-size: 14px;
color: rgb(63, 63, 63);
}
main .posts .postinfo .dec {
padding: 10px 0 10px 0;
color: rgb(27, 27, 27);
font-weight: 570;
}
@media only screen and (max-width:700px) {
main .posts img {
width: 250px;
height: 200px;
object-fit: cover;
border-radius: 20px 0 0 20px;
}
main .posts .postinfo .dec {
display: none;
}
main .posts .postinfo a h2 {
color: rgb(243, 26, 10);
font-size: 23px;
font-weight: 800;
}
}
@media only screen and (max-width:520px) {
main .posts {
height: auto;
display: flex;
flex-direction:column;}
main .posts img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 20px 20px 0 0;
}
main .posts .postinfo .dec {
display: block;
}
}
Post a Comment