Added custom 404 page #410

Merged
snedadah merged 12 commits from 404page into main 2022-03-28 14:53:43 -04:00
3 changed files with 54 additions and 0 deletions

1
images/codey-404.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.5 KiB

27
pages/404.module.css Normal file
View File

@ -0,0 +1,27 @@
.container {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: calc(60rem / 16);
}
.codey {
width: calc(380rem / 16);
padding: calc(20rem / 16);
padding-right: 0;
}
.heading {
margin-top: 0;
}
@media only screen and (max-width: calc(768rem / 16)) {
.container {
flex-direction: column;
padding-bottom: calc(30rem / 16);
}
.codey {
padding: calc(20rem / 16) 0;
}
}

26
pages/404.tsx Normal file
View File

@ -0,0 +1,26 @@
import React from "react";
import { Image } from "@/components/Image";
import { Link } from "@/components/Link";
import { Title } from "@/components/Title";
import styles from "./404.module.css";
export default function Custom404() {
return (
<div className={styles.container}>
<div className={styles.text}>
<Title>404: Page Not Found</Title>
<h2>Error 404</h2>
<h1 className={styles.heading}>
We couldnt find the page youre looking for!
</h1>
<p>
<Link href="/">Click here to go back to the main page.</Link>
</p>
</div>
<Image src="images/codey-404.svg" className={styles.codey} />
</div>
);
}