Card by naveenkumarr-onyx
#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(1.95); 24 transition: all 1s ease-in-out; 25 rotate: 360deg; 26} 27 28.item svg { 29 width: 40px; 30 height: 40px; 31 margin-bottom: 7px; 32} 33 34.item--1 { 35 background: #c7c7ff; 36} 37 38.item--2 { 39 background: #ffd8be; 40} 41 42.item--3 { 43 background: #a9ecbf; 44} 45 46.item--4 { 47 background: #f3bbe1; 48} 49 50.quantity { 51 font-size: 25px; 52 font-weight: 600; 53} 54 55.text { 56 font-size: 12px; 57 font-family: inherit; 58 font-weight: 600; 59} 60 61.text--1 { 62 color: rgba(149,149,255,1); 63} 64 65.text--2 { 66 color: rgba(252,161,71,1); 67} 68 69.text--3 { 70 color: rgba(66,193,110,1); 71} 72 73.text--4 { 74 color: rgba(220,91,183,1); 75}
1.6K views
Variation of acard
MIT License