@alexmaracinaru
Illustration
A heading that must span over two lines
By Abi 4 days ago
#card
#e8e8e84.1K views
CSSAdd prefixes
1.card { 2 width: 190px; 3 height: 274px; 4 background: white; 5 padding: .4em; 6 border-radius: 6px; 7} 8 9.card-image { 10 background-color: rgb(236, 236, 236); 11 width: 100%; 12 height: 60%; 13 border-radius: 6px 6px 0 0; 14} 15 16.card-image:hover { 17 transform: scale(0.98); 18} 19 20.category { 21 text-transform: uppercase; 22 font-size: 0.7em; 23 font-weight: 600; 24 color: rgb(63, 121, 230); 25 padding: 10px 7px 0; 26} 27 28.category:hover { 29 cursor: pointer; 30} 31 32.heading { 33 font-weight: 600; 34 color: rgb(88, 87, 87); 35 padding: 7px; 36} 37 38.heading:hover { 39 cursor: pointer; 40} 41 42.author { 43 color: gray; 44 font-weight: 400; 45 font-size: 11px; 46 padding-top: 20px; 47} 48 49.name { 50 font-weight: 600; 51} 52 53.name:hover { 54 cursor: pointer; 55}
HTML
1<div class="card"> 2 <div class="card-image"></div> 3 <div class="category"> Illustration </div> 4 <div class="heading"> A heading that must span over two lines 5 <div class="author"> By <span class="name">Abi</span> 4 days ago</div> 6 </div> 7</div>