Merge pull request #282 from r7projects-shayan/main

Added error 404 page
jfmartinz · May 17, 2024 · e1ad43a · e1ad43a
2 parents 0066fd5 + 6e56230
commit e1ad43a
Show file tree

Hide file tree

Showing 2 changed files with 213 additions and 0 deletions.
diff --git a/Error.html b/Error.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>404 Error Page</title>
+    <link rel="stylesheet" href="error_styles.css">
+</head>
+
+<body>
+    <div class="wrapper">
+        <div class="container">
+            <div class="title glitch" data-text="404">404</div>
+            <div class="description glitch" data-text="PAGE NOT FOUND">PAGE NOT FOUND</div>
+        </div>
+        <div class="button-container">
+            <button class="button" onclick="returnHome()">Return Home</button>
+        </div>
+    </div>
+
+    <script>
+        function returnHome() {
+            document.body.classList.add('fade-out');
+            setTimeout(() => {
+                window.location.href = "https://github.com/jfmartinz/ResourceHub";
+            }, 200);
+        }
+    </script>
+</body>
+
+</html>
diff --git a/error_styles.css b/error_styles.css
@@ -0,0 +1,181 @@
+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&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;
+}
+
+.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;
+}
+
+/* /* Media Queries */
+/* @media (min-width: 768px) {
+    .title {
+        font-size: 10vw;
+    }
+    
+    .description {
+        font-size: 4vw;
+    }
+} */ */