Added Mobile view error page

Parnab03 · Mar 1, 2025 · d2d84d0 · d2d84d0
1 parent 161bcd1
commit d2d84d0
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 2 deletions.
diff --git a/Frontend/public/BACKGROUND-DARK-MOBILE.svg b/Frontend/public/BACKGROUND-DARK-MOBILE.svg
diff --git a/Frontend/public/BACKGROUND-MOBILE.svg b/Frontend/public/BACKGROUND-MOBILE.svg
diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx
@@ -5,6 +5,7 @@ import "./App.css";
 import Home from "./Components/HomeModule/Home";
 import Upload from "./Components/UploadModule/Upload";
 import Aboutus from "./Components/AboutModule/Aboutus";
+import Error404 from "./Components/ErrorModule/Error404";
 
 function App() {
     return (
@@ -14,6 +15,7 @@ function App() {
                 <Route path="/gallery/*" element={<Gallery />} />
                 <Route path="/upload" element={<Upload />} />
                 <Route path="/aboutus" element={<Aboutus />} />
+                <Route path="/error" element={<Error404 />} />
             </Routes>
         </Router>
     );

diff --git a/Frontend/src/Components/ErrorModule/Error404.jsx b/Frontend/src/Components/ErrorModule/Error404.jsx
@@ -7,6 +7,7 @@ import square from "./Error404Assests/Square.svg";
 
 const Error404 = () => {
   return (
+    <div className={styles.big_container}>
     <div className={styles.container}>
       <div className={styles.container_top}>
         <div className={styles.elements}>
@@ -29,6 +30,7 @@ const Error404 = () => {
       </div>
       <button className={styles.pageNotFound}>Page Not Found</button>
     </div>
+    </div>
   );
 };
 

diff --git a/Frontend/src/Components/ErrorModule/Error404.module.css b/Frontend/src/Components/ErrorModule/Error404.module.css
@@ -13,9 +13,15 @@ body {
   width: 100%;
 }
 
+.big_container{
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
 .container {
   position: relative;
-  background-color: white;
+  background-color: white;      /* #f8f9fa */
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -68,7 +74,6 @@ body {
 .errorMessage {
   text-align: center;
   font-family: "Comfortaa", sans-serif;
-  margin: 0 11%;
   font-size: 23px;
   font-weight: 700;
   margin: 3% 7%;
@@ -165,4 +170,58 @@ body {
     font-size: 0.6rem;
     bottom: -40px;
   }
+}
+
+@media (max-width: 426px) {
+  body{
+    background-image: url("../BACKGROUND-MOBILE.svg");
+    background-size: cover;
+  }
+  .big_container{
+    height:100vh;
+    justify-content: center;
+  }
+  .container{
+    border-radius: 7px;
+  }
+  .container_top {
+    height: 30px;
+    border-radius: 7px 7px 0 0;
+  }
+  .elements {
+    gap: 7px;
+    margin: 9px;
+  }
+  .elements > img {
+    width: 20px;
+  }
+  .errorCode {
+    padding: 15px 2.5px;
+    font-size: 40px;
+    text-shadow: 5px 4px black;
+  }
+  .errorMessage {
+    font-size: 15px;
+    padding: 0 4px;
+    margin: 0 7%;
+  }
+  .homeThisWay{
+    border-radius: 0;
+    margin: 4rem 0;
+  }
+  .homeMessage {
+    gap: 5px;
+  }
+  .homeMessage > img {
+    width: 25px;
+  }
+  .homeMessage > h1 {
+    font-size: 15px;
+    text-shadow: 0.025px black;
+  }
+  .pageNotFound {
+    border-radius: 8px;
+    font-size: 0.6rem;
+    bottom: -40px;
+  }
 }