2.4K views
CSS
1.card { 2 --width: 190px; 3 --height: 210px; 4 --primary: #00b9ae; 5 --text: #f9f9f9b2; 6 --secondary: #f9f9f933; 7 --radius: 20px; 8 color: #fff; 9 font-family: Arial, Helvetica, sans-serif; 10 width: var(--width); 11 height: var(--height); 12 background: linear-gradient( 13 180deg, 14 rgba(22, 24, 30, 0) 0%, 15 rgba(22, 24, 30, 0.7) 65.28% 16 ), 17 linear-gradient(0deg, rgba(22, 24, 30, 0.4), rgba(22, 24, 30, 0.4)); 18 background-size: cover; 19 border-radius: var(--radius); 20 display: flex; 21 flex-direction: column; 22 gap: 0.7rem; 23 padding: 1em; 24 padding-top: 1.4em; 25} 26 27 28/* */ 29 30.card .card__title { 31 margin: 0; 32 font-size: 1.2rem; 33 font-weight: bold; 34 margin-top: 0.2rem; 35} 36 37.rating { 38 margin-top: 0.5em; 39 width: 85px; 40 height: 16px; 41 background-image: url("data:image/svg+xml,%20%3Csvg%0A%20%20%20%20%20%20%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20%20%20%20%20%20%20%20width%3D%2217%22%0A%20%20%20%20%20%20%20%20%20%20height%3D%2217%22%0A%20%20%20%20%20%20%20%20%20%20viewBox%3D%220%200%2017%2017%22%0A%20%20%20%20%20%20%20%20%20%20fill%3D%22none%22%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20%20%20%20%20d%3D%22M8.51948%201.625C9.1214%201.625%2010.0427%204.16625%2010.4636%205.43013C10.6014%205.8437%2010.9837%206.13054%2011.4192%206.14904C12.7373%206.20505%2015.375%206.39722%2015.375%207.0384C15.375%207.66696%2013.5161%209.17543%2012.5322%209.92976C12.1816%2010.1986%2012.0365%2010.6604%2012.1687%2011.082C12.5631%2012.34%2013.2755%2014.8755%2012.7573%2015.3009C12.2506%2015.717%2010.2147%2014.2326%209.15246%2013.4009C8.77021%2013.1016%208.22949%2013.1012%207.84719%2013.4004C6.78473%2014.2321%204.75246%2015.717%204.28166%2015.3009C3.79912%2014.8745%204.47615%2012.3275%204.84741%2011.0727C4.97086%2010.6555%204.82425%2010.2029%204.47885%209.93826C3.49798%209.18681%201.625%207.66933%201.625%207.0384C1.625%206.3962%204.2711%206.20444%205.5871%206.14878C6.0197%206.13048%206.3998%205.84769%206.53973%205.43793C6.97041%204.17673%207.91633%201.625%208.51948%201.625Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%2300B9AE%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke%3D%22%2300B9AE%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3D%222%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-linecap%3D%22round%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fsvg%3E"); 42 background-repeat: space; 43} 44 45.card .card__info { 46 display: flex; 47 margin-top: auto; 48 font-size: 0.8rem; 49 color: var(--text); 50 font-weight: 400; 51 justify-content: space-between; 52} 53 54.card .card__btns { 55 display: flex; 56 gap: 0.6rem; 57} 58 59.card button { 60 border: none; 61 background: none; 62 cursor: pointer; 63 background: var(--primary); 64 color: #fff; 65 border-radius: var(--radius); 66 padding: 0.5rem 1rem; 67 font-size: 1rem; 68 font-weight: bold; 69 transition: 0.2s; 70} 71 72.card button:hover { 73 opacity: 0.8; 74 transform: scale(0.9); 75} 76 77.card .add-btn { 78 color: #fff; 79 padding: 0.5em 0.8em; 80 background: rgba(249, 249, 249, 0.2); 81 border-radius: 14px; 82} 83 84.card .watch-btn { 85 flex: 1; 86} 87
HTML
1<div class="card"> 2 <div class="card-top"> 3 <p class="card__title">Rick And Morty</p> 4 <div class="rating"> 5 <svg width="17" height="17" viewBox="0 0 17 17" fill="none"> 6 <path d="M8.51948 1.625C9.1214 1.625 10.0427 4.16625 10.4636 5.43013C10.6014 5.8437 10.9837 6.13054 11.4192 6.14904C12.7373 6.20505 15.375 6.39722 15.375 7.0384C15.375 7.66696 13.5161 9.17543 12.5322 9.92976C12.1816 10.1986 12.0365 10.6604 12.1687 11.082C12.5631 12.34 13.2755 14.8755 12.7573 15.3009C12.2506 15.717 10.2147 14.2326 9.15246 13.4009C8.77021 13.1016 8.22949 13.1012 7.84719 13.4004C6.78473 14.2321 4.75246 15.717 4.28166 15.3009C3.79912 14.8745 4.47615 12.3275 4.84741 11.0727C4.97086 10.6555 4.82425 10.2029 4.47885 9.93826C3.49798 9.18681 1.625 7.66933 1.625 7.0384C1.625 6.3962 4.2711 6.20444 5.5871 6.14878C6.0197 6.13048 6.3998 5.84769 6.53973 5.43793C6.97041 4.17673 7.91633 1.625 8.51948 1.625Z" fill="#00B9AE" stroke="#00B9AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 7 </svg> 8 </div> 9 </div> 10 <div class="card__info"> 11 <p class="episode__num">46Ep</p> 12 <p class="episode__type">Fantasy</p> 13 </div> 14 <div class="card__btns"> 15 <button class="add-btn">+</button> 16 <button class="watch-btn">watch</button> 17 </div> 18</div>