Card by SelfMadeSystem
#212121
1.card { 2 position: relative; 3 width: 190px; 4 color: white; 5 height: 260px; 6 background: #444; 7 border-radius: 14px; 8} 9 10.bg { 11 position: absolute; 12 z-index: -1; 13 inset: -4px; 14 border-radius: 16px; 15 overflow: hidden; 16} 17 18.uwu { 19 filter: blur(8px); 20 transition: filter 0.3s; 21} 22 23.bg::before { 24 content: ''; 25 position: absolute; 26 aspect-ratio: 1/1; 27 top: 50%; 28 left: 50%; 29 min-width: 150%; 30 min-height: 150%; 31 background-image: conic-gradient( 32 hsl(0, 100%, 50%), 33 hsl(30, 100%, 50%), 34 hsl(60, 100%, 50%), 35 hsl(90, 100%, 50%), 36 hsl(120, 100%, 50%), 37 hsl(150, 100%, 50%), 38 hsl(180, 100%, 50%), 39 hsl(210, 100%, 50%), 40 hsl(240, 100%, 60%), 41 hsl(270, 100%, 50%), 42 hsl(300, 100%, 50%), 43 hsl(330, 100%, 50%), 44 hsl(360, 100%, 50%) 45 ); 46 animation: speeen 4s linear infinite; 47 transform-origin: 0% 0%; 48 transform: rotate(0deg) translate(-50%, -50%); 49} 50 51@keyframes speeen { 52 from { 53 transform: rotate(0deg) translate(-50%, -50%); 54 } 55 56 to { 57 transform: rotate(360deg) translate(-50%, -50%); 58 } 59} 60 61.content { 62 position: relative; 63 padding: 14px 16px; 64} 65 66.img { 67 height: 5em; 68 width: 5em; 69 margin: auto; 70 background-color: #fff3; 71 border-radius: 1em; 72} 73 74.img svg { 75 height: 100%; 76 fill: white; 77} 78 79.content div { 80 text-align: center; 81} 82 83.h1 { 84 margin-top: 1em; 85 margin-bottom: 0.5em; 86 font-size: 1em; 87 font-weight: 600; 88} 89 90.p { 91 font-size: 0.75em; 92} 93 94.p p { 95 margin-top: 0.5em; 96 padding: 0.5em; 97 background-color: #0003; 98 border-radius: 1em; 99}
1.9K views
1.9K views
MIT License