Add 404 page

vouncherstudios · Feb 25, 2024 · 81315ec · 81315ec
1 parent 77bdc01
commit 81315ec
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 1 deletion.
diff --git a/404.html b/404.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>404 &bull; Vouncher Studios</title>
+
+  <meta http-equiv="refresh" content="3; URL='./index.html'" />
+
+  <link rel="shortcut icon" href="./assets/img/logo.ico" type="image/x-icon">
+
+  <link rel="stylesheet" href="./assets/css/particles.css">
+  <link rel="stylesheet" href="./assets/css/style.css">
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
+</head>
+
+<body>
+  <div class="animation-wrapper">
+    <div class="particle particle-1"></div>
+    <div class="particle particle-2"></div>
+    <div class="particle particle-3"></div>
+    <div class="particle particle-4"></div>
+  </div>
+
+  <main>
+    <div class="main-content">
+      <div class="container">
+        <section class="fzf">
+          <div class="fzf-image">
+            <figure class="image-box">
+              <img src="./assets/img/404.png" alt="404 Image" width="80">
+            </figure>
+          </div>
+
+          <h2 class="h2 container-title">Page Not Found</h2>
+          <section class="fzf-text">
+            <p>
+              You are being redirected to home page.
+            </p>
+          </section>
+        </section>
+      </div>
+    </div>
+  </main>
+
+  <script src="./assets/js/script.js"></script>
+</body>
+
+</html>
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -343,6 +343,28 @@ main {
   display: inline-block;
 }
 
+.fzf {
+  margin-bottom: 15px;
+}
+
+.fzf-image {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.fzf-text {
+  color: var(--light-gray);
+  font-size: var(--fs-6);
+  font-weight: var(--fw-300);
+  line-height: 1.6;
+  text-align: center;
+}
+
+.fzf-text p {
+  margin-bottom: 15px;
+}
+
 @media (min-width: 450px) {
   .partners-item {
     min-width: calc(33.33% - 10px);
@@ -425,6 +447,10 @@ main {
   .partner-img {
     border-radius: 16px;
   }
+
+  .fzf-image img {
+    width: 160px;
+  }
 }
 
 @media (min-width: 768px) {
@@ -530,4 +556,8 @@ main {
   .social-list {
     justify-content: center;
   }
+
+  .fzf-image img {
+    width: 200px;
+  }
 }
diff --git a/assets/img/404.png b/assets/img/404.png
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Vouncher Studios</title>
+  <title>Home &bull; Vouncher Studios</title>
 
   <link rel="shortcut icon" href="./assets/img/logo.ico" type="image/x-icon">