Merge pull request #110 from 404-Terror/feat#86
Modified the 404 page(#103)
This commit is contained in:
commit
aabc146c43
|
@ -10,7 +10,5 @@ export default styled.section`
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
.title{display: flex;
|
|
||||||
margin-bottom:0.5rem;}
|
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
|
@ -1,19 +1,55 @@
|
||||||
import { urlAlphabet } from 'nanoid'
|
|
||||||
import React from 'react'
|
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 = () => {
|
const NotFound = () => {
|
||||||
return (
|
return (
|
||||||
<div className="Box">
|
<>
|
||||||
<div className="Box2">
|
<Head>
|
||||||
<p className="P1">404 Not Found</p>
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<p className="P2">The page you are looking for is not available</p>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<button className="Button">
|
<link href="https://fonts.googleapis.com/css2?family=BioRhyme&family=Cabin+Sketch:wght@700&family=IBM+Plex+Serif:ital@1&family=Monoton&family=Montserrat+Alternates:wght@500&family=Open+Sans:wght@300&family=Share+Tech+Mono&family=Special+Elite&display=swap" rel="stylesheet" />
|
||||||
<a className="Take-me-back" href="/">
|
</Head>
|
||||||
Take me back!
|
<main><div className="wrapper">
|
||||||
</a>
|
<div className="robot"><svg xmlns="http://www.w3.org/2000/svg" height="300" width="300" viewBox="0 0 50 50">
|
||||||
</button>
|
<symbol id="New_Symbol_14" viewBox="-6.5 -6.5 13 13">
|
||||||
</div>
|
<path fill="#ffd4c3" stroke="#504b46" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M0-6c2.2 0 4.1 1.5 4.7 3.5C6.3-2.5 6.4 0 5 0v1c0 2.8-2.2 5-5 5s-5-2.2-5-5V0c-1.4 0-1.3-2.5.2-2.5C-4.1-4.5-2.2-6 0-6z" /><circle cx="-1.6" cy="-.1" r=".1" fill="#ffc258" />
|
||||||
</div>
|
<path fill="#4f4b45" d="M-1.6.5c-.3 0-.6-.3-.6-.6s.2-.7.6-.7c.3 0 .6.3.6.7s-.3.6-.6.6z" /><circle cx="1.6" cy="-.1" r=".1" fill="#ffc258" />
|
||||||
|
<path fill="#4f4b45" d="M1.6.5C1.3.5 1 .2 1-.1s.3-.6.6-.6.6.3.6.6-.2.6-.6.6z" /><circle cx="-3" cy="-1.5" r=".5" fill="#fabfa5" /><circle cx="3" cy="-1.5" r=".5" fill="#fabfa5" />
|
||||||
|
<path fill="none" stroke="#504b46" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M-1.2-3c.8-.5 1.7-.5 2.5 0" /></symbol><g id="Icons"><g id="XMLID_725_"><ellipse id="XMLID_1186_" cx="24" cy="45.5" fill="black" opacity=".15" rx="19.5" ry="1.5" />
|
||||||
|
<path id="XMLID_1191_" fill="#D1D1D1" d="M42 40.5c0 2.2-1.8 4-4 4H10c-2.2 0-4-1.8-4-4V27c0-9.9 8.1-18 18-18s18 8.1 18 18v13.5z" />
|
||||||
|
<path id="XMLID_1190_" fill="#fff" d="M24 9C14.1 9 6 17.1 6 27v5c0-9.9 8.1-18 18-18s18 8.1 18 18v-5c0-9.9-8.1-18-18-18z" />
|
||||||
|
<path id="XMLID_1189_" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M42 40.5c0 2.2-1.8 4-4 4H10c-2.2 0-4-1.8-4-4V27c0-9.9 8.1-18 18-18s18 8.1 18 18v13.5z" />
|
||||||
|
<path id="XMLID_1188_" fill="#c0dceb" d="M30.5 44c0 1.1-.9 2-2 2h-9c-1.1 0-2-.9-2-2v-8c0-1.1.9-2 2-2h9c1.1 0 2 .9 2 2v8z" />
|
||||||
|
<path id="XMLID_1187_" fill="#adc4d9" d="M17.5 38.5h13v2h-13z" />
|
||||||
|
<path id="righthand" fill="#6D8299" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M45.5 36.5l-3.5 2V26l3.5 2z" />
|
||||||
|
<path id="lefthand" fill="#6D8299" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M2.5 36.5l3.5 2V26l-3.5 2z" />
|
||||||
|
<g><path id="XMLID_1183_" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M24 9c.2-1 2.5-8 10.5-6.7" /><circle id="XMLID_1182_" cx="36" cy="3.5" r="2.5" fill="#ff6242" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" /></g>
|
||||||
|
<path id="XMLID_1181_" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M30.5 44c0 1.1-.9 2-2 2h-9c-1.1 0-2-.9-2-2v-8c0-1.1.9-2 2-2h9c1.1 0 2 .9 2 2v8z" />
|
||||||
|
<path id="XMLID_1180_" fill="#ff6242" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M30.5 38.5h-13V36c0-1.1.9-2 2-2h9c1.1 0 2 .9 2 2v2.5z" />
|
||||||
|
<path id="XMLID_1179_" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M33.5 11.8C30.7 10.1 27.5 9 24 9s-6.7 1-9.5 2.7V24h19V11.8z" /><circle id="XMLID_1178_" cx="32.5" cy="25" r="5" fill="#00dfeb" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" /><motion.circle id="eyes" variants={eyevariable} animate="visible" cx="32.5" cy="25" r="2" fill="#627b8c" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" /><circle id="XMLID_1176_" cx="15.5" cy="25" r="5" fill="#00dfeb" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" /><motion.circle id="eyes" variants={eyevariable} animate="visible" cx="15.5" cy="25" r="2" fill="#627b8c" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" /></g></g></svg>
|
||||||
|
</div>
|
||||||
|
<div className="TextHolder">
|
||||||
|
<div className="Texts">
|
||||||
|
<div className="FourOhFour">404</div>
|
||||||
|
<div className="Maybe">Ouch.. Something's Wrong.. Maybe.. We have <span className="prob">SOLUTION HERE</span></div>
|
||||||
|
<div className="Bad">My Bad this page couldn't be found.</div>
|
||||||
|
<a href="./" className="Return">RETURN HOME</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div></main></>
|
||||||
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -15,9 +15,6 @@ export default function Home() {
|
||||||
<Head>
|
<Head>
|
||||||
<title>URL MiniFy</title>
|
<title>URL MiniFy</title>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=BioRhyme&family=Montserrat+Alternates:wght@500&family=Open+Sans:wght@300&display=swap" rel="stylesheet" />
|
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<main className={'main-bg'}>
|
<main className={'main-bg'}>
|
||||||
|
|
|
@ -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;
|
position: absolute;
|
||||||
background: rgb(231, 231, 231);
|
top: 13%;
|
||||||
top: 0;
|
|
||||||
left: 0;
|
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%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 280px;
|
||||||
display: flex;
|
background-color: #fff;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
padding: 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.Box2 {
|
.Texts {
|
||||||
display: flex;
|
font-family: 'Share Tech Mono', monospace;
|
||||||
justify-content: center;
|
position: relative;
|
||||||
flex-direction: column;
|
z-index: 2;
|
||||||
align-items: center;
|
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 {
|
.prob {
|
||||||
font-size: 55px;
|
padding-top: 2px;
|
||||||
color: #16a085;
|
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 {
|
.prob:after {
|
||||||
color: #16a085;
|
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 {
|
.Return {
|
||||||
width: 55%;
|
padding-top: 2px;
|
||||||
padding: 13px;
|
padding-bottom: 2px;
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: none;
|
|
||||||
border: none;
|
|
||||||
background: #16a085;
|
|
||||||
font-size: 25px;
|
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 {
|
.Return:after {
|
||||||
text-decoration: none;
|
content: '';
|
||||||
color: white;
|
position: absolute;
|
||||||
font-family: monospace;
|
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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue