{}
Article cards
css
js
html
libs + Add Library
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; }
JS