Responsive Blog Post Card Design using HTML & CSS

Responsive Blog Post Card Design using HTML & CSS

Hello developers, today in this blog you'll learn to create a Responsive Blog Post Card Design using HTML & CSS.

Blog post cards are a great way to organize listings of blog posts and visitors of the blog make use of them, as they can find exactly what they are looking for. It can be the collection of the specific information or the data, in the same blog.

In this blog (Responsive Blog Post Card Design) on the webpage, there is an image on the left side, below the image there is a blog name and date and the month of the post published in a blog, and on the right side, it contains the details like title, blog name and description of the image. This Responsive Blog Post Card Design is made responsive by using the CSS media query property.

The source code of this Responsive Blog Post Card Design is given below, if you want the source code of this program, you can copy it. You can use this Responsive Blog Post Card Design code with your creativity and can take this profile card to the next level.

Responsive Blog Post Card Design [Source Code]

To make this website (Responsive Blog Post Card Design), you need to create two files: an HTML file and a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <title>Responsive Blog Post Card || Learning Robo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/> <link rel="stylesheet" href="style.css"> </head> <body> <div class="card"> <div class="thumbnail"> <img src="https://cdn.pixabay.com/photo/2019/06/06/16/02/technology-4256272__340.jpg" class="left"> </div> <div class="right"> <h1> Lorem ipsum dolor sit amet</h1> <div class="author"> <h2>Learning Robo</h2> </div> <div class="separator"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non nunc eget magna dictum egestas. Nam sed tempor lectus, suscipit mollis erat. Aenean dignissim sem nec orci tempus lacinia.</p> </div> </div> <h5> Learning Robo</h5> <h6> 30 DECEMBER</h6> <ul> <div class="fab"> <i class="fa fa-arrow-down fa-3x"></i> </div> </ul> <div class="credit">Made with <span style="color:#072f5f">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </body> </html>
CSS provides style to an HTML page. To make the page responsive and attractive create a CSS file with the name style.css and remember that you have to create a file with a .css extension.


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;
}
body {
	background-color: #5eb2c7;
}
.card{
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	position : absolute;
	height: 420px;
	width: 900px;
	background-color : #FFF;
	border-radius: 8px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.thumbnail {
	float : left;
	position : relative; 
	left : 30px;
	top : -30px;
	height : 320px;
	width : 530px;
	border-radius: 8px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	overflow: hidden;
}
img.left{
	position: absolute;
	left: 50%;
	top: 50%;
	height: auto;
	width: 100%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.right{
	margin-left : 590px;
	margin-right : 20px;
}
h1{
	padding-top : 15px;
	font-size : 1.3rem;
	color : #4B4B4B;
}
.author{
	background-color : #072f5f;
	margin-top: 15px;
	height : 35px;
	width : 115px;
	border-radius : 20px;
}
h2{
	padding-top : 8px;
	margin-right : 6px;
	text-align : right;
	font-size : 0.8rem;
	color :white;
}
p{
	text-align: justify;
	padding-top : 25px;
	font-size : 0.95rem;
	line-height: 150%;
	color : #4B4B4B;
}
h5{
	position : absolute;
	left : 30px;
	font-size : 3rem;
	color : #C3C3C3;
}
h6{
	position : absolute;
	left : 30px;
	font-size : 2rem;
	color : #C3C3C3;
	padding-top: 60px;
}
ul{
	margin-left : 250px;
}
.fab{
	position : absolute;
	right : 50px;
	bottom : -40px;
	box-sizing: border-box;
	padding-top: 18px;
	background-color : #072f5f;
	font-size: 1rem;
	width : 80px;
	height : 80px;
	color : white;
	text-align : center;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	cursor: pointer;
}
.credit{
    text-align: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    width: 100%;
}
.credit a{
    text-decoration: none;
    color: #072f5f;
    font-weight: bold;
}
@media screen and (max-width: 700px){
	.card {
		transform: translate(-50%, -50%) scale(0.58);
	}
}
We hope you would like this Responsive Blog Post Card Design using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating this Responsive Blog Post Card Design using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome