Card by Smit-Prajapati
#e8e8e8
1.card { 2 --accent-color: #ffd426; 3 position: relative; 4 width: 240px; 5 background: white; 6 border-radius: 1rem; 7 padding: 0.3rem; 8 box-shadow: rgba(100, 100, 111, 0.2) 0px 50px 30px -20px; 9 transition: all 0.5s ease-in-out; 10} 11 12.card .image-container { 13 position: relative; 14 width: 100%; 15 height: 130px; 16 border-radius: 0.7rem; 17 border-top-right-radius: 4rem; 18 margin-bottom: 1rem; 19} 20 21.card .image-container img { 22 width: 100%; 23 height: 100%; 24 -o-object-fit: cover; 25 object-fit: cover; 26 border-radius: inherit; 27} 28 29.card .image-container .svg { 30 height: 100%; 31 width: 100%; 32 border-radius: inherit; 33} 34 35.card .image-container .price { 36 position: absolute; 37 right: 0.7rem; 38 bottom: -1rem; 39 background: white; 40 color: var(--accent-color); 41 font-weight: 900; 42 font-size: 0.9rem; 43 padding: 0.5rem; 44 border-radius: 1rem 1rem 2rem 2rem; 45 box-shadow: rgba(100, 100, 111, 0.2) 0px 0px 15px 0px; 46} 47 48.card .favorite { 49 position: absolute; 50 width: 19px; 51 height: 19px; 52 top: 5px; 53 right: 5px; 54 cursor: pointer; 55} 56 57.card .favorite input { 58 position: absolute; 59 opacity: 0; 60 width: 0; 61 height: 0; 62} 63 64.card .favorite input:checked ~ svg { 65 animation: bouncing 0.5s; 66 fill: rgb(255, 95, 95); 67 filter: drop-shadow(0px 3px 1px rgba(53, 53, 53, 0.14)); 68} 69 70.card .favorite svg { 71 fill: #a8a8a8; 72} 73 74.card .content { 75 padding: 0px 0.8rem; 76 margin-bottom: 1rem; 77} 78 79.card .content .brand { 80 font-weight: 900; 81 color: #a6a6a6; 82} 83 84.card .content .product-name { 85 font-weight: 700; 86 color: #666666; 87 font-size: 0.7rem; 88 margin-bottom: 1rem; 89} 90 91.card .content .color-size-container { 92 display: flex; 93 justify-content: space-between; 94 text-transform: uppercase; 95 font-size: 0.7rem; 96 font-weight: 700; 97 color: #a8a8a8; 98 gap: 2rem; 99 margin-bottom: 1.5rem; 100} 101 102.card .content .color-size-container > * { 103 flex: 1; 104} 105 106.card .content .color-size-container .colors .colors-container { 107 list-style-type: none; 108 display: flex; 109 flex-wrap: wrap; 110 align-items: center; 111 justify-content: space-between; 112 gap: 0.3rem; 113 font-size: 0.5rem; 114 margin-top: 0.2rem; 115} 116 117.card .content .color-size-container .colors .colors-container .color { 118 height: 14px; 119 position: relative; 120} 121 122.card .content .color-size-container .colors .colors-container .color:hover .color-name { 123 display: block; 124} 125 126.card .content .color-size-container .colors .colors-container .color a { 127 display: inline-block; 128 height: 100%; 129 aspect-ratio: 1; 130 border: 3px solid black; 131 border-radius: 50%; 132} 133 134.card .content .color-size-container .colors .colors-container .color .color-name { 135 display: none; 136 position: absolute; 137 bottom: 125%; 138 left: 50%; 139 transform: translateX(-50%); 140 z-index: 99; 141 background: black; 142 padding: 0.2rem 1rem; 143 border-radius: 1rem; 144 text-align: center; 145} 146 147.card .content .color-size-container .colors .colors-container .color:first-child a { 148 border-color: #ffd426; 149} 150 151.card .content .color-size-container .colors .colors-container .color:nth-child(2) a { 152 background: #144076; 153} 154 155.card .content .color-size-container .colors .colors-container .color:nth-child(3) a { 156 border-color: #00b9ff; 157} 158 159.card .content .color-size-container .colors .colors-container .color:nth-child(4) a { 160 border-color: #ff6ba1; 161} 162 163.card .content .color-size-container .colors .colors-container .active { 164 border-color: black; 165} 166 167.card .content .color-size-container .sizes .size-container { 168 list-style-type: none; 169 display: flex; 170 flex-wrap: wrap; 171 align-items: center; 172 justify-content: space-between; 173 margin-top: 0.2rem; 174} 175 176.card .content .color-size-container .sizes .size-container .size { 177 height: 14px; 178} 179 180.card .content .color-size-container .sizes .size-container .size .size-radio { 181 cursor: pointer; 182} 183 184.card .content .color-size-container .sizes .size-container .size .size-radio input { 185 display: none; 186} 187 188.card .content .color-size-container .sizes .size-container .size .size-radio input:checked ~ .name { 189 background: var(--accent-color); 190 border-radius: 2rem 2rem 1.5rem 1.5rem; 191 color: white; 192} 193 194.card .content .color-size-container .sizes .size-container .size .size-radio .name { 195 display: grid; 196 place-content: center; 197 height: 100%; 198 aspect-ratio: 1.2/1; 199 text-decoration: none; 200 color: #484848; 201 font-size: 0.5rem; 202 text-align: center; 203} 204 205.card .content .rating { 206 color: #a8a8a8; 207 font-size: 0.6rem; 208 font-weight: 700; 209 display: flex; 210 align-items: center; 211 gap: 0.5rem; 212} 213 214.card .content .rating svg { 215 height: 12px; 216} 217 218.card .button-container { 219 display: flex; 220 gap: 0.3rem; 221} 222 223.card .button-container .button { 224 border-radius: 1.4rem 1.4rem 0.7rem 0.7rem; 225 border: none; 226 padding: 0.5rem 0; 227 background: var(--accent-color); 228 color: white; 229 font-weight: 900; 230 cursor: pointer; 231} 232 233.card .button-container .button:hover { 234 background: orangered; 235} 236 237.card .button-container .buy-button { 238 flex: auto; 239} 240 241.card .button-container .cart-button { 242 display: grid; 243 place-content: center; 244 width: 50px; 245} 246 247.card .button-container .cart-button svg { 248 width: 15px; 249 fill: white; 250} 251 252.card:hover { 253 transform: scale(1.03); 254} 255 256@keyframes bouncing { 257 from, to { 258 transform: scale(1, 1); 259 } 260 261 25% { 262 transform: scale(1.5, 2.1); 263 } 264 265 50% { 266 transform: scale(2.1, 1.5); 267 } 268 269 75% { 270 transform: scale(1.5, 2.05); 271 } 272}
2.2K views
2.2K views
MIT License