Update pagenotfound

PalisadoesFoundation · Dec 21, 2024 · 76be1de · 76be1de
1 parent b1f4903
commit 76be1de
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 111 deletions.
diff --git a/src/screens/PageNotFound/PageNotFound.module.css b/src/screens/PageNotFound/PageNotFound.module.css
diff --git a/src/screens/PageNotFound/PageNotFound.tsx b/src/screens/PageNotFound/PageNotFound.tsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import useLocalStorage from 'utils/useLocalstorage';
 
-import styles from './PageNotFound.module.css';
+import styles from '../../style/app.module.css'
 import Logo from 'assets/images/talawa-logo-600x600.png';
 
 /**
@@ -28,7 +28,7 @@ const PageNotFound = (): JSX.Element => {
   const adminFor = getItem('AdminFor');
 
   return (
-    <section className={styles.notfound}>
+    <section className={styles.pageNotFound}>
       <div className="container text-center">
         <div className="brand">
           <img src={Logo} alt="Logo" className="img-fluid" />

diff --git a/src/style/app.module.css b/src/style/app.module.css
@@ -539,6 +539,116 @@ hr {
   color: var(--bs-primary) !important;
 }
 
+.pageNotFound {
+  position: relative;
+  bottom: 20px;
+}
+
+.pageNotFound h3 {
+  font-family: 'Roboto', sans-serif;
+  font-weight: normal;
+  letter-spacing: 1px;
+}
+
+.pageNotFound .brand span {
+  margin-top: 50px;
+  font-size: 40px;
+}
+.pageNotFound .brand h3 {
+  font-weight: 300;
+  margin: 10px 0 0 0;
+}
+.pageNotFound h1.head {
+  font-size: 250px;
+  font-weight: 900;
+  color: #31bb6b;
+  letter-spacing: 25px;
+  margin: 10px 0 0 0;
+}
+.pageNotFound h1.head span {
+  position: relative;
+  display: inline-block;
+}
+.pageNotFound h1.head span:before,
+.pageNotFound h1.head span:after {
+  position: absolute;
+  top: 50%;
+  width: 50%;
+  height: 1px;
+  background: #fff;
+  content: '';
+}
+.pageNotFound h1.head span:before {
+  left: -55%;
+}
+.pageNotFound h1.head span:after {
+  right: -55%;
+}
+
+@media (max-width: 1024px) {
+  .pageNotFound h1.head {
+    font-size: 200px;
+    letter-spacing: 25px;
+  }
+}
+
+@media (max-width: 768px) {
+  .pageNotFound h1.head {
+    font-size: 150px;
+    letter-spacing: 25px;
+  }
+}
+
+@media (max-width: 640px) {
+  .pageNotFound h1.head {
+    font-size: 150px;
+    letter-spacing: 0;
+  }
+}
+
+@media (max-width: 480px) {
+  .pageNotFound .brand h3 {
+    font-size: 20px;
+  }
+  .pageNotFound h1.head {
+    font-size: 130px;
+    letter-spacing: 0;
+  }
+  .pageNotFound h1.head span:before,
+  .pageNotFound h1.head span:after {
+    width: 40%;
+  }
+  .pageNotFound h1.head span:before {
+    left: -45%;
+  }
+  .pageNotFound h1.head span:after {
+    right: -45%;
+  }
+  .pageNotFound p {
+    font-size: 18px;
+  }
+}
+
+@media (max-width: 320px) {
+  .pageNotFound .brand h3 {
+    font-size: 16px;
+  }
+  .pageNotFound h1.head {
+    font-size: 100px;
+    letter-spacing: 0;
+  }
+  .pageNotFound h1.head span:before,
+  .pageNotFound h1.head span:after {
+    width: 25%;
+  }
+  .pageNotFound h1.head span:before {
+    left: -30%;
+  }
+  .pageNotFound h1.head span:after {
+    right: -30%;
+  }
+}
+
 @media (max-width: 520px) {
   .btnsContainer {
     margin-bottom: 0;