diff --git a/404-Pages/Neon 404/css/style.css b/404-Pages/Neon 404/css/style.css index 1c2babe..3d16871 100644 --- a/404-Pages/Neon 404/css/style.css +++ b/404-Pages/Neon 404/css/style.css @@ -1,30 +1,30 @@ @import url('https://fonts.googleapis.com/css?family=Audiowide&display=swap'); -html, -body{ - margin: 0px; +/* Reset & Base */ +html, body { + margin: 0; overflow: hidden; } -div{ +div { position: absolute; - top: 0%; - left: 0%; + top: 0; + left: 0; height: 100%; width: 100%; - margin: 0px; background: radial-gradient(circle, #240015 0%, #12000b 100%); overflow: hidden; } -.wrap{ +.wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } -h2{ +/* Heading neon effect */ +h2 { position: absolute; top: 50%; left: 50%; @@ -32,145 +32,84 @@ h2{ font-size: 32px; text-transform: uppercase; transform: translate(-50%, -50%); - display: block; color: #12000a; font-weight: 300; - font-family: Audiowide; - text-shadow: 0px 0px 4px #12000a; - animation: fadeInText 3s ease-in 3.5s forwards, flicker4 5s linear 7.5s infinite, hueRotate 6s ease-in-out 3s infinite; + font-family: 'Audiowide', cursive; + text-shadow: 0 0 4px #12000a; + animation: fadeInText 3s ease-in 3.5s forwards, + flickerText 5s linear 7.5s infinite, + hueRotate 6s ease-in-out 3s infinite; } +/* SVG Containers */ #svgWrap_1, -#svgWrap_2{ +#svgWrap_2 { position: absolute; - height: auto; width: 600px; max-width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); -} - -#svgWrap_1, -#svgWrap_2, -div{ animation: hueRotate 6s ease-in-out 3s infinite; } -#id1_1, -#id2_1, -#id3_1{ +/* SVG Paths Neon Effect */ +#id1_1, #id2_1, #id3_1 { stroke: #ff005d; stroke-width: 3px; fill: transparent; filter: url(#glow); } -#id1_2, -#id2_2, -#id3_2{ +#id1_2, #id2_2, #id3_2 { stroke: #12000a; stroke-width: 3px; fill: transparent; filter: url(#glow); } -#id3_1{ - stroke-dasharray: 940px; - stroke-dashoffset: -940px; - animation: drawLine3 2.5s ease-in-out 0s forwards, flicker3 4s linear 4s infinite; -} - -#id2_1{ - stroke-dasharray: 735px; - stroke-dashoffset: -735px; - animation: drawLine2 2.5s ease-in-out 0.5s forwards, flicker2 4s linear 4.5s infinite; -} - -#id1_1{ - stroke-dasharray: 940px; - stroke-dashoffset: -940px; - animation: drawLine1 2.5s ease-in-out 1s forwards, flicker1 4s linear 5s infinite; -} - -@keyframes drawLine1 { - 0% {stroke-dashoffset: -940px;} - 100%{stroke-dashoffset: 0px;} -} +/* Stroke dash animations */ +#id3_1 { stroke-dasharray: 940px; stroke-dashoffset: -940px; animation: drawLine3 2.5s ease forwards, flicker3 4s linear 4s infinite; } +#id2_1 { stroke-dasharray: 735px; stroke-dashoffset: -735px; animation: drawLine2 2.5s ease 0.5s forwards, flicker2 4s linear 4.5s infinite; } +#id1_1 { stroke-dasharray: 940px; stroke-dashoffset: -940px; animation: drawLine1 2.5s ease 1s forwards, flicker1 4s linear 5s infinite; } -@keyframes drawLine2 { - 0% {stroke-dashoffset: -735px;} - 100%{stroke-dashoffset: 0px;} -} +/* Draw line keyframes */ +@keyframes drawLine1 { 0% { stroke-dashoffset:-940px; } 100% { stroke-dashoffset:0; } } +@keyframes drawLine2 { 0% { stroke-dashoffset:-735px; } 100% { stroke-dashoffset:0; } } +@keyframes drawLine3 { 0% { stroke-dashoffset:-940px; } 100% { stroke-dashoffset:0; } } -@keyframes drawLine3 { - 0% {stroke-dashoffset: -940px;} - 100%{stroke-dashoffset: 0px;} +/* Flicker animations for each path */ +@keyframes flicker1 { + 0%,4%,6%,14%,100% { stroke: #ff005d; } + 1%,3%,7%,13% { stroke: transparent; } } -@keyframes flicker1{ - 0% {stroke: #ff005d;} - 1% {stroke: transparent;} - 3% {stroke: transparent;} - 4% {stroke: #ff005d;} - 6% {stroke: #ff005d;} - 7% {stroke: transparent;} - 13% {stroke: transparent;} - 14% {stroke: #ff005d;} - 100%{stroke: #ff005d;} +@keyframes flicker2 { + 0%,50%,62%,100% { stroke: #ff005d; } + 51%,61% { stroke: transparent; } } -@keyframes flicker2{ - 0% {stroke: #ff005d;} - 50% {stroke: #ff005d;} - 51% {stroke: transparent;} - 61% {stroke: transparent;} - 62% {stroke: #ff005d;} - 100%{stroke: #ff005d;} +@keyframes flicker3 { + 0%,11%,40%,46%,100% { stroke: #ff005d; } + 1%,10%,41%,45% { stroke: transparent; } } -@keyframes flicker3{ - 0% {stroke: #ff005d;} - 1% {stroke: transparent;} - 10% {stroke: transparent;} - 11% {stroke: #ff005d;} - 40% {stroke: #ff005d;} - 41% {stroke: transparent;} - 45% {stroke: transparent;} - 46% {stroke: #ff005d;} - 100%{stroke: #ff005d;} +/* Text flicker & fade animations */ +@keyframes flickerText { + 0%,30%,36%,85%,100% { color: #ff005d; text-shadow:0 0 4px #ff005d; } + 31%,37%,41%,86%,95% { color: #12000a; text-shadow:0 0 4px #12000a; } + 32%,42%,96% { color: #ff005d; text-shadow:0 0 4px #ff005d; } } -@keyframes flicker4{ - 0% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;} - 30% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;} - 31% {color: #12000a;text-shadow:0px 0px 4px #12000a;} - 32% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;} - 36% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;} - 37% {color: #12000a;text-shadow:0px 0px 4px #12000a;} - 41% {color: #12000a;text-shadow:0px 0px 4px #12000a;} - 42% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;} - 85% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;} - 86% {color: #12000a;text-shadow:0px 0px 4px #12000a;} - 95% {color: #12000a;text-shadow:0px 0px 4px #12000a;} - 96% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;} - 100%{color: #ff005d;text-shadow:0px 0px 4px #ff005d;} +@keyframes fadeInText { + 1% { color: #12000a; text-shadow:0 0 4px #12000a; } + 70% { color: #ff005d; text-shadow:0 0 14px #ff005d; } + 100% { color: #ff005d; text-shadow:0 0 4px #ff005d; } } -@keyframes fadeInText{ - 1% {color: #12000a;text-shadow:0px 0px 4px #12000a;} - 70% {color: #ff005d;text-shadow:0px 0px 14px #ff005d;} - 100%{color: #ff005d;text-shadow:0px 0px 4px #ff005d;} +/* Hue rotate for SVG & div animation */ +@keyframes hueRotate { + 0% { filter: hue-rotate(0deg); } + 50% { filter: hue-rotate(-120deg); } + 100% { filter: hue-rotate(0deg); } } - -@keyframes hueRotate{ - 0% { - filter: hue-rotate(0deg); - } - 50% { - filter: hue-rotate(-120deg); - } - 100% { - filter: hue-rotate(0deg); - } -} \ No newline at end of file diff --git a/404-Pages/Neon 404/index.html b/404-Pages/Neon 404/index.html index 1eaa8d8..8ab1275 100644 --- a/404-Pages/Neon 404/index.html +++ b/404-Pages/Neon 404/index.html @@ -1,41 +1,113 @@ - - - - Neon 404 - + + + + Neon 404 + -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -

Page Not Found

- - \ No newline at end of file +
+ + + + +