Merge pull request #1227 from Aman-G-upta/gh-pages

Enhanced the ui of 404 page
recodehive · Nov 6, 2024 · c744346 · c744346
2 parents 85f0b2a + d040054
commit c744346
Showing 1 changed file with 67 additions and 55 deletions.
diff --git a/404.html b/404.html
@@ -3,60 +3,72 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>404</title>
-    <style>
-        .sectionA{
-            font-family: Familjen Grotesk, sans-serif;
-            font-size: 250px;
-            text-align: center;
-            /* margin-top: 10%; */
-            font-weight: bold;
+    <title>404 PAGE</title>
+    <link rel="shortcut icon" href="./assets/images/favicon2.webp" type="image/png" />
+<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Arvo'>
+<style>
+
+.page_404{ padding:40px 0; background:#fff; font-family: 'Arvo', serif;
+}
 
-        }
-        .sectionAa{
-            font-family: Familjen Grotesk, sans-serif;
-            font-size: 50px;
-            text-align: center;
-            font-weight: bold;
-        }
-        .sectionAb{
-            font-family: Familjen Grotesk, sans-serif;
-            font-size: 20px;
-            text-align: center;
-            margin-top: 5%;
-            color: grey;
-        }
-        .greenbutton{
-            font-family: Familjen Grotesk, sans-serif;
-            font-size: 20px;
-            text-align: center;
-            font-weight: bold;
-            color: white;
-            background-color: rgb(2, 56, 2);
-            padding: 10px 20px;
-            border-radius: 10px;
-            margin: 35% 35%;
-            margin-top: 5%;
-        }
-        footer a{
-            margin-top: -25%;
-            font-family: Familjen Grotesk, sans-serif;
-            display: flex;
-            justify-content: center;
-            text-decoration: none;
-            color: black;
-        }
-    </style>
-</head>
-<body>
-    <div class="container-fluid">
-        <div class="sectionA">404</div>
-        <div class="sectionAa">Page Not Found</div>
-        <div class="sectionAb">The page you are looking for doesn't exist or has been moved</div>
-        <div type="button" class="greenbutton">GO HOME</div>
-    </div>
-    <footer>
-        <a target="_blank" href="https://github.com/vishantrathi">@VISHANT RATHI</a>
-    </footer>
+.page_404  img{ width:100%;}
+
+.four_zero_four_bg{
+
+ background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
+    height: 400px;
+    background-position: center;
+ }
+
+
+ .four_zero_four_bg h1{
+ font-size:80px;
+ }
+
+  .four_zero_four_bg h3{
+			 font-size:80px;
+			 }
+
+			 .link_404{			 
+	color: #fff!important;
+    padding: 10px 20px;
+    background: #39ac31;
+    margin: 20px 0;
+    display: inline-block;}
+	.contant_box_404{ margin-top:-50px;}
+</style>
+
+  </head>
+
+  <body>
+
+    <section class="page_404">
+      <div class="container">
+          <div class="row">	
+          <div class="col-sm-12 ">
+          <div class="col-sm-10 col-sm-offset-1  text-center">
+          <div class="four_zero_four_bg">
+              <h1 class="text-center ">404</h1>
+
+
+          </div>
+
+          <div class="contant_box_404">
+          <h3 class="h2">
+          Look like you're lost
+          </h3>
+
+          <p>The page you are looking for not available!</p>
+
+          <a href="/" class="link_404">Go to Home</a>
+      </div>
+          </div>
+          </div>
+          </div>
+      </div>
+  </section>
+
+
 </body>
-</html>
+</html>