Card by NlghtM4re
#e8e8e8
1.card { 2 width: 190px; 3 height: 254px; 4 border-radius: 5px; 5 background: lightblue; 6 border: 2px solid rgb(49, 161, 198); 7} 8 9.wave { 10 transform: translate(0,161px); 11} 12 13.sun { 14 transform: translate(-45px, -143px); 15} 16 17.sun-shadow { 18 position: absolute; 19 width: 190px; 20 height: 190px; 21 display: flex; 22 justify-content: center; 23 transform: rotate(-90deg) translate(253px,0); 24 border-radius: 10px; 25 background: linear-gradient(90deg, rgba(156,224,254,0) 0%, rgba(87,201,251,0) 33%, rgba(250,251,87,0.11545868347338939) 65%, rgba(149,140,0,0.23030462184873945) 100%); 26} 27 28.sun-ring { 29 width: 5px; 30 height: 20px; 31 position: absolute; 32 background-color: rgb(249, 215, 46); 33 border-radius: 5px; 34} 35 36.sun-ring-container { 37 transform: translate(48px,-217px); 38} 39 40.sun-ring:nth-child(1) { 41 transform: translate(0,40px); 42} 43 44.sun-ring:nth-child(2) { 45 transform: translate(25px,32px) rotate(-35deg); 46} 47 48.sun-ring:nth-child(3) { 49 transform: translate(40px,5px) rotate(-80deg); 50} 51 52.sun-ring:nth-child(4) { 53 transform: translate(37px,-25px) rotate(-120deg); 54} 55 56.sun-ring:nth-child(5) { 57 transform: translate(-25px,34px) rotate(35deg); 58} 59 60.sun-ring:nth-child(6) { 61 transform: translate(-38px,13px) rotate(75deg) scaleY(0.7); 62} 63 64.sun-ring:nth-child(7) { 65 transform: translate(-38px,-17px) rotate(110deg) scaleY(0.7); 66} 67 68.sun-ring:nth-child(8) { 69 transform: translate(-20px,-35px) rotate(160deg) scaleY(0.7); 70} 71 72.sun-ring:nth-child(9) { 73 transform: translate(10px,-37px) rotate(195deg) scaleY(0.51); 74}
1.4K views
1.4K views
MIT License