From fd512c166e2f256aaa314777379dc6dbf2950aad Mon Sep 17 00:00:00 2001
From: Tanisha Garg <157527085+taneeshaa15@users.noreply.github.com>
Date: Mon, 24 Jun 2024 14:22:04 +0530
Subject: [PATCH 1/3] Error 404 UI change and timer addition.

---
 404.html | 161 +++++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 122 insertions(+), 39 deletions(-)

diff --git a/404.html b/404.html
index a45099f..cb7c977 100644
--- a/404.html
+++ b/404.html
@@ -10,27 +10,70 @@
         * {
             margin: 0;
             padding: 0;
-            font-family: Arial, Helvetica, sans-serif;
+            box-sizing: border-box;
+            font-family: 'Arial', Helvetica, sans-serif;
         }
 
-        .container {
-            width: 100vw;
+        body {
+            background: linear-gradient(to bottom, #1e3c72, #2a5298);
+            color: #333;
             height: 100vh;
             display: flex;
-            flex-direction: column;
             justify-content: center;
             align-items: center;
-            background-color: #f0f0f0;
+            overflow: hidden;
+            position: relative;
+        }
+
+        .stars {
+            width: 100%;
+            height: 100%;
+            background: transparent;
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 1;
+            overflow: hidden;
+        }
+
+        .star {
+            position: absolute;
+            width: 2px;
+            height: 2px;
+            background: white;
+            border-radius: 50%;
+            animation: twinkle 2s infinite alternate;
+        }
+
+        @keyframes twinkle {
+            from {
+                opacity: 0.2;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+
+        .container {
+            text-align: center;
+            z-index: 2;
+            color: white;
         }
 
         .text1 {
-            background-image: url(./assets/images/Stars.jpg);
-            background-clip: text;
-            color: transparent;
             font-size: 225px;
-            background-size: cover;
             font-weight: 900;
             margin-bottom: 50px;
+            animation: glow 1.5s ease-in-out infinite alternate;
+        }
+
+        @keyframes glow {
+            from {
+                text-shadow: 0 0 10px #fff, 0 0 20px #00c6ff, 0 0 30px #00c6ff, 0 0 40px #00c6ff, 0 0 50px #00c6ff, 0 0 60px #00c6ff, 0 0 70px #00c6ff;
+            }
+            to {
+                text-shadow: 0 0 20px #fff, 0 0 30px #00c6ff, 0 0 40px #00c6ff, 0 0 50px #00c6ff, 0 0 60px #00c6ff, 0 0 70px #00c6ff, 0 0 80px #00c6ff;
+            }
         }
 
         .text2 {
@@ -38,6 +81,7 @@
             font-weight: 800;
             font-size: 30px;
             margin-bottom: 40px;
+            animation: fadeIn 2s ease-in-out;
         }
 
         .text3 {
@@ -45,6 +89,7 @@
             width: 700px;
             text-align: center;
             margin-bottom: 30px;
+            animation: fadeIn 2s ease-in-out;
         }
 
         a {
@@ -59,77 +104,115 @@
             justify-content: center;
             align-items: center;
             border-radius: 50px;
+            transition: background-color 0.3s ease;
+            animation: slideUp 2s ease-in-out;
         }
 
-        .container a:hover{
+        a:hover {
             background-color: rgb(0, 86, 204);
         }
 
-        @media only screen and (max-width:705px){
-            .container{
-                width: 100vw;
-                height: 100vh;
-            }
-            .text1{
+        @media only screen and (max-width: 705px) {
+            .text1 {
                 font-size: 175px;
             }
-            .text2{
+
+            .text2 {
                 font-size: 20px;
             }
-            .text3{
+
+            .text3 {
                 font-size: 16px;
                 width: 500px;
             }
         }
-        @media only screen and (max-width:565px){
-            .container{
-                width: 100vw;
-                height: 100vh;
-            }
-            .text1{
+
+        @media only screen and (max-width: 565px) {
+            .text1 {
                 font-size: 125px;
             }
-            .text2{
+
+            .text2 {
                 font-size: 18px;
             }
-            .text3{
+
+            .text3 {
                 font-size: 16px;
                 width: 400px;
             }
-            a{
+
+            a {
                 width: 155px;
                 font-size: 12px;
                 height: 30px;
             }
         }
-        @media only screen and (max-width:425px){
-            .container{
-                width: 100vw;
-                height: 100vh;
-            }
-            .text1{
+
+        @media only screen and (max-width: 425px) {
+            .text1 {
                 font-size: 100px;
             }
-            .text2{
+
+            .text2 {
                 font-size: 15px;
             }
-            .text3{
+
+            .text3 {
                 font-size: 12px;
                 width: 300px;
             }
         }
-        
+
+        @keyframes fadeIn {
+            0% {
+                opacity: 0;
+            }
+
+            100% {
+                opacity: 1;
+            }
+        }
+
+        @keyframes slideUp {
+            0% {
+                transform: translateY(50px);
+                opacity: 0;
+            }
+
+            100% {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
     </style>
+    <script>
+        setTimeout(function () {
+            window.location.href = './index.html';
+        }, 5000);
+
+        // Generate stars
+        document.addEventListener('DOMContentLoaded', function () {
+            const starsContainer = document.querySelector('.stars');
+            for (let i = 0; i < 100; i++) {
+                const star = document.createElement('div');
+                star.classList.add('star');
+                star.style.top = `${Math.random() * 100}%`;
+                star.style.left = `${Math.random() * 100}%`;
+                star.style.animationDelay = `${Math.random() * 2}s`;
+                starsContainer.appendChild(star);
+            }
+        });
+    </script>
 </head>
 
 <body>
+    <div class="stars"></div>
     <div class="container">
         <div class="text1">Oops!</div>
         <div class="text2">404 - Page not Found</div>
-        <div class="text3">The page you are looking for might have been removed, had its name changed or is temporarily
-            unavailable.</div>
+        <div class="text3">The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.</div>
         <a href="./index.html">Go to HomePage</a>
     </div>
 </body>
 
-</html>
\ No newline at end of file
+</html>

From eb803e8c1d84b2aba1c984516825b46e11b5aa5d Mon Sep 17 00:00:00 2001
From: Tanisha Garg <157527085+taneeshaa15@users.noreply.github.com>
Date: Mon, 24 Jun 2024 18:13:34 +0530
Subject: [PATCH 2/3] updated

---
 404.html   | 203 +----------------------------------------------------
 scripts.js |  16 +++++
 styles.css | 168 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 187 insertions(+), 200 deletions(-)
 create mode 100644 scripts.js
 create mode 100644 styles.css

diff --git a/404.html b/404.html
index cb7c977..2c75abc 100644
--- a/404.html
+++ b/404.html
@@ -1,210 +1,13 @@
+
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" href="assets/images/favicon/favicon.ico" type="image/x-icon" />
+    <link rel="stylesheet" href="styles.css">
     <title>Error - 404</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Arial', Helvetica, sans-serif;
-        }
-
-        body {
-            background: linear-gradient(to bottom, #1e3c72, #2a5298);
-            color: #333;
-            height: 100vh;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            overflow: hidden;
-            position: relative;
-        }
-
-        .stars {
-            width: 100%;
-            height: 100%;
-            background: transparent;
-            position: absolute;
-            top: 0;
-            left: 0;
-            z-index: 1;
-            overflow: hidden;
-        }
-
-        .star {
-            position: absolute;
-            width: 2px;
-            height: 2px;
-            background: white;
-            border-radius: 50%;
-            animation: twinkle 2s infinite alternate;
-        }
-
-        @keyframes twinkle {
-            from {
-                opacity: 0.2;
-            }
-            to {
-                opacity: 1;
-            }
-        }
-
-        .container {
-            text-align: center;
-            z-index: 2;
-            color: white;
-        }
-
-        .text1 {
-            font-size: 225px;
-            font-weight: 900;
-            margin-bottom: 50px;
-            animation: glow 1.5s ease-in-out infinite alternate;
-        }
-
-        @keyframes glow {
-            from {
-                text-shadow: 0 0 10px #fff, 0 0 20px #00c6ff, 0 0 30px #00c6ff, 0 0 40px #00c6ff, 0 0 50px #00c6ff, 0 0 60px #00c6ff, 0 0 70px #00c6ff;
-            }
-            to {
-                text-shadow: 0 0 20px #fff, 0 0 30px #00c6ff, 0 0 40px #00c6ff, 0 0 50px #00c6ff, 0 0 60px #00c6ff, 0 0 70px #00c6ff, 0 0 80px #00c6ff;
-            }
-        }
-
-        .text2 {
-            text-transform: uppercase;
-            font-weight: 800;
-            font-size: 30px;
-            margin-bottom: 40px;
-            animation: fadeIn 2s ease-in-out;
-        }
-
-        .text3 {
-            font-size: x-large;
-            width: 700px;
-            text-align: center;
-            margin-bottom: 30px;
-            animation: fadeIn 2s ease-in-out;
-        }
-
-        a {
-            text-transform: uppercase;
-            background-color: rgb(0, 106, 255);
-            color: white;
-            text-decoration: none;
-            width: 200px;
-            height: 50px;
-            font-weight: bolder;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border-radius: 50px;
-            transition: background-color 0.3s ease;
-            animation: slideUp 2s ease-in-out;
-        }
-
-        a:hover {
-            background-color: rgb(0, 86, 204);
-        }
-
-        @media only screen and (max-width: 705px) {
-            .text1 {
-                font-size: 175px;
-            }
-
-            .text2 {
-                font-size: 20px;
-            }
-
-            .text3 {
-                font-size: 16px;
-                width: 500px;
-            }
-        }
-
-        @media only screen and (max-width: 565px) {
-            .text1 {
-                font-size: 125px;
-            }
-
-            .text2 {
-                font-size: 18px;
-            }
-
-            .text3 {
-                font-size: 16px;
-                width: 400px;
-            }
-
-            a {
-                width: 155px;
-                font-size: 12px;
-                height: 30px;
-            }
-        }
-
-        @media only screen and (max-width: 425px) {
-            .text1 {
-                font-size: 100px;
-            }
-
-            .text2 {
-                font-size: 15px;
-            }
-
-            .text3 {
-                font-size: 12px;
-                width: 300px;
-            }
-        }
-
-        @keyframes fadeIn {
-            0% {
-                opacity: 0;
-            }
-
-            100% {
-                opacity: 1;
-            }
-        }
-
-        @keyframes slideUp {
-            0% {
-                transform: translateY(50px);
-                opacity: 0;
-            }
-
-            100% {
-                transform: translateY(0);
-                opacity: 1;
-            }
-        }
-    </style>
-    <script>
-        setTimeout(function () {
-            window.location.href = './index.html';
-        }, 5000);
-
-        // Generate stars
-        document.addEventListener('DOMContentLoaded', function () {
-            const starsContainer = document.querySelector('.stars');
-            for (let i = 0; i < 100; i++) {
-                const star = document.createElement('div');
-                star.classList.add('star');
-                star.style.top = `${Math.random() * 100}%`;
-                star.style.left = `${Math.random() * 100}%`;
-                star.style.animationDelay = `${Math.random() * 2}s`;
-                starsContainer.appendChild(star);
-            }
-        });
-    </script>
 </head>
-
 <body>
     <div class="stars"></div>
     <div class="container">
@@ -213,6 +16,6 @@
         <div class="text3">The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.</div>
         <a href="./index.html">Go to HomePage</a>
     </div>
+    <script src="scripts.js"></script>
 </body>
-
 </html>
diff --git a/scripts.js b/scripts.js
new file mode 100644
index 0000000..843103d
--- /dev/null
+++ b/scripts.js
@@ -0,0 +1,16 @@
+setTimeout(function () {
+    window.location.href = './index.html';
+}, 5000);
+
+// Generate stars
+document.addEventListener('DOMContentLoaded', function () {
+    const starsContainer = document.querySelector('.stars');
+    for (let i = 0; i < 100; i++) {
+        const star = document.createElement('div');
+        star.classList.add('star');
+        star.style.top = `${Math.random() * 100}%`;
+        star.style.left = `${Math.random() * 100}%`;
+        star.style.animationDelay = `${Math.random() * 2}s`;
+        starsContainer.appendChild(star);
+    }
+});
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..471b64a
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,168 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Arial', Helvetica, sans-serif;
+}
+
+body {
+    background: linear-gradient(to bottom, #1e3c72, #2a5298);
+    color: #333;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.stars {
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    overflow: hidden;
+}
+
+.star {
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    background: white;
+    border-radius: 50%;
+    animation: twinkle 2s infinite alternate;
+}
+
+@keyframes twinkle {
+    from {
+        opacity: 0.2;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.container {
+    text-align: center;
+    z-index: 2;
+    color: white;
+}
+
+.text1 {
+    font-size: 225px;
+    font-weight: 900;
+    margin-bottom: 50px;
+    animation: glow 1.5s ease-in-out infinite alternate;
+}
+
+@keyframes glow {
+    from {
+        text-shadow: 0 0 10px #fff, 0 0 20px #00c6ff, 0 0 30px #00c6ff, 0 0 40px #00c6ff, 0 0 50px #00c6ff, 0 0 60px #00c6ff, 0 0 70px #00c6ff;
+    }
+    to {
+        text-shadow: 0 0 20px #fff, 0 0 30px #00c6ff, 0 0 40px #00c6ff, 0 0 50px #00c6ff, 0 0 60px #00c6ff, 0 0 70px #00c6ff, 0 0 80px #00c6ff;
+    }
+}
+
+.text2 {
+    text-transform: uppercase;
+    font-weight: 800;
+    font-size: 30px;
+    margin-bottom: 40px;
+    animation: fadeIn 2s ease-in-out;
+}
+
+.text3 {
+    font-size: x-large;
+    width: 700px;
+    text-align: center;
+    margin-bottom: 30px;
+    animation: fadeIn 2s ease-in-out;
+}
+
+a {
+    text-transform: uppercase;
+    background-color: rgb(0, 106, 255);
+    color: white;
+    text-decoration: none;
+    width: 200px;
+    height: 50px;
+    font-weight: bolder;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50px;
+    transition: background-color 0.3s ease;
+    animation: slideUp 2s ease-in-out;
+}
+
+a:hover {
+    background-color: rgb(0, 86, 204);
+}
+
+@media only screen and (max-width: 705px) {
+    .text1 {
+        font-size: 175px;
+    }
+    .text2 {
+        font-size: 20px;
+    }
+    .text3 {
+        font-size: 16px;
+        width: 500px;
+    }
+}
+
+@media only screen and (max-width: 565px) {
+    .text1 {
+        font-size: 125px;
+    }
+    .text2 {
+        font-size: 18px;
+    }
+    .text3 {
+        font-size: 16px;
+        width: 400px;
+    }
+    a {
+        width: 155px;
+        font-size: 12px;
+        height: 30px;
+    }
+}
+
+@media only screen and (max-width: 425px) {
+    .text1 {
+        font-size: 100px;
+    }
+    .text2 {
+        font-size: 15px;
+    }
+    .text3 {
+        font-size: 12px;
+        width: 300px;
+    }
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes slideUp {
+    0% {
+        transform: translateY(50px);
+        opacity: 0;
+    }
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}

From 763661978a7a44d77e5b595e45e4d27e5bcc11dd Mon Sep 17 00:00:00 2001
From: Tanisha Garg <157527085+taneeshaa15@users.noreply.github.com>
Date: Mon, 24 Jun 2024 18:16:01 +0530
Subject: [PATCH 3/3] new

---
 404.html => error..html | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename 404.html => error..html (100%)

diff --git a/404.html b/error..html
similarity index 100%
rename from 404.html
rename to error..html