<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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.