#e8e8e8
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
3.4K views
3.4K views
Comments
MIT License