In this tutorial, I will show you how to make a simple blog section in HTML and CSS
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Blog Cards</title>
</head>
<body>
<div class="container">
<div class="blog-section">
<div class="card">
<img class="cover" src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
<h3>Category</h3>
<h1>Blog Title</h1>
<p>You can write here a brief description of your blog post</p>
<div class="author-info">
<img src="https://images.unsplash.com/photo-1542909192-2f2241a99c9d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
<div class="autorname">
<p>Author name</p>
<p>1 month ago</p>
</div>
</div>
</div>
<div class="card">
<img class="cover" src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
<h3>Category</h3>
<h1>Blog Title</h1>
<p>You can write here a brief description of your blog post</p>
<div class="author-info">
<img class="profile" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
<div class="autorname">
<p>Author name</p>
<p>Yesterday</p>
</div>
</div>
</div>
<div class="card">
<img class="cover" src="https://images.unsplash.com/photo-1543398499-23492a423518?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80">
<h3>Category</h3>
<h1>Blog Title</h1>
<p>You can write here a brief description of your blog post</p>
<div class="author-info">
<img class="profile" src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
<div class="autorname">
<p>Author name</p>
<p>2 min ago</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Nunito&family=Nunito+Sans&display=swap');
*{
margin: 0;
padding: 0;
outline: 0;
font-family: 'Nunito', sans-serif;
}
body{
background-color: #F7F8FC;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.container .blog-section{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.container .blog-section .card{
margin: 0 22px;
background-color: #fff;
width: 300px;
min-height: 400px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0px 2px 8px rgba(81,81,81,0.3);
}
.container .blog-section .card .cover{
width: 100%;
}
.card h3{
margin: 12px;
font-size: 0.8rem;
padding: 4px 12px;
border-radius: 80px;
background-color: #5E76BF;
width: min-content;
color: #fff;
}
.card h1{
font-size: 1.5rem;
margin: 0 12px;
}
.card p{
margin: 12px;
}
.author-info{
display: flex;
}
.author-info img{
width: 60px;
height: 60px;
border-radius: 80%;
margin: 12px;
}
Make a blog section in HTML and CSS
Reviewed by Medics
on
May 21, 2020
Rating:
Reviewed by Medics
on
May 21, 2020
Rating:
No comments: