From 0c3606f2ca958767564c072d7412975ae9738391 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Mar 2022 23:05:50 +0530 Subject: [PATCH] Changed 404 page --- .../HomeSection/HomeSection.style.js | 2 - frontend/pages/404.js | 60 ++++-- frontend/pages/index.js | 3 - frontend/styles/404.css | 193 +++++++++++++++--- 4 files changed, 210 insertions(+), 48 deletions(-) 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); + } }