8.2K views
CSS
1.card { 2 width: 190px; 3 height: 254px; 4 color: white; 5 display: grid; 6 grid-template-columns: 1fr 1fr; 7 grid-template-rows: 1fr 1fr; 8 gap: 5px; 9 overflow: visible; 10} 11 12.card .item { 13 border-radius: 10px; 14 width: 100%; 15 height: 100%; 16 display: flex; 17 flex-direction: column; 18 align-items: center; 19 justify-content: center; 20} 21 22.item:hover { 23 transform: scale(0.95); 24 transition: all 0.3s; 25} 26 27.item svg { 28 width: 40px; 29 height: 40px; 30 margin-bottom: 7px; 31} 32 33.item--1 { 34 background: #c7c7ff; 35} 36 37.item--2 { 38 background: #ffd8be; 39} 40 41.item--3 { 42 background: #a9ecbf; 43} 44 45.item--4 { 46 background: #f3bbe1; 47} 48 49.quantity { 50 font-size: 25px; 51 font-weight: 600; 52} 53 54.text { 55 font-size: 12px; 56 font-family: inherit; 57 font-weight: 600; 58} 59 60.text--1 { 61 color: rgba(149,149,255,1); 62} 63 64.text--2 { 65 color: rgba(252,161,71,1); 66} 67 68.text--3 { 69 color: rgba(66,193,110,1); 70} 71 72.text--4 { 73 color: rgba(220,91,183,1); 74}
HTML
1<div class="card"> 2 <div class="item item--1"> 3 <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path fill="rgba(149,149,255,1)" d="M17 15.245v6.872a.5.5 0 0 1-.757.429L12 20l-4.243 2.546a.5.5 0 0 1-.757-.43v-6.87a8 8 0 1 1 10 0zm-8 1.173v3.05l3-1.8 3 1.8v-3.05A7.978 7.978 0 0 1 12 17a7.978 7.978 0 0 1-3-.582zM12 15a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"></path></svg> 4 <span class="quantity"> 90+ </span> 5 <span class="text text--1"> Icons </span> 6 </div> 7 <div class="item item--2"> 8 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0L24 0 24 24 0 24z"></path><path d="M16 16c1.657 0 3 1.343 3 3s-1.343 3-3 3-3-1.343-3-3 1.343-3 3-3zM6 12c2.21 0 4 1.79 4 4s-1.79 4-4 4-4-1.79-4-4 1.79-4 4-4zm10 6c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1zM6 14c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2zm8.5-12C17.538 2 20 4.462 20 7.5S17.538 13 14.5 13 9 10.538 9 7.5 11.462 2 14.5 2zm0 2C12.567 4 11 5.567 11 7.5s1.567 3.5 3.5 3.5S18 9.433 18 7.5 16.433 4 14.5 4z" fill="rgba(252,161,71,1)"></path></svg> <span class="quantity"> 70+ </span> 9 <span class="text text--2"> Illustrations </span> 10 </div> 11 <div class="item item--3"> 12 <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path fill="rgba(66,193,110,1)" d="M20.083 15.2l1.202.721a.5.5 0 0 1 0 .858l-8.77 5.262a1 1 0 0 1-1.03 0l-8.77-5.262a.5.5 0 0 1 0-.858l1.202-.721L12 20.05l8.083-4.85zm0-4.7l1.202.721a.5.5 0 0 1 0 .858L12 17.65l-9.285-5.571a.5.5 0 0 1 0-.858l1.202-.721L12 15.35l8.083-4.85zm-7.569-9.191l8.771 5.262a.5.5 0 0 1 0 .858L12 13 2.715 7.429a.5.5 0 0 1 0-.858l8.77-5.262a1 1 0 0 1 1.03 0zM12 3.332L5.887 7 12 10.668 18.113 7 12 3.332z"></path></svg> 13 <span class="quantity"> 150+ </span> 14 <span class="text text--3"> Components </span> 15 </div> 16 <div class="item item--4"> 17 <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path fill="rgba(220,91,183,1)" d="M12 20h8v2h-8C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10a9.956 9.956 0 0 1-2 6h-2.708A8 8 0 1 0 12 20zm0-10a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-4 4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm8 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-4 4a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></svg> 18 <span class="quantity"> 30+ </span> 19 <span class="text text--4"> Animations </span> 20 </div> 21</div>