Card by StealthWorm
#212121
1.card-border { 2 z-index: 0; 3 position: relative; 4 padding: 1rem; 5 width: 300px; 6 height: 350px; 7 box-sizing: border-box; 8 background: transparent; 9 backdrop-filter: blur(40px); 10 border-radius: 0px 2rem; 11 background-image: radial-gradient(#2121218a, #212121cc), linear-gradient(35deg,#124926 62%,#57ff94 100%); 12 background-origin: border-box; 13 background-clip: content-box, border-box; 14 box-shadow: 1px 1px 3rem #57ff95; 15 transition: all 0.5s; 16 animation: pulse_3011 3s infinite; 17} 18 19.card-bg { 20 position: relative; 21 box-sizing: border-box; 22 width: 100%; 23 height: 100%; 24 overflow: hidden; 25 border-radius: 0px 0.8rem; 26 background: linear-gradient(346.80deg, #124926 30%, #165c30 30%, rgba(255, 70, 84, 0) 30%, rgba(255, 70, 84, 0) 32%, #124926 32%, #124926 35%, transparent 35%); 27} 28 29strong { 30 display: flex; 31 height: 100%; 32 width: 100%; 33 text-transform: uppercase; 34 font-family: 'Open Sans Pro', sans-serif; 35 font-size: 1.6rem; 36 font-weight: 900; 37 align-items: center; 38 letter-spacing: 0.5rem; 39} 40 41#text-border { 42 position: absolute; 43 top: 15.35rem; 44 left: 1.5rem; 45 width: 100%; 46 height: fit-content; 47 color: transparent; 48 -webkit-text-stroke-width: 1px; 49 -webkit-text-stroke-color: rgb(255, 255, 255); 50 background: linear-gradient(90deg, transparent 100%, #ffffff 65%); 51 background-size: cover; 52 background-clip: text; 53 -webkit-background-clip: text; 54} 55 56#text-ext { 57 z-index: -1; 58 display: flex; 59 position: absolute; 60 inset: 1rem; 61 -webkit-text-stroke-width: 1px; 62 -webkit-text-stroke-color: #ffffff; 63 background: linear-gradient(346.80deg, rgb(255, 255, 255) 30%, #ffffff 30%, #ffffff 30%, rgb(255, 255, 255) 32%, rgb(255, 255, 255) 32%, rgb(255, 255, 255) 35%); 64 background-size: cover; 65 background-clip: text; 66 -webkit-background-clip: text; 67 -webkit-text-fill-color: transparent; 68 padding: 9rem 0 0 0.5rem; 69} 70 71.marquee { 72 top: 0; 73 z-index: -5; 74 width: 100%; 75 height: 100%; 76 position: absolute; 77 overflow: hidden; 78 --offset: 2rem; 79 --move-initial: calc(-20% + var(--offset)); 80 --move-final: calc(-85% + var(--offset)); 81 border-radius: 0px 1rem; 82 filter: opacity(0.3); 83} 84 85.marquee__inner { 86 width: fit-content; 87 display: flex; 88 position: relative; 89 transform: translate3d(var(--move-initial), 0, 0); 90 animation: slide 60s linear infinite; 91 border-radius: 0px 1rem; 92} 93 94.marquee__inner { 95 animation-play-state: running; 96} 97 98#blur-area { 99 display: block; 100 position: absolute; 101 z-index: -1; 102 inset: 0; 103 /* border: 1px solid rgb(12, 255, 65); */ 104 border-radius: 0 1rem; 105 backdrop-filter: blur(3px); 106 background: linear-gradient(90deg, transparent 0%, #00000044 100%); 107} 108 109.viper { 110 display: flex; 111 text-transform: uppercase; 112 font-family: 'Open Sans Pro', sans-serif; 113 font-size: 8rem; 114 font-weight: 900; 115 align-items: center; 116 line-height: 0.9em; 117 color: transparent; 118 -webkit-text-stroke-width: 2px; 119 -webkit-text-stroke-color: rgb(255, 255, 255); 120} 121 122.container-logo { 123 display: flex; 124 position: absolute; 125 width: 3.5rem; 126 height: 3em; 127 top: 1rem; 128 left: 1rem; 129 align-items: center; 130 justify-content: center; 131 clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); 132} 133 134.logo { 135 position: absolute; 136 width: 200%; 137 height: 200%; 138 background: conic-gradient(#228647 0%, #fff 10%, #7bffac 25%, #0d381c 50%, #1ccc5d 70%, #69b384 90%); 139 animation: spin 5s linear infinite; 140} 141 142.logo-inside { 143 display: flex; 144 width: 85%; 145 height: 85%; 146 align-items: center; 147 justify-content: center; 148 clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); 149 background-color: #212121; 150} 151 152.first, .second { 153 position: absolute; 154 width: 30px; 155 height: 30px; 156 background-color: #57ff95; 157} 158 159.first { 160 clip-path: polygon(0 10%, 70% 90%, 35% 90%, 0 50%); 161} 162 163.second { 164 clip-path: polygon(100% 10%, 100% 50%, 88% 65%, 55% 65%); 165} 166 167.mist-container { 168 position: absolute; 169 width: 450px; 170 height: 150px; 171 overflow: hidden; 172 filter: blur(1rem); 173 top: 60%; 174 left: 0; 175} 176 177.mist { 178 width: 100%; 179 height: 100%; 180 background: radial-gradient(circle, rgba(131, 255, 158, 0.63) 10%, rgba(255, 255, 255, 0) 50%); 181 animation: mist 10s infinite both; 182} 183 184svg { 185 position: absolute; 186 top: 0%; 187 width: 18rem; 188 height: 100%; 189 z-index: -2; 190} 191 192.card-border:hover { 193 transform: rotateY(20deg); 194} 195 196@keyframes spin { 197 from { 198 transform: rotate(0deg); 199 } 200 201 to { 202 transform: rotate(360deg); 203 } 204} 205 206@keyframes mist { 207 0% { 208 transform: translateX(-50%) translateY(0%) scaleY(0.7) rotate(0deg); 209 opacity: 0.3; 210 } 211 212 50% { 213 transform: translateX(0%) translateY(50%) scaleY(-10.3) rotate(20deg); 214 opacity: 0.5; 215 } 216 217 100% { 218 transform: translateX(-50%) translateY(0%) scaleY(0.7) rotate(-20deg); 219 opacity: 0.3; 220 } 221} 222 223@keyframes pulse_3011 { 224 0% { 225 box-shadow: 0 0 1rem #57ff95; 226 } 227 228 70% { 229 box-shadow: 0 0 2rem #57ff95; 230 } 231 232 100% { 233 box-shadow: 0 0 1rem #57ff95; 234 } 235} 236 237@keyframes slide { 238 0% { 239 transform: translate3d(var(--move-initial), 0, 0); 240 } 241 242 100% { 243 transform: translate3d(var(--move-final), 0, 0); 244 } 245}
2.2K views
2.2K views
MIT License