add homepage button to 404 page

Stzyxh · Jun 14, 2024 · eb2086c · eb2086c
1 parent c4a2990
commit eb2086c
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 13 deletions.
diff --git a/404.html b/404.html
@@ -1,14 +1,18 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>404</title>
-        <link rel="stylesheet" href="404_style.css">
-    </head>
-    <body>
-        <h1>404</h1>
-        <p>this page was not found</p>
-        <footer>
-            &copy; 2024 Stzyxh 
-        </footer>
-    </body>
-    </html>
+<head>
+    <title>404</title>
+    <link rel="stylesheet" href="404_style.css">
+    <script src="404_scripts.js" defer></script>
+</head>
+<body>
+    <h1>404</h1>
+    <p>This page was not found</p>
+    <div class="button-container">
+        <a href="index.html" class="home-button">Go to the Homepage</a>
+    </div>
+    <footer>
+        &copy; 2024 Stzyxh 
+    </footer>
+</body>
+</html>
diff --git a/404_style.css b/404_style.css
@@ -40,14 +40,37 @@ p {
     animation-delay: 2s;
 }
 
+.button-container {
+    text-align: center;
+    margin: 20px 0;
+    opacity: 0;
+    animation: fadeInText 4s forwards;
+    animation-delay: 3s;
+}
+
+.home-button {
+    background-color: #007BFF;
+    color: white;
+    padding: 15px 30px;
+    text-decoration: none;
+    font-size: 1.2rem;
+    border-radius: 8px;
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+.home-button:hover {
+    background-color: #0056b3;
+    transform: scale(1.1);
+}
+
 footer {
     text-align: center;
     padding: 10px;
     color: #ffffff;
     margin-top: auto;
     opacity: 0;
     animation: fadeInText 4s forwards;
-    animation-delay: 3s;
+    animation-delay: 4s;
 }
 
 @keyframes fadeInText {