<div class="card">
<img src="https://images.unsplash.com/photo-1562887245-9d941e87344e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"/>
<h1 class="title">
This is My post heading for Lorem Ipsum
</h1>
<p class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<a href="#" class="read-link">Read post</a>
</div>
.card{
width:340px;
border:1px solid #ccc;
padding:10px;
}
.card .title{
font-size: 18px;
}
.card .content{
font-size: 14px;
}
.card img{
height:300px;
width:340px;
object-fit: cover;
object-position: center;
}
.card .read-link{
padding:10px;
background:blue;
color:white;
text-decoration:none;
margin-top:13px;
display: inline-block;
margin-bottom:10px;
text-align:center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.