Skip to content

Instantly share code, notes, and snippets.

@acidDrain

acidDrain/404.html

Last active June 2, 2022 14:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save acidDrain/da4a5f60185e34965cf76b8bf6ba9ed2 to your computer and use it in GitHub Desktop.
Save acidDrain/da4a5f60185e34965cf76b8bf6ba9ed2 to your computer and use it in GitHub Desktop.
Download ZIP
404 html page and css
Raw
404.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Error 404 (Not Found)</title>
<style>
html {
box-sizing: border-box;
padding: 0;
margin: auto;
font-size: 1.25rem;
max-width: calc(75vw);
}
*,
:after,
:before {
box-sizing: inherit;
}
body {
margin: auto;
line-height: 1.75;
padding: 2rem;
width: 100%;
}
h1 {
font-size: 96px;
line-height: 100%;
letter-spacing -0.01em;
}
h2 {
font-size: 48px;
line-height: 120%;
}
h1,
h2,
h3 {
font-weight: 700;
}
h2,
h3 {
line-height: 120%;
}
h4 {
font-weight: 400;
line-height: 140%;
font-size: 24px;
}
p,
ul,
ol {
color: #1d1d1d;
}
main {
display: grid;
grid: repeat(2, calc(25vh)) / auto-flow;
margin: auto;
row-gap: calc(1vh);
width: 100%;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Lato, Helvetica, Arial, sans-serif;
}
main>h1 {
margin: auto;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Lato, Helvetica, Arial, sans-serif;
}
main>p {
margin: auto;
}
</style>
</head>
<body>
<main>
<h1>404</h1>
<p>The requested URL was not found.</p>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment