35+ HTML 404 Page Templates - Stackfindover (2022)

Hello, guys in this tutorial we will create an simple 404 error page template using HTML & CSS, and also i have listed best 404 page not found examples which is are available in codepen.

How to create 404 page not found template using HTML & CSS

Step 1: — Creating a New Project

The first thing we’ll do is create a folder that will contain all of the files that make up the project. Create an empty folder on your devices and name it “as you want”.

Open upVisual Studio Codeor any Text editor which is you liked, and create files(index.html, style.css) inside the folder which you have created for404 error page. In the next step, we will start creating the basic structure of the webpage.

Step 2: — Setting Up the basic structure

In this step, we will add the HTML code to create the basic structure of the project.

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>404 Error Page</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta https-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="style.css" /> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head><body> </body></html>

This is the base structure of most web pages that use HTML.

Add the following code inside the<body>tag:

<div class="wrapper"> <div class="container"> <div class="grid-row"> <div class="colmun colmun-left"> <img src="image-left.png" alt="image-left"> <h1 class="px-spc-b-20">We can't find the page you are looking for.</h1> <span class="px-spc-b-20">This page has been relocated or removed.</span> <button class="go-home"><i class="fa fa-home"></i> Go Home</button> </div> <div class="colmun colmun-right"> <img src="right-shape.png" alt="right-shape"> </div> </div> </div></div>

image-leftDownload

right-shapeDownload

Step 3: — Adding Styles for the Classes

In this step, we will add CSS code for style our html elements.

* { padding: 0; margin: 0; outline: 0; color: #444; box-sizing: border-box; font-family: 'IBM Plex Sans', sans-serif;}body { display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden;}h1 { font-size: 50px; line-height: 60px;}span { display: block; font-size: 18px; line-height: 30px;}.container { width: 80%; max-width: 1600px; margin: auto;}.grid-row { display: grid; grid-template-columns: 1fr 1fr; place-items: center; grid-gap: 50px;}.colmun-left { text-align: left;}.colmun-right { text-align: right;}.px-spc-b-20 { padding-bottom: 20px;}button.go-home { padding: 5px 20px; background: #ffa000; border: transparent; border-radius: 2px; box-shadow: 0 0 2px rgb(0 0 0 / 30%); cursor: pointer; margin: 20px 0; color: #fff;}button.go-home i { color: #fff;}img { display: block; width: 100%;}

#Final Result

Best Collection of 404 error page design

#1: 404 Page – Lost In Space

35+ HTML 404 Page Templates - Stackfindover (1)

404 Page – Lost In Space, which was developed bySaleh Riaz Qureshi. Moreover, you can customize it according to your wish and need.

Author:Saleh Riaz Qureshi
Created on:April 23, 2018
Made with:HTML, CSS & JS
DemoLink:Source Code / Demo
Tags:404 Page Lost In Space

#2: 404 SVG animated page concept

35+ HTML 404 Page Templates - Stackfindover (2)

404 SVG animated page concept, which was developed byVolodymyr Hashenko. Moreover, you can customize it according to your wish and need.

Author:Volodymyr Hashenko
Created on:October 7, 2016
Made with:HTML & CSS
DemoLink:Source Code / Demo
Tags:404 SVG animated page concept

#3: Oops! 404 error page template

35+ HTML 404 Page Templates - Stackfindover (3)

Oops 404 error page design, which was developed byIsraa Adnan. Moreover, you can customize it according to your wish and need.

Author:Israa Adnan
Created on:June 30, 2021
Made with:HTML & CSS
DemoLink:Source Code / Demo
Tags:Oops 404 error page template

#4: Simple 404 page error template

35+ HTML 404 Page Templates - Stackfindover (4)

Simple 404 page error template, which was developed byNaved khan. Moreover, you can customize it according to your wish and need.

Author:Naved khan
Created on:June 18, 2018
Made with:HTML & CSS
DemoLink:Source Code / Demo
Tags:Simple 404 page error template

#5: Yeti 404 Page

35+ HTML 404 Page Templates - Stackfindover (5)

Yeti 404 Page, which was developed byDarin. Moreover, you can customize it according to your wish and need.

Author:Darin
Created on:August 17, 2018
Made with:HTML, CSS(SCSS) & JS
DemoLink:Source Code / Demo
Tags:Yeti 404 Page

#6: Daily UI #008 – 404 Page

35+ HTML 404 Page Templates - Stackfindover (6)

daily ui 404 Page, which was developed byRafaela Lucas. Moreover, you can customize it according to your wish and need.

Author:Rafaela Lucas
Created on:November 27, 2019
Made with:HTML, CSS(SCSS) & JS
DemoLink:Source Code / Demo
Tags:daily ui 404 Page

#7: Fargo 404 page template

35+ HTML 404 Page Templates - Stackfindover (7)

Fargo 404 page design, which was developed byNate Watson. Moreover, you can customize it according to your wish and need.

Author:Nate Watson
Created on:November 18, 2015
Made with:HTML(Pug), CSS(SCSS) & JS
DemoLink:Source Code / Demo
Tags:Fargo 404 page design

#8: GSAP 404 typed message using SplitText

35+ HTML 404 Page Templates - Stackfindover (8)

GSAP 404 typed message using SplitText, which was developed bySelcuk Cura. Moreover, you can customize it according to your wish and need.

Author:Selcuk Cura
Created on:October 22, 2017
Made with:HTML, CSS(SCSS) & JS
DemoLink:Source Code / Demo
Tags:GSAP 404 typed message using SplitText

#9: Mars 404 Error Page

35+ HTML 404 Page Templates - Stackfindover (9)

Mars 404 Error Page, which was developed byAsyraf Hussin. Moreover, you can customize it according to your wish and need.

Author:Asyraf Hussin
Created on:September 2, 2018
Made with:HTML & CSS
DemoLink:Source Code / Demo
Tags:Mars 404 Error Page

#10: 404 Error Page Template Example

35+ HTML 404 Page Templates - Stackfindover (10)

404 Error Page Design, which was developed byRicardo Prieto. Moreover, you can customize it according to your wish and need.

Author:Ricardo Prieto
Created on:November 4, 2017
Made with:HTML & CSS
DemoLink:Source Code / Demo
Tags:404 Error Page Design
35+ HTML 404 Page Templates - Stackfindover (11)

Hello, guys in this tutorial we will create an animated share button using HTML & CSS, and also i have listed best social share button examples which is are available in codepen.

Learn more

#11: CSS 404 page template

35+ HTML 404 Page Templates - Stackfindover (12)

CSS 404 page template, which was developed byagathaco. Moreover, you can customize it according to your wish and need.

Author:agathaco
Created on:July 28, 2018
Made with:HTML(Pug) & CSS(SCSS)
DemoLink:Source Code / Demo
Tags:CSS 404 page

#12: Error 404 Page not found

35+ HTML 404 Page Templates - Stackfindover (13)

Error 404 Page not found, which was developed byRobin Selmer. Moreover, you can customize it according to your wish and need.

Author:Robin Selmer
Created on:August 22, 2017
Made with:HTML & CSS(SCSS)
DemoLink:Source Code / Demo
Tags:Error 404 Page not found

#13: Neon – 404 html template

35+ HTML 404 Page Templates - Stackfindover (14)

Neon – 404 html template, which was developed byTibix. Moreover, you can customize it according to your wish and need.

Author:Tibix
Created on:August 27, 2019
Made with:HTML & CSS(SCSS)
DemoLink:Source Code / Demo
Tags:Neon 404 html template

#14: Sassy page not found template

35+ HTML 404 Page Templates - Stackfindover (15)

Sassy page not found template, which was developed byJustin Juno. Moreover, you can customize it according to your wish and need.

Author:Justin Juno
Created on:May 7, 2020
Made with:HTML & CSS(SCSS)
DemoLink:Source Code / Demo
Tags:page not found template

#15: Animated 404 page design html

35+ HTML 404 Page Templates - Stackfindover (16)

Animated 404 page design html, which was developed byJaymie Rosen. Moreover, you can customize it according to your wish and need.

Author:Jaymie Rosen
Created on:October 15, 2017
Made with:HTML, CSS & JS
DemoLink:Source Code / Demo
Tags:Animated 404 page design html

#16: Pure CSS Error Page 404 vampire

35+ HTML 404 Page Templates - Stackfindover (17)

Pure CSS Error Page 404 vampire, which was developed byOmar Dsooky. Moreover, you can customize it according to your wish and need.

Author:Omar Dsooky
Created on:August 10, 2017
Made with:HTML & CSS
DemoLink:Source Code / Demo
Tags:Pure CSS Error Page 404 vampire

#17: Simple 404 Error page

35+ HTML 404 Page Templates - Stackfindover (18)

Simple 404 Error page, which was developed byvineeth.tr. Moreover, you can customize it according to your wish and need.

Author:vineeth.tr
Created on:April 12, 2016
Made with:HTML & CSS(SCSS)
DemoLink:Source Code / Demo
Tags:Simple 404 Error page

#18: HTML CSS 404 Crying Baby Page Template

35+ HTML 404 Page Templates - Stackfindover (19)

HTML CSS 404 Crying Baby Page Template, which was developed byvineeth.tr. Moreover, you can customize it according to your wish and need.

Author:vineeth.tr
Created on:October 12, 2016
Made with:HTML(Pug) & CSS(SCSS)
DemoLink:Source Code / Demo
Tags:HTML CSS 404 Crying Baby Page Template

#19: CSS Train 404 Page

35+ HTML 404 Page Templates - Stackfindover (20)

CSS Train 404 Page, which was developed byCarla. Moreover, you can customize it according to your wish and need.

Author:Carla
Created on:November 3, 2018
Made with:HTML & CSS
DemoLink:Source Code / Demo
Tags:CSS Train 404 Page

#20: Pure CSS Animated 404 error page template

35+ HTML 404 Page Templates - Stackfindover (21)

Pure CSS Animated 404 error page template, which was developed bySergio. Moreover, you can customize it according to your wish and need.

Author:Sergio
Created on:March 27, 2018
Made with:HTML & CSS(SCSS)
DemoLink:Source Code / Demo
Tags:Pure CSS Animated 404 error page template

#21: SVG 404 page not found template

35+ HTML 404 Page Templates - Stackfindover (22)

SVG 404 page not found template, which was developed bySylvain Lepinard. Moreover, you can customize it according to your wish and need.

Author:Sylvain Lepinard
Created on:August 9, 2019
Made with:HTML & CSS(SCSS)
DemoLink:Source Code / Demo
Tags:SVG 404 page not found template

#22: Fully responsive 404 page

35+ HTML 404 Page Templates - Stackfindover (23)

Fully responsive 404 page, which was developed byKasper De Bruyne. Moreover, you can customize it according to your wish and need.

Author:Kasper De Bruyne
Created on:February 18, 2020
Made with:HTML, CSS(SCSS) & JS
DemoLink:Source Code / Demo
Tags:Fully responsive 404 page

#23: Responsive custom 404 page

35+ HTML 404 Page Templates - Stackfindover (24)

Responsive custom 404 page, which was developed byAsh. Moreover, you can customize it according to your wish and need.

Author:Ash
Created on:September 28, 2017
Made with:HTML & CSS
DemoLink:Source Code / Demo
Tags:Responsive custom 404 page

#24: Wild West 404 Error page Concept

35+ HTML 404 Page Templates - Stackfindover (25)

Wild West 404 Error page Concept, which was developed byZissis Vassos. Moreover, you can customize it according to your wish and need.

Author:Zissis Vassos
Created on:August 26, 2019
Made with:HTML & CSS
DemoLink:Source Code / Demo
Tags:Wild West 404 Error page Concept

#25: html template 404

35+ HTML 404 Page Templates - Stackfindover (26)

html template 404, which was developed byJhey. Moreover, you can customize it according to your wish and need.

Author:Jhey
Created on:March 23, 2020
Made with:HTML(Pug), CSS & JS
DemoLink:Source Code / Demo
Tags:html template 404

#26: Windows 10 style 404 error design

35+ HTML 404 Page Templates - Stackfindover (27)

Windows 10 style 404 error design, which was developed byMarco Peretto. Moreover, you can customize it according to your wish and need.

Author:Marco Peretto
Created on:February 8, 2019
Made with:HTML & CSS
DemoLink:Source Code / Demo
Tags:404 error design

#27: 404 Error Page: Animated SVG GSAP

35+ HTML 404 Page Templates - Stackfindover (28)

404 Error: Animated SVG GSAP, which was developed bychristine i. Moreover, you can customize it according to your wish and need.

Author:christine i
Created on:February 22, 2020
Made with:HTML, CSS & js
DemoLink:Source Code / Demo
Tags:404 Error

#28: Custom 404 error page design

35+ HTML 404 Page Templates - Stackfindover (29)

Custom 404 error page design, which was developed byMuhammad Rauf. Moreover, you can customize it according to your wish and need.

Author:Muhammad Rauf
Created on:December 3, 2021
Made with:HTML & CSS
DemoLink:Source Code / Demo
Tags:Custom 404 error page design

#29: Oops! page not found template

35+ HTML 404 Page Templates - Stackfindover (30)

Oops! page not found template, which was developed bySwarup Kumar Kuila. Moreover, you can customize it according to your wish and need.

Author:Swarup Kumar Kuila
Created on:August 14, 2020
Made with:HTML & CSS
DemoLink:Source Code / Demo
Tags:page not found template

#30: Awesome 404 page not found

35+ HTML 404 Page Templates - Stackfindover (31)

Awesome 404 page not found, which was developed bygavra. Moreover, you can customize it according to your wish and need.

Author:gavra
Created on:April 19, 2014
Made with:HTML, CSS & JS
DemoLink:Source Code / Demo
Tags:Awesome 404 page not found

#31: Error 404: Monument Valley inspiration

35+ HTML 404 Page Templates - Stackfindover (32)

Error 404: Monument Valley inspiration, which was developed bySussie Casasola. Moreover, you can customize it according to your wish and need.

Author:Sussie Casasola
Created on:April 29, 2018
Made with:HTML(Pug) & CSS(Sass)
DemoLink:Source Code / Demo
Tags:Error 404

#32: 404 page

35+ HTML 404 Page Templates - Stackfindover (33)

404 page, which was developed byJulia. Moreover, you can customize it according to your wish and need.

Author:Julia
Created on:September 7, 2018
Made with:HTML & CSS(Sass)
DemoLink:Source Code / Demo
Tags:404 page

#33: 404 SVG Error Based Page

35+ HTML 404 Page Templates - Stackfindover (34)

404 SVG Error Based Page, which was developed byDave Pratt. Moreover, you can customize it according to your wish and need.

Author:Dave Pratt
Created on:September 6, 2017
Made with:HTML & CSS(SCSS)
DemoLink:Source Code / Demo
Tags:404 SVG Error Based Page

#34: bootstrap 404 error page template

35+ HTML 404 Page Templates - Stackfindover (35)

bootstrap 404 error page template, which was developed byAji. Moreover, you can customize it according to your wish and need.

Author:Aji
Created on:June 26, 2021
Made with:HTML & CSS
DemoLink:Source Code / Demo
Tags:bootstrap 404 error page template

#35: Cool 404 error page

35+ HTML 404 Page Templates - Stackfindover (36)

Cool 404 error page, which was developed byAnton Lukin. Moreover, you can customize it according to your wish and need.

Author:Anton Lukin
Created on:November 1, 2018
Made with:HTML & CSS
DemoLink:Source Code / Demo
Tags:Cool 404 error page

#36: 404 error template

35+ HTML 404 Page Templates - Stackfindover (37)

404 error template, which was developed byNatalia. Moreover, you can customize it according to your wish and need.

Author:Natalia
Created on:January 4, 2021
Made with:HTML & CSS
DemoLink:Source Code / Demo
Tags:404 error template
If you liked this article 20+ Like and Favorite Button Examples, you should check out this one If you 20+ CSS Like Button Examples

Top Articles

You might also like

Latest Posts

Article information

Author: Geoffrey Lueilwitz

Last Updated: 11/03/2022

Views: 6348

Rating: 5 / 5 (60 voted)

Reviews: 83% of readers found this page helpful

Author information

Name: Geoffrey Lueilwitz

Birthday: 1997-03-23

Address: 74183 Thomas Course, Port Micheal, OK 55446-1529

Phone: +13408645881558

Job: Global Representative

Hobby: Sailing, Vehicle restoration, Rowing, Ghost hunting, Scrapbooking, Rugby, Board sports

Introduction: My name is Geoffrey Lueilwitz, I am a zealous, encouraging, sparkling, enchanting, graceful, faithful, nice person who loves writing and wants to share my knowledge and understanding with you.