Card by Koopro
This card was created for One <div> challenge
#212121
1.one-div { 2 box-sizing: border-box; 3 font-size: 10px; 4 width: 20em; 5 height: 25em; 6 background-repeat: no-repeat; 7 background-image: linear-gradient(#6a5acd, #6a5acd), 8 repeating-linear-gradient( 9 to bottom, 10 #48d1cc, 11 #48d1cc 0.1em, 12 #6a5acd 0.1em, 13 #6a5acd 0.4em, 14 transparent 0.4em, 15 transparent 0.9em 16 ), 17 linear-gradient(#6acd 40%, #48cc), 18 radial-gradient(circle, #48d1cc 30%, rgba(72, 209, 204, 0) 31%), 19 radial-gradient(circle, #7fffd4 50%, rgba(127, 255, 212, 0) 51%), 20 linear-gradient(#41cc, #d1cc), 21 linear-gradient(60deg, transparent 40%, #483d8b 41%), 22 linear-gradient(-60deg, transparent 40%, #483d8b 41%), 23 linear-gradient(to right, #48d1cc 0.1em, #483d8b 0.1em), 24 linear-gradient(to bottom, #231e44 30%, #c71585); 25 background-size: calc(100% - 0.4em) 2em, calc(100% - 0.6em) 6em, 0.1em 20em, 26 1.1em 1.1em, 10em 10em, 5em 0.1em, 3.5em 2em, 3.5em 2em, 0.4em 5em, 27 100% 100%; 28 background-position: 50% 0.2em, 50% 2.7em, 1.1em 0.2em, 0.6em 19em, 80% 18%, 29 right 3.8em bottom 2em, right 6em bottom 0, right 3em bottom 0, 30 right 6em bottom 0, 0 0; 31 border: 0.1em solid #48d1cc; 32 border-top-color: #6a5acd; 33 box-shadow: 0 0 0 0.8em #483d8b, 0 0 0 0.9em #6a5acd; 34} 35 36.one-div::before { 37 width: 24em; 38 height: 2em; 39 background-color: #483d8b; 40 border: 0.1em solid #6a5acd; 41 border-top-color: #54c8c4; 42 box-shadow: 0 1.4em 0 -0.8em #483d8b, 0 1.4em 0 -0.7em #6a5acd; 43} 44 45.one-div::after { 46 background-color: #483d8b; 47 border-radius: 2em 0; 48 border-top: 0.1em solid #1d2d2d; 49} 50
2K views
2K views
MIT License