#e8e8e8
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}
Comments
MIT License