Simple 404 Page HTML Template

Simple 404 Page HTML Template
Code Snippet:Ripped 404 Page Animation
Author: Jon Kantner
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 1,377
License: MIT
Edit Code online: View on CodePen
Read More

This HTML & CSS template helps you to create a 404 error page with a torn paper effect. It uses HTML and CSS to display a paper graphic with a 404 message and a “Go Back Home” link. This template adds a visually appealing and user-friendly 404 error page to your website.

You can use this code for your website to create a custom and visually engaging 404 error page. It enhances user experience by offering a more appealing and informative way to handle broken links or missing pages.

How to Create a Simple 404 Page Using HTML and CSS

1. First of all, load the Google Fonts by adding the following CDN link into the head tag of your HTML document.

<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&amp;display=swap'>

2. Paste the HTML code inside the <body> of your HTML file where you want the 404 error page to appear. Modify the content to match your website’s branding, such as changing the “Go Back Home” link or the error message.

<main>
	<div>
		<svg class="paper" viewBox="0 0 300 300" width="300px" height="300px" role="img" aria-label="A piece of paper torn in half">
			<g class="paper__outline" fill="none" stroke="hsl(0,10%,10%)" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" transform="translate(61,4)">
				<g class="paper__top" transform="translate(0,25)">
					<polygon class="paper__shadow" fill="hsl(0,10%,70%)" stroke="none" points="0 148,0 0,137 0,187 50,187 148,155 138,124 148,93 138,62 148,31 138" transform="translate(-12,12)" />
					<rect class="paper__tear-fill" fill="hsl(0,0%,100%)" stroke="none" x="0" y="137" width="0" height="23px" />
					<polygon class="paper__fill" fill="hsl(0,0%,100%)" stroke="none" points="0 148,0 0,137 0,187 50,187 148,155 138,124 148,93 138,62 148,31 138" />
					<polygon class="paper__shadow" fill="hsl(0,10%,70%)" stroke="none" points="137 0,132 55,187 50,142 45" />
					<polyline points="137 0,142 45,187 50" />
					<polyline points="0 148,0 0,137 0,187 50,187 148" />
					<g class="paper__lines" stroke="hsl(0,10%,70%)">
						<polyline points="22 88,165 88" />
						<polyline points="22 110,165 110" />
						<polyline points="22 132,165 132" />
					</g>
					<polyline class="paper__tear" points="0 148,31 138,62 148,93 138,124 148,155 138,187 148" stroke-dasharray="198 198" stroke-dashoffset="-198" />
				</g>
				<g class="paper__bottom" transform="translate(0,25)">
					<polygon class="paper__shadow" fill="hsl(0,10%,70%)" stroke="none" points="0 148,31 138,62 148,93 138,124 148,155 138,187 148,187 242,0 242" transform="translate(-12,12)" />
					<polygon class="paper__fill" fill="hsl(0,0%,100%)" stroke="none" points="0 148,31 140,62 148,93 138,124 148,155 138,187 148,187 242,0 242" />
					<polyline points="187 148,187 242,0 242,0 148" />
					<g class="paper__lines" stroke="hsl(0,10%,70%)">
						<polyline points="22 154,165 154" />
						<polyline points="22 176,165 176" />
						<polyline points="22 198,94 198" />
					</g>
					<polyline class="paper__tear" points="0 148,31 138,62 148,93 138,124 148,155 138,187 148" stroke-dasharray="198 198" stroke-dashoffset="-198" />
				</g>
			</g>
		</svg>
	</div>
	<div>
		<h1>404</h1>
		<p>We couldn’t find the page you were looking for. It may have been moved, or it just doesn’t exist.</p>
		<a class="btn-link" href="#">Go Back Home</a>
	</div>
</main>

3. Add the CSS code to your website’s CSS file or include it directly in the HTML file within a <style> tag. You can easily customize the color scheme given in the root variables.

* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--bg: hsl(var(--hue),10%,90%);
	--fg: hsl(var(--hue),10%,10%);
	--primary: hsl(var(--hue),90%,45%);
	--primary-down: hsl(var(--hue),90%,65%);
	--trans-dur: 0.3s;
	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
}
body {
	background-color: var(--bg);
	color: var(--fg);
	display: flex;
	font: 1em/1.5 Nunito, sans-serif;
	height: 100vh;
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur);
}
main {
	display: grid;
	grid-gap: 3em 1.5em;
	margin: auto;
	max-width: 40em;
	padding: 3em 0;
	text-align: center;
	width: calc(100% - 3em);
}
h1 {
	font-size: 3em;
	line-height: 1;
	margin: 0 0 1.5rem;
}
p {
	margin: 0 0 1.5em;
}
.btn-link {
	background: var(--primary);
	border-radius: 1.5em;
	display: inline-block;
	outline: transparent;
	padding: 0.75em 1.5em;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s linear;
}
.btn-link,
.btn-link:visited {
	color: hsl(0,0%,100%);
}
.btn-link:focus-visible,
.btn-link:hover {
	background: var(--primary-down);
}
.btn-link:hover {
	text-decoration: none;
}
.paper {
	display: block;
	margin: auto;
	overflow: visible;
	width: 100%;
	max-width: 224px;
	height: auto;
}
.paper__fill {
	fill: hsl(0,0%,100%);
}
.paper__outline,
.paper__lines {
	transition: stroke var(--trans-dur);
}
.paper__outline {
	stroke: hsl(var(--hue),10%,10%);
}
.paper__lines {
	stroke: hsl(var(--hue),10%,70%);
}
.paper__shadow {
	fill: hsl(var(--hue),10%,70%);
	transition: fill var(--trans-dur);
}
.paper__top,
.paper__bottom,
.paper__tear,
.paper__tear-fill {
	animation: paperTop 1.25s cubic-bezier(0.77,0,0.18,1);
}
.paper__top,
.paper__bottom {
	transform-origin: 0 148px;
	transition: transform var(--trans-dur) cubic-bezier(0.77,0,0.18,1);
}
.paper__top {
	transform: translate(0,8px);
}
.paper__bottom {
	animation-name: paperBottom;
	transform: translate(0,42px);
}
.paper__tear,
.paper__tear-fill {
	animation-timing-function: cubic-bezier(0.32,0,0.67,0);
}
.paper__tear {
	animation-name: paperTear;
	stroke-dashoffset: 0;
}
.paper__tear-fill {
	animation-name: paperTearFill;
}
.paper__outline:hover .paper__top,
.paper__outline:hover .paper__bottom {
	transform: translate(0,25px);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),10%,25%);
		--fg: hsl(var(--hue),10%,90%);
	}
	.paper__shadow:first-child {
		fill: hsl(var(--hue),10%,15%);
	}
}

/* Beyond mobile */
@media (min-width: 768px) {
	main {
		grid-template-columns: 1fr 2fr;
		align-items: center;
		text-align: left;
	}
	.paper {
		max-width: 300px;
	}
}

/* Animations */
@keyframes paperTop {
	from,
	40% {
		animation-timing-function: cubic-bezier(0.32,0,0.67,0);
		transform: translate(0,25px) rotate(0);
		transform-origin: 61px 148px;
	}
	70% {
		animation-timing-function: cubic-bezier(0.33,1,0.67,1.5);
		transform: translate(0,25px) rotate(-5deg);
		transform-origin: 61px 148px;
	}
	to {
		transform: translate(0,8px) rotate(0);
		transform-origin: 0 148px;
	}
}
@keyframes paperBottom {
	from,
	40% {
		animation-timing-function: cubic-bezier(0.32,0,0.67,0);
		transform: translate(0,25px) rotate(0);
		transform-origin: 61px 148px;
	}
	70% {
		animation-timing-function: cubic-bezier(0.33,1,0.67,1.5);
		transform: translate(0,25px) rotate(5deg);
		transform-origin: 61px 148px;
	}
	to {
		transform: translate(0,42px) rotate(0);
		transform-origin: 0 148px;
	}
}
@keyframes paperTear {
	from,
	40% {
		stroke-dashoffset: -198;
	}
	70%,
	to {
		stroke-dashoffset: 0;
	}
}
@keyframes paperTearFill {
	from,
	40% {
		width: 187px;
	}
	70%,
	to {
		width: 0;
	}
}

That’s all! hopefully, you have successfully integrated this simple 404 Page HTML template into your website. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X