From dda7d7ce9063504d32251f9d81e6afad8dd6c0e6 Mon Sep 17 00:00:00 2001
From: Valerie <valerie@mysty.one>
Date: Sat, 16 Nov 2024 11:35:20 -0500
Subject: [PATCH] add 404 page

---
 layouts/404.html | 189 ++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 179 insertions(+), 10 deletions(-)
diff --git a/layouts/404.html b/layouts/404.html
index 31f40de..5d2d89a 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,10 +1,179 @@
-<main>
-    <div class="about">
-      <div class="bgbox">
-        <p>404</p>
-        <p>Page not found, Meaning it either does not exist or is broken.</p>
-        <div>
-      </div>
-    </div>
-  </main>
-  
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>404 - Page Not Found</title>
+  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: 'Press Start 2P', cursive;
+      background-color: #111;
+      color: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      text-align: center;
+      overflow: hidden;
+    }
+
+    .container {
+      max-width: 600px;
+      padding: 20px;
+      position: relative;
+    }
+
+    h1.glitch {
+      font-size: 150px;
+      font-weight: bold;
+      color: #ff00ff;
+      position: relative;
+      text-transform: uppercase;
+      letter-spacing: 8px;
+      display: inline-block;
+      z-index: 2;
+      display: flex;
+      justify-content: center;
+    }
+
+    h1.glitch span {
+      position: relative;
+      display: inline-block;
+      animation: glitch 2s infinite linear alternate-reverse;
+    }
+
+    h1.glitch span::before,
+    h1.glitch span::after {
+      content: attr(data-text);
+      position: absolute;
+      top: 0;
+      left: 0;
+      color: #00ff80;
+      z-index: -1;
+      animation: glitch 2s infinite linear alternate-reverse;
+      transform: translateX(-1px);
+    }
+
+    h1.glitch span::after {
+      color: #ff0080;
+      animation-delay: 1s;
+      transform: translateX(1px);
+    }
+
+    @keyframes glitch {
+      0% {
+        transform: translateX(-5px) skewY(2deg);
+        opacity: 1;
+      }
+      10% {
+        transform: translateX(5px) skewY(-2deg);
+        opacity: 0.9;
+      }
+      20% {
+        transform: translateX(-5px) skewY(3deg);
+        opacity: 0.95;
+      }
+      30% {
+        transform: translateX(5px) skewY(-3deg);
+        opacity: 1;
+      }
+      40% {
+        transform: translateX(-3px) skewY(2deg);
+        opacity: 1;
+      }
+      50% {
+        transform: translateX(5px) skewY(-2deg);
+        opacity: 1;
+      }
+      60% {
+        transform: translateX(-5px) skewY(1deg);
+        opacity: 0.95;
+      }
+      70% {
+        transform: translateX(3px) skewY(-1deg);
+        opacity: 0.9;
+      }
+      80% {
+        transform: translateX(-2px) skewY(2deg);
+        opacity: 1;
+      }
+      90% {
+        transform: translateX(4px) skewY(-1deg);
+        opacity: 0.9;
+      }
+      100% {
+        transform: translateX(-3px) skewY(3deg);
+        opacity: 1;
+      }
+    }
+
+    .letter {
+      animation: fall 4s forwards ease-in-out;
+      display: inline-block;
+    }
+
+    .letter:nth-child(1) {
+      animation-delay: 0.2s;
+    }
+    .letter:nth-child(2) {
+      animation-delay: 0.4s;
+    }
+    .letter:nth-child(3) {
+      animation-delay: 0.6s;
+    }
+    .letter:nth-child(4) {
+      animation-delay: 0.8s;
+    }
+
+    @keyframes fall {
+      0% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+      100% {
+        transform: translateY(100px);
+        opacity: 0;
+      }
+    }
+
+    p {
+      font-size: 18px;
+      margin-top: 20px;
+      color: #ccc;
+    }
+
+    a {
+      display: inline-block;
+      margin-top: 20px;
+      padding: 10px 20px;
+      background-color: #ff0080;
+      color: white;
+      text-decoration: none;
+      border-radius: 5px;
+      transition: background-color 0.3s;
+    }
+
+    a:hover {
+      background-color: #ff69b4;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1 class="glitch">
+      <span class="letter" data-text="4">4</span>
+      <span class="letter" data-text="0">0</span>
+      <span class="letter" data-text="4">4</span>
+    </h1>
+    <p>Sorry, the page you are looking for either doesn't exist or never has.</p>
+    <a href="/">Return to Home</a>
+  </div>
+</body>
+</html>
