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.
@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);
}
}
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.
Post a Comment
Thank you
Learning robo team