diff --git a/frontend/components/HomeSection/HomeSection.style.js b/frontend/components/HomeSection/HomeSection.style.js
index 4090455..5e14c88 100644
--- a/frontend/components/HomeSection/HomeSection.style.js
+++ b/frontend/components/HomeSection/HomeSection.style.js
@@ -10,7 +10,5 @@ export default styled.section`
justify-content: center;
align-items: center;
flex-direction: column;
- .title{display: flex;
- margin-bottom:0.5rem;}
}
`
diff --git a/frontend/pages/404.js b/frontend/pages/404.js
index 022b208..d96b938 100644
--- a/frontend/pages/404.js
+++ b/frontend/pages/404.js
@@ -1,19 +1,55 @@
-import { urlAlphabet } from 'nanoid'
import React from 'react'
+import { motion } from 'framer-motion'
+import Head from 'next/head'
+
+const eyevariable = {
+ visible: {
+ x: [-2.3, 2.3],
+ transition: {
+ yoyo: Infinity,
+ duration: 0.7,
+ ease: 'easeInOut'
+ }
+ }
+}
const NotFound = () => {
return (
-
-
-
404 Not Found
-
The page you are looking for is not available
-
-
-
+ <>
+
+
+
+
+
+
+
+
+
+
+
404
+
Ouch.. Something's Wrong.. Maybe.. We have SOLUTION HERE
+
My Bad this page couldn't be found.
+
RETURN HOME
+
+
+
>
+
)
}
diff --git a/frontend/pages/index.js b/frontend/pages/index.js
index 07c2032..d144f35 100644
--- a/frontend/pages/index.js
+++ b/frontend/pages/index.js
@@ -15,9 +15,6 @@ export default function Home() {
URL MiniFy
-
-
-
diff --git a/frontend/styles/404.css b/frontend/styles/404.css
index 753c9cc..7d6126b 100644
--- a/frontend/styles/404.css
+++ b/frontend/styles/404.css
@@ -1,46 +1,177 @@
-.Box {
+body {
+ background: rgba(148, 187, 187, 0.788);
+}
+.FourOhFour {
+ font-family: 'Cabin Sketch', cursive;
+ font-size: 90px;
+ line-height: 80px;
+ animation: color_change 0.1s infinite alternate,
+ opacity 1.3s infinite alternate;
+ font-weight: bold;
+}
+.Maybe {
+ font-size: 17px;
+}
+.wrapper {
+ width: 500px;
+ height: 480px;
position: absolute;
- background: rgb(231, 231, 231);
- top: 0;
+ top: 13%;
left: 0;
+ right: 0;
+ margin-left: auto;
+ margin-right: auto;
+ overflow: hidden;
+ box-shadow: -4px 12px 0px -6px rgba(0, 0, 0, 0.6);
+}
+
+@keyframes opacity {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes color_change {
+ from {
+ color: black;
+ }
+ to {
+ color: #ff0000;
+ }
+}
+
+.TextHolder {
+ position: absolute;
+ bottom: 0;
+ height: 280px;
+ overflow: hidden;
+}
+
+.robot {
+ position: absolute;
+ right: 18%;
+}
+
+.TextHolder:after {
+ content: '';
+ position: absolute;
+ z-index: 1;
+ bottom: 9px;
+ left: 8px;
+ width: 96%;
+ height: 260px;
+ border: solid #ff0000 3px;
+}
+
+.TextHolder:before {
+ content: '';
+ position: absolute;
width: 100%;
- height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 1.3rem;
- padding: 15px;
+ height: 280px;
+ background-color: #fff;
}
-.Box2 {
- display: flex;
- justify-content: center;
- flex-direction: column;
- align-items: center;
+.Texts {
+ font-family: 'Share Tech Mono', monospace;
+ position: relative;
+ z-index: 2;
+ bottom: 0;
+ left: 0;
+ width: 90%;
+ height: 90%;
+ overflow: hidden;
+ margin: 1% auto;
+ text-align: center;
+ padding: 10px;
+ font-size: 30px;
+ line-height: 37px;
+ font-weight: bold;
+}
+.Bad {
+ font-size: 20px;
}
-.P1 {
- font-size: 55px;
- color: #16a085;
+.prob {
+ padding-top: 2px;
+ padding-bottom: 2px;
+ white-space: nowrap;
+ font-size: 30px;
+ background: #f6ba3f;
+ padding-left: 25px;
+ padding-right: 25px;
+ border-radius: 30px;
+ overflow: hidden;
+ width: 70px;
+ color: rgb(0, 0, 0);
+ position: relative;
}
-.P2 {
- color: #16a085;
+.prob:after {
+ content: '';
+ position: absolute;
+ width: 200px;
+ height: 78%;
+ left: 5px;
+ top: 2px;
+ opacity: 0.8;
+ padding-left: 25px;
+ padding-right: 25px;
+ border-radius: 30px;
+ border: solid 2px rgb(0, 0, 0);
}
-.Button {
- width: 55%;
- padding: 13px;
- margin-top: 20px;
- border-radius: 10px;
- box-shadow: none;
- border: none;
- background: #16a085;
+.Return {
+ padding-top: 2px;
+ padding-bottom: 2px;
font-size: 25px;
+ background: green;
+ padding-left: 26px;
+ color: #fff;
+ padding-right: 23px;
+ border-radius: 30px;
+ overflow: hidden;
+ position: relative;
+ margin: 0 auto;
+ z-index: 2;
+ border-color: none;
}
-.Take-me-back {
- text-decoration: none;
- color: white;
- font-family: monospace;
+.Return:after {
+ content: '';
+ position: absolute;
+ width: 137px;
+ height: 75%;
+ left: 3.5px;
+ top: 2px;
+ opacity: 0.6;
+ padding-left: 25px;
+ padding-right: 25px;
+ border-radius: 30px;
+ border: solid 2px #fff;
+}
+
+.Return:hover {
+ font-size: 30px;
+ transition: all 0.4s ease;
+}
+.Return:hover::after {
+ width: 166px;
+ transition: all 0.4s ease;
+}
+#righthand {
+ animation: swing 1.3s ease-in-out infinite alternate;
+ transform-box: fill-box;
+ transform-origin: top;
+}
+
+@keyframes swing {
+ 0% {
+ transform: rotate(180deg);
+ }
+ 100% {
+ transform: (45deg);
+ }
}