#e8e8e8
1.card { 2 --font-color: #323232; 3 --bg-color: #e0e0e0; 4 width: 250px; 5 height: 350px; 6 border-radius: 20px; 7 background: var(--bg-color); 8 box-shadow: -9px 9px 18px #5a5a5a, 9 9px -9px 18px #ffffff; 10 display: flex; 11 flex-direction: column; 12 transition: .4s; 13 position: relative; 14} 15 16.card:hover { 17 transform: scale(1.02); 18 box-shadow: 0px 0px 10px 2px #5a5a5a; 19} 20 21.card__img { 22 width: 100%; 23 height: 100%; 24 object-fit: cover; 25 border-radius: 20px 20px 0 0; 26 background-color: blueviolet; 27} 28 29.card__descr-wrapper { 30 padding: 15px; 31 display: grid; 32} 33 34.card__title { 35 color: var(--font-color); 36 text-align: center; 37 margin-bottom: 15px; 38 font-weight: 900; 39 font-size: 16px; 40} 41 42.card__descr { 43 color: var(--font-color); 44} 45 46.svg { 47 width: 25px; 48 height: 25px; 49 transform: translateY(25%); 50 fill: var(--font-color); 51} 52 53.card__links { 54 margin-top: 10px; 55 display: flex; 56 justify-content: space-between; 57 align-self: flex-end; 58} 59 60.card__links .link { 61 color: var(--font-color); 62 font-weight: 600; 63 font-size: 15px; 64 text-decoration: none; 65} 66 67.card__links .link:hover { 68 text-decoration: underline; 69} 70
Comments
MIT License