HTML
<div class="container">
<div class="cards_z">
<div class="hd">Trending this week</div>
<div class="bd">
<div class="card_z">
<a class="img_z" href="#">
<img src="https://placeimg.com/640/480/animals/4" alt="" />
</a>
<div class="desc">
<a class="title" href="#">Title for article 1 can be placed here</a>
<div class="u_info">
<span class="tag">Article</span>
<span>
By <a href="#">John Deo</a>
</span>
</div>
</div>
</div>
<div class="card_z">
<a class="img_z" href="#">
<img src="https://placeimg.com/640/480/animals/2" alt="" />
</a>
<div class="desc">
<a class="title" href="#">Title for article 2 can be placed here</a>
<div class="u_info">
<span class="tag">Article</span>
<span>
By <a href="#">John Deo</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
body {
background: #f9f9f9;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
}
a {
text-decoration: none;
}
.container {
width: 300px;
margin: 20px auto;
}
.cards_z .hd {
font-weight: bold;
font-size: 17px;
margin-bottom: 20px;
}
.card_z {
border: .9px solid #efefef;
overflow: hidden;
border-radius: 10px;
background: #fff;
margin-bottom: 20px;
}
.card_z .img_z {
display: block;
position: relative;
padding-bottom: 40%;
overflow: hidden;
}
.card_z .img_z img {
position: absolute;
left: 50%;
top: 50%;
width: 100%;
transform: translate(-50%, -50%);
}
.card_z .desc {
padding: 15px;
}
.card_z .desc .title {
font-weight: bold;
font-size: 16px;
color: #000;
margin-bottom: 10px;
display: block;
line-height: 1.6;
}
.card_z .desc .tag {
display: inline-block;
font-size: 13px;
margin-right: 10px;
border: .9px solid #ddd;
padding: 3px 5px;
border-radius: 5px;
color: #333;
letter-spacing: 1px;
}
.card_z .desc .u_info {
font-size: 14px;
color: #777;
display: flex;
align-items: center;
}
.card_z .desc .u_info a {
color: #777;
}
