#e8e8e8
1.card { 2 --main-color: #000; 3 --bg-color: #fff; 4 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 5 position: relative; 6 padding: 20px; 7 width: 320px; 8 background: var(--bg-color); 9 border-radius: 20px; 10 display: flex; 11 flex-direction: column; 12 gap: 15px; 13} 14 15.card__back svg, .card__menu svg { 16 width: 20px; 17 height: 20px; 18} 19 20.card__wrapper { 21 display: flex; 22 flex-direction: row; 23 justify-content: space-between; 24 align-items: center; 25} 26 27.card__img { 28 width: 170px; 29 height: 170px; 30 background: linear-gradient(90deg, #FFF8F7, #F0F7DF); 31 border-radius: 100%; 32 margin-inline: auto; 33} 34 35.card__img svg { 36 height: 150px; 37 transform: rotate(-45deg) translate(15px, 0px); 38} 39 40.card__title { 41 font-weight: 600; 42 font-size: 25px; 43 color: var(--main-color); 44} 45 46.card__subtitle { 47 font-weight: 400; 48 font-size: 15px; 49 color: var(--main-color); 50 letter-spacing: 0.5px; 51} 52 53.card__price { 54 font-weight: 600; 55 font-size: 22px; 56 color: var(--main-color); 57} 58 59.card__counter { 60 display: flex; 61 flex-direction: row; 62 align-items: center; 63 gap: 15px; 64 padding: 5px; 65 background: #F7F7F7; 66 border-radius: 50px; 67} 68 69.card__counter-score, .card__btn { 70 font-weight: 700; 71 font-size: 22px; 72 color: var(--main-color); 73} 74 75.card__btn { 76 width: 30px; 77 height: 30px; 78 border-radius: 100%; 79 border: none; 80 background: transparent; 81} 82 83.card__btn-plus { 84 background: var(--bg-color); 85}
Comments
Variations
1 MIT License