From bd373e8f650e84ab50c79f0374b3a149225c2642 Mon Sep 17 00:00:00 2001 From: RamakrushnaBiswal Date: Wed, 19 Jun 2024 23:37:34 +0530 Subject: [PATCH] updated 404 not found page --- 404.html | 54 +++++++++++++ Error.html | 38 --------- error_styles.css | 202 ----------------------------------------------- 3 files changed, 54 insertions(+), 240 deletions(-) create mode 100644 404.html delete mode 100644 Error.html delete mode 100644 error_styles.css diff --git a/404.html b/404.html new file mode 100644 index 00000000..be2fb5b5 --- /dev/null +++ b/404.html @@ -0,0 +1,54 @@ + + + + + + + 404 Error Page + + + + + +
+
+ + + + + + + + + + + + + +
+

Oops! Page not found.

+

The page you're looking for doesn't exist or has been moved.

+ + Go back home + +
+ + + + + diff --git a/Error.html b/Error.html deleted file mode 100644 index 96ba2a58..00000000 --- a/Error.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - 404 Error Page - - - - - -
-
-
-
-
-
-
-
404
-
PAGE NOT FOUND
-
-
- -
-
- - - - - diff --git a/error_styles.css b/error_styles.css deleted file mode 100644 index d89a821e..00000000 --- a/error_styles.css +++ /dev/null @@ -1,202 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap'); -* { - margin: 0; - font-family: 'Oswald', sans-serif; - user-select: none; - box-sizing: border-box; -} - -body { - background-color: black; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - margin: 0; - padding: 0; -} - -.background { - position: absolute; - width: 100%; - height: 100%; - overflow: hidden; - top: 0; - left: 0; - z-index: -1; -} - -.stars, .stars2, .stars3 { - position: absolute; - width: 100%; - height: 100%; - background: transparent url('https://www.transparenttextures.com/patterns/stardust.png') repeat top center; - animation: animStars linear infinite; -} - -.stars { - animation-duration: 50s; -} - -.stars2 { - animation-duration: 100s; -} - -.stars3 { - animation-duration: 150s; -} - -@keyframes animStars { - from {transform: translateY(0);} - to {transform: translateY(-1000px);} -} - -.wrapper { - text-align: center; - color: white; - padding: 20px; -} - -.container { - padding: 66px 16px; - border: 1px solid white; - width: 92%; - max-width: 400px; - margin: 0 auto; -} - -.title { - font-size: 10vw; - line-height: 1; -} - -.description { - font-size: 6vw; - line-height: 1.2; -} - -.glitch { - position: relative; -} - -.glitch::before, -.glitch::after { - content: attr(data-text); - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - color: white; - overflow: hidden; -} - -.glitch::before { - left: -4px; - text-shadow: 1px 0 blue; - clip: rect(0, 900px, 0, 0); - animation: glitch 3s infinite linear alternate-reverse; -} - -.glitch::after { - left: 4px; - text-shadow: -1px 0 red; - clip: rect(0, 900px, 0, 0); - animation: glitch 2s infinite linear alternate-reverse; -} - -@keyframes glitch { - 0%, 100% { - clip: rect(24px, 9999px, 136px, 0); - } - 5% { - clip: rect(142px, 9999px, 83px, 0); - } - 10% { - clip: rect(82px, 9999px, 37px, 0); - } - 15% { - clip: rect(51px, 9999px, 78px, 0); - } - 20% { - clip: rect(150px, 9999px, 39px, 0); - } - 25% { - clip: rect(66px, 9999px, 122px, 0); - } - 30% { - clip: rect(141px, 9999px, 33px, 0); - } - 35% { - clip: rect(126px, 9999px, 17px, 0); - } - 40% { - clip: rect(125px, 9999px, 124px, 0); - } - 45% { - clip: rect(34px, 9999px, 22px, 0); - } - 50% { - clip: rect(54px, 9999px, 71px, 0); - } - 55% { - clip: rect(34px, 9999px, 135px, 0); - } - 60% { - clip: rect(150px, 9999px, 98px, 0); - } - 65% { - clip: rect(26px, 9999px, 32px, 0); - } - 70% { - clip: rect(50px, 9999px, 2px, 0); - } - 75% { - clip: rect(144px, 9999px, 77px, 0); - } - 80% { - clip: rect(135px, 9999px, 53px, 0); - } - 85% { - clip: rect(131px, 9999px, 143px, 0); - 90% { - clip: rect(127px, 9999px, 133px, 0); - 95% { - clip: rect(24px, 9999px, 125px, 0); - } -} - -.button-container { - margin-top: 20px; -} - -.button { - padding: 10px 20px; - font-size: 1.5vw; - font-family: "Outfit", sans-serif; - font-optical-sizing: auto; - font-weight: 500; - font-style: normal; - text-transform: uppercase; - color: white; - background-color: #1e3a8a; - border: none; - border-radius: 5px; - cursor: pointer; - transition: all 0.3s ease; -} - -.button:hover { - background-color: #1a3467; -} - -.button:disabled { - cursor: not-allowed; -} - -.fade-out { - opacity: 0; - transition: opacity 0.3s ease; -}