From bfd0cc9e856bd3e5b58c24fa3acf97216eec96a7 Mon Sep 17 00:00:00 2001 From: Swapnadip2005 Date: Mon, 27 Jan 2025 21:37:27 +0530 Subject: [PATCH] Add Error404 module and modify App.jsx & index.html --- Frontend/index.html | 35 +++--- .../src/Components/ErrorModule/Error404.jsx | 34 ++++++ .../ErrorModule/Error404.module.css | 113 ++++++++++++++++++ .../ErrorModule/Error404Assests/Arrow.svg | 5 + .../ErrorModule/Error404Assests/Circle.svg | 3 + .../ErrorModule/Error404Assests/Square.svg | 3 + .../ErrorModule/Error404Assests/Triangle.svg | 3 + 7 files changed, 181 insertions(+), 15 deletions(-) create mode 100644 Frontend/src/Components/ErrorModule/Error404.jsx create mode 100644 Frontend/src/Components/ErrorModule/Error404.module.css create mode 100644 Frontend/src/Components/ErrorModule/Error404Assests/Arrow.svg create mode 100644 Frontend/src/Components/ErrorModule/Error404Assests/Circle.svg create mode 100644 Frontend/src/Components/ErrorModule/Error404Assests/Square.svg create mode 100644 Frontend/src/Components/ErrorModule/Error404Assests/Triangle.svg diff --git a/Frontend/index.html b/Frontend/index.html index 027f60a..228b0a2 100644 --- a/Frontend/index.html +++ b/Frontend/index.html @@ -1,18 +1,23 @@ - - - - - - - - WallGodds - - -
- - + + + + + + + + + WallGodds + + +
+ + diff --git a/Frontend/src/Components/ErrorModule/Error404.jsx b/Frontend/src/Components/ErrorModule/Error404.jsx new file mode 100644 index 0000000..e4a9378 --- /dev/null +++ b/Frontend/src/Components/ErrorModule/Error404.jsx @@ -0,0 +1,34 @@ +import React from "react"; +import styles from "./Error404.module.css"; +import arrow from "./Error404Assests/Arrow.svg"; +import circle from "./Error404Assests/Circle.svg"; +import triangle from "./Error404Assests/Triangle.svg"; +import square from "./Error404Assests/Square.svg"; + +const Error404 = () => { + return ( +
+
+
+ + + +
+
+
+

404: Is that heaven?

+

+ Sorry, you took a wrong turn at the Pearly Gates. Looks like you're stuck with us mere mortals. Try finding the right path before the angels start gossiping. +

+
+
+
+

Home this way

+ +
+
+
+ ); +}; + +export default Error404; diff --git a/Frontend/src/Components/ErrorModule/Error404.module.css b/Frontend/src/Components/ErrorModule/Error404.module.css new file mode 100644 index 0000000..d3e77df --- /dev/null +++ b/Frontend/src/Components/ErrorModule/Error404.module.css @@ -0,0 +1,113 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html, +body { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; +} + +.container { + background-color: white; + height: 783px; + min-width: 1654px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + border-radius: 30px; + box-shadow: -21px 4px 60.7px 0px #C1C1C1; + margin: 0 20%; + overflow: hidden; +} + +.container_top { + background-color: #008fff; + height: 106px; + width: 100%; + display: flex; + align-items: center; + justify-content: flex-start; +} + +.elements { + display: flex; + align-items: center; + justify-content: flex-start; + margin: 0 4%; + gap: 10px; +} + +.errorCode { + position: relative; + text-align: center; + text-transform: uppercase; + font-family: "Rubik Mono One", serif; + font-weight: 400; + font-style: normal; + font-size: 86px; + line-height: 90.3px; + margin: 3% 0 4% 0; + color: white; + text-shadow: 8px 8px black; + -webkit-text-stroke: 1.5px black; +} + +.errorCode > span { + color: #F8CC06; +} + +.errorMessage { + text-align: center; + font-family: "Comfortaa", sans-serif; + margin: 0 11%; + font-size: 36px; + font-weight: 700; + line-height: 40.14px; + margin: 5% 7%; + padding: 0 2%; + background: -webkit-linear-gradient(right, #FF5959, #2A00FF); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.homeThisWay { + background-color: #DFD1FC; + border-radius: 10px; + border: 1px solid #000000; + margin: 2% 0 0 0; + height: 120px; + width: 803px; + display: flex; + align-items: center; + cursor: pointer; +} + +.homeMessage { + width: 100%; + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.homeMessage > h1 { + text-align: center; + text-transform: uppercase; + font-family: "Rubik Mono One", serif; + font-weight: 400; + font-style: normal; + font-size: 55px; + color: white; + text-shadow: 6px 6px black; + -webkit-text-stroke: 1.5px black; +} + +.homeMessage > h1 > span { + color: #F8CC06; +} \ No newline at end of file diff --git a/Frontend/src/Components/ErrorModule/Error404Assests/Arrow.svg b/Frontend/src/Components/ErrorModule/Error404Assests/Arrow.svg new file mode 100644 index 0000000..db59be3 --- /dev/null +++ b/Frontend/src/Components/ErrorModule/Error404Assests/Arrow.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/Frontend/src/Components/ErrorModule/Error404Assests/Circle.svg b/Frontend/src/Components/ErrorModule/Error404Assests/Circle.svg new file mode 100644 index 0000000..5859af4 --- /dev/null +++ b/Frontend/src/Components/ErrorModule/Error404Assests/Circle.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/Frontend/src/Components/ErrorModule/Error404Assests/Square.svg b/Frontend/src/Components/ErrorModule/Error404Assests/Square.svg new file mode 100644 index 0000000..60ca22e --- /dev/null +++ b/Frontend/src/Components/ErrorModule/Error404Assests/Square.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/Frontend/src/Components/ErrorModule/Error404Assests/Triangle.svg b/Frontend/src/Components/ErrorModule/Error404Assests/Triangle.svg new file mode 100644 index 0000000..e944bfc --- /dev/null +++ b/Frontend/src/Components/ErrorModule/Error404Assests/Triangle.svg @@ -0,0 +1,3 @@ + + +