6.8K views
CSS
1.card { 2 --primary-clr: #1C204B; 3 --dot-clr: #BBC0FF; 4 --play: hsl(195, 74%, 62%); 5 width: 200px; 6 height: 170px; 7 border-radius: 10px; 8} 9 10.card { 11 font-family: "Arial"; 12 color: #fff; 13 display: grid; 14 cursor: pointer; 15 grid-template-rows: 50px 1fr; 16} 17 18.card:hover .img-section { 19 transform: translateY(1em); 20} 21 22.card-desc { 23 border-radius: 10px; 24 padding: 15px; 25 position: relative; 26 top: -10px; 27 display: grid; 28 gap: 10px; 29 background: var(--primary-clr); 30} 31 32.card-time { 33 font-size: 1.7em; 34 font-weight: 500; 35} 36 37.img-section { 38 transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); 39 border-top-left-radius: 10px; 40 border-top-right-radius: 10px; 41 background: hsl(195, 74%, 62%); 42} 43 44.card-header { 45 display: flex; 46 align-items: center; 47 width: 100%; 48} 49 50.card-title { 51 flex: 1; 52 font-size: 0.9em; 53 font-weight: 500; 54} 55 56.card-menu { 57 display: flex; 58 gap: 4px; 59 margin-inline: auto; 60} 61 62.card svg { 63 float: right; 64 max-width: 100%; 65 max-height: 100%; 66} 67 68.card .dot { 69 width: 5px; 70 height: 5px; 71 border-radius: 50%; 72 background: var(--dot-clr); 73} 74 75.card .recent { 76 line-height: 0; 77 font-size: 0.8em; 78}
HTML
1 <div class="card work"> 2 <div class="img-section"> 3 <svg xmlns="http://www.w3.org/2000/svg" height="77" width="76"><path fill-rule="nonzero" fill="#3F9CBB" d="m60.91 71.846 12.314-19.892c3.317-5.36 3.78-13.818-2.31-19.908l-26.36-26.36c-4.457-4.457-12.586-6.843-19.908-2.31L4.753 15.69c-5.4 3.343-6.275 10.854-1.779 15.35a7.773 7.773 0 0 0 7.346 2.035l7.783-1.945a3.947 3.947 0 0 1 3.731 1.033l22.602 22.602c.97.97 1.367 2.4 1.033 3.732l-1.945 7.782a7.775 7.775 0 0 0 2.037 7.349c4.49 4.49 12.003 3.624 15.349-1.782Zm-24.227-46.12-1.891-1.892-1.892 1.892a2.342 2.342 0 0 1-3.312-3.312l1.892-1.892-1.892-1.891a2.342 2.342 0 0 1 3.312-3.312l1.892 1.891 1.891-1.891a2.342 2.342 0 0 1 3.312 3.312l-1.891 1.891 1.891 1.892a2.342 2.342 0 0 1-3.312 3.312Zm14.19 14.19a2.343 2.343 0 1 1 3.315-3.312 2.343 2.343 0 0 1-3.314 3.312Zm0 7.096a2.343 2.343 0 0 1 3.313-3.312 2.343 2.343 0 0 1-3.312 3.312Zm7.096-7.095a2.343 2.343 0 1 1 3.312 0 2.343 2.343 0 0 1-3.312 0Zm0 7.095a2.343 2.343 0 0 1 3.312-3.312 2.343 2.343 0 0 1-3.312 3.312Z"></path></svg> </div> 4 <div class="card-desc"> 5 <div class="card-header"> 6 <div class="card-title">Play</div> 7 <div class="card-menu"> 8 <div class="dot"></div> 9 <div class="dot"></div> 10 <div class="dot"></div> 11 </div> 12 </div> 13 <div class="card-time">32hrs</div> 14 <p class="recent">Last Week-36hrs</p> 15</div></div>