#e8e8e8
1.card { 2 width: 190px; 3 height: 254px; 4 color: white; 5 display: grid; 6 grid-template-columns: 1fr 1fr; 7 grid-template-rows: 1fr 1fr; 8 gap: 5px; 9 overflow: visible; 10} 11 12.card .item { 13 border-radius: 10px; 14 width: 100%; 15 height: 100%; 16 display: flex; 17 flex-direction: column; 18 align-items: center; 19 justify-content: center; 20} 21 22.item:hover { 23 transform: scale(0.95); 24 transition: all 0.3s; 25} 26 27.item svg { 28 width: 40px; 29 height: 40px; 30 margin-bottom: 7px; 31} 32 33.item--1 { 34 background: #c7c7ff; 35} 36 37.item--2 { 38 background: #ffd8be; 39} 40 41.item--3 { 42 background: #a9ecbf; 43} 44 45.item--4 { 46 background: #f3bbe1; 47} 48 49.quantity { 50 font-size: 25px; 51 font-weight: 600; 52} 53 54.text { 55 font-size: 12px; 56 font-family: inherit; 57 font-weight: 600; 58} 59 60.text--1 { 61 color: rgba(149,149,255,1); 62} 63 64.text--2 { 65 color: rgba(252,161,71,1); 66} 67 68.text--3 { 69 color: rgba(66,193,110,1); 70} 71 72.text--4 { 73 color: rgba(220,91,183,1); 74}
Comments
Variations
1 MIT License