Card by sabbircoder07
#e8e8e8
1.results-summary-container { 2 font-family: "Hanken Grotesk", sans-serif; 3 display: flex; 4 flex-direction: column; 5 width: 350px; 6 gap: 10px; 7 border-radius: 10px; 8 box-shadow: 10px 10px 30px rgba(120, 87, 255, 0.8); 9 backface-visibility: hidden; 10} 11 12.heading-primary, 13.heading-secondary, 14.heading-tertiary { 15 color: #ffffff; 16 text-transform: capitalize; 17 margin-bottom: 15px; 18 text-transform: uppercase; 19 letter-spacing: 1px; 20} 21 22.heading-primary { 23 font-size: 36px; 24 font-weight: 700; 25 background-image: linear-gradient(to right, #f7bb97, #dd5e89); 26 -webkit-background-clip: text; 27 -webkit-text-fill-color: transparent; 28 transform: scale(1.4); 29} 30 31.heading-secondary { 32 font-size: 24px; 33 font-weight: 700; 34 margin-top: 15px; 35 letter-spacing: 1px; 36} 37 38.heading-secondary--blue { 39 color: hsl(224, 30%, 27%); 40} 41 42.heading-tertiary { 43 font-size: 20px; 44 font-weight: 500; 45 margin-bottom: 20px; 46 color: hsl(221, 100%, 96%); 47} 48 49.paragraph { 50 font-size: 17px; 51 line-height: 1.6; 52 color: hsl(221, 100%, 96%); 53} 54 55.paragraph-text-box { 56 width: 100%; 57} 58 59.text-center { 60 text-align: center; 61} 62 63.margin-1 { 64 margin-bottom: 10px; 65} 66 67.results-summary-container__result { 68 display: flex; 69 flex-direction: column; 70 text-align: center; 71 align-items: center; 72 justify-content: center; 73 padding: 20px 10px; 74 border-radius: 10px 10px 0 0; 75 background-image: linear-gradient(to bottom, #aa076b, #61045f); 76 .result-box { 77 width: 150px; 78 height: 150px; 79 border-radius: 50%; 80 background-image: linear-gradient(-45deg, #ef629f, #42275a); 81 display: flex; 82 flex-direction: column; 83 align-items: center; 84 justify-content: center; 85 cursor: pointer; 86} 87 88.result { 89 margin-top: -12px; 90 font-size: 14px; 91 font-weight: 400; 92 color: hsl(241, 100%, 89%); 93} 94} 95 96.results-summary-container__options { 97 padding: 0 16px; 98} 99 100.summary-result-options { 101 display: flex; 102 flex-direction: column; 103 gap: 10px; 104} 105 106.result-option { 107 width: 100%; 108 height: 40px; 109 background-color: hsl(0, 100%, 97%); 110 display: flex; 111 justify-content: space-between; 112 align-items: center; 113 padding: 10px; 114 border-radius: 3px; 115 cursor: pointer; 116} 117 118.result-option-memory { 119 background-color: hsl(39, 100%, 97%); 120} 121 122.result-option-verbal { 123 background-color: hsl(166, 100%, 97%); 124} 125 126.result-option-Visual { 127 background-color: hsl(234, 85%, 97%); 128} 129 130.icon-box { 131 display: flex; 132 font-size: 16px; 133 align-items: center; 134 gap: 2px; 135} 136 137.reaction-icon-text { 138 color: hsl(0, 100%, 67%); 139} 140 141.memory-icon-text { 142 color: hsl(39, 100%, 56%); 143} 144 145.verbal-icon-text { 146 color: hsl(166, 100%, 37%); 147} 148 149.visual-icon-text { 150 color: hsl(234, 85%, 45%); 151} 152 153.result-box { 154 font-size: 14px; 155 color: hsl(241, 100%, 89%); 156 font-weight: 700; 157} 158 159.result-box span { 160 font-size: 14px; 161 color: hsl(224, 30%, 27%); 162} 163 164.btn { 165 width: 100%; 166 padding: 10px; 167 color: #ffffff; 168 background-image: linear-gradient(to right, #aa076b, #61045f); 169 border: none; 170 border-radius: 3px; 171 font-size: 17px; 172 text-transform: uppercase; 173 letter-spacing: 2px; 174 font-weight: 500; 175 cursor: pointer; 176 margin: 15px 0 30px 0; 177 transition: all 0.3s; 178} 179 180.btn:hover { 181 transform: translateY(5px); 182 background-image: linear-gradient(to left, #aa076b, #61045f); 183} 184 185.icon { 186 cursor: pointer; 187 filter: grayscale(1); 188 transition: 0.3s linear; 189} 190 191.icon:hover { 192 filter: grayscale(0); 193} 194 195@keyframes background { 196 0% { 197 background-image: linear-gradient(to right, #aa076b, #61045f); 198 } 199 200 50% { 201 background-image: linear-gradient(to right, #aa076b, #61045f); 202 } 203 204 100% { 205 background-image: linear-gradient(to right, #ef629f, #42275a); 206 } 207} 208 209@keyframes gradient { 210 0% { 211 background-position: 0% 50%; 212 background-image: linear-gradient(-45deg, #ef629f, #42275a); 213 } 214 215 50% { 216 background-position: 100% 50%; 217 background-image: linear-gradient(to bottom, #aa076b, #61045f); 218 } 219 220 100% { 221 background-position: 0% 50%; 222 background-image: linear-gradient(to top, #ef629f, #42275a); 223 } 224} 225 226.confetti { 227 display: flex; 228 justify-content: center; 229 align-items: center; 230 position: absolute; 231 width: 360px; 232 height: 50%; 233 overflow: hidden; 234 z-index: 1000; 235} 236 237.confetti-piece { 238 position: absolute; 239 width: 10px; 240 height: 20px; 241 background-color: hsl(39, 100%, 56%); 242 top: 0; 243 opacity: 0; 244 animation: makeItRain 3000ms infinite ease-in-out; 245} 246 247.confetti-piece:nth-child(1) { 248 left: 7%; 249 transform: rotate(-10deg); 250 animation-delay: 182ms; 251 animation-duration: 2000ms; 252} 253 254.confetti-piece:nth-child(2) { 255 left: 14%; 256 transform: rotate(20deg); 257 animation-delay: 161ms; 258 animation-duration: 2076ms; 259} 260 261.confetti-piece:nth-child(3) { 262 left: 21%; 263 transform: rotate(-51deg); 264 animation-delay: 481ms; 265 animation-duration: 2103ms; 266} 267 268.confetti-piece:nth-child(4) { 269 left: 28%; 270 transform: rotate(61deg); 271 animation-delay: 334ms; 272 animation-duration: 1008ms; 273} 274 275.confetti-piece:nth-child(5) { 276 left: 35%; 277 transform: rotate(-52deg); 278 animation-delay: 302ms; 279 animation-duration: 1776ms; 280} 281 282.confetti-piece:nth-child(6) { 283 left: 42%; 284 transform: rotate(38deg); 285 animation-delay: 180ms; 286 animation-duration: 1168ms; 287} 288 289.confetti-piece:nth-child(7) { 290 left: 49%; 291 transform: rotate(11deg); 292 animation-delay: 395ms; 293 animation-duration: 1200ms; 294} 295 296.confetti-piece:nth-child(8) { 297 left: 56%; 298 transform: rotate(49deg); 299 animation-delay: 14ms; 300 animation-duration: 1887ms; 301} 302 303.confetti-piece:nth-child(9) { 304 left: 63%; 305 transform: rotate(-72deg); 306 animation-delay: 149ms; 307 animation-duration: 1805ms; 308} 309 310.confetti-piece:nth-child(10) { 311 left: 70%; 312 transform: rotate(10deg); 313 animation-delay: 351ms; 314 animation-duration: 2059ms; 315} 316 317.confetti-piece:nth-child(11) { 318 left: 77%; 319 transform: rotate(4deg); 320 animation-delay: 307ms; 321 animation-duration: 1132ms; 322} 323 324.confetti-piece:nth-child(12) { 325 left: 84%; 326 transform: rotate(42deg); 327 animation-delay: 464ms; 328 animation-duration: 1776ms; 329} 330 331.confetti-piece:nth-child(13) { 332 left: 91%; 333 transform: rotate(-72deg); 334 animation-delay: 429ms; 335 animation-duration: 1818ms; 336} 337 338.confetti-piece:nth-child(14) { 339 left: 94%; 340 transform: rotate(-72deg); 341 animation-delay: 429ms; 342 animation-duration: 818ms; 343} 344 345.confetti-piece:nth-child(15) { 346 left: 96%; 347 transform: rotate(-72deg); 348 animation-delay: 429ms; 349 animation-duration: 2818ms; 350} 351 352.confetti-piece:nth-child(16) { 353 left: 98%; 354 transform: rotate(-72deg); 355 animation-delay: 429ms; 356 animation-duration: 2818ms; 357} 358 359.confetti-piece:nth-child(17) { 360 left: 50%; 361 transform: rotate(-72deg); 362 animation-delay: 429ms; 363 animation-duration: 2818ms; 364} 365 366.confetti-piece:nth-child(18) { 367 left: 60%; 368 transform: rotate(-72deg); 369 animation-delay: 429ms; 370 animation-duration: 1818ms; 371} 372 373.confetti-piece:nth-child(odd) { 374 background-color: hsl(0, 100%, 67%); 375} 376 377.confetti-piece:nth-child(even) { 378 z-index: 1; 379} 380 381.confetti-piece:nth-child(4n) { 382 width: 6px; 383 height: 14px; 384 animation-duration: 4000ms; 385 background-color: #c33764; 386} 387 388.confetti-piece:nth-child(5n) { 389 width: 3px; 390 height: 10px; 391 animation-duration: 4000ms; 392 background-color: #b06ab3; 393} 394 395.confetti-piece:nth-child(3n) { 396 width: 4px; 397 height: 12px; 398 animation-duration: 2500ms; 399 animation-delay: 3000ms; 400 background-color: #dd2476; 401} 402 403.confetti-piece:nth-child(3n-7) { 404 background-color: hsl(166, 100%, 37%); 405} 406 407@keyframes makeItRain { 408 from { 409 opacity: 0; 410 } 411 412 50% { 413 opacity: 1; 414 } 415 416 to { 417 transform: translateY(200px); 418 } 419} 420 421
2K views
Variation of acard
Original Post
Variations
2 MIT License