When you call up a page that does not (or no longer) exist, you are redirected to 404 pages. But this is not directly bad, because the 404 page templates can work wonders with a little creativity, so that visitors do not leave your site.
404 pages (or Error Page) are so called because servers return the HTTP status code 404 in case of a non-existent or no longer existing page to show that the requested page does not (no longer) exist.
A creative way for 404 page templates is to use funny animations, designs and funny images to make its visitors not leave the website. You just need HTML, CSS and sometimes JavaScript. In this course, it is also important to give users directly the possibility to go to another subpage on your website. Also responsive pages must of course look good.
These 404 page templates can serve as a template template or as examples for your own page (completely free of course), get inspired! And let’s be honest…404 jokes are the best, right?
I was about to make a joke about 404 pages, but didn’t find one.
The shown pens are licensed with MIT. You can find more information about your own use in the Codepen Blog.
#1 Responsive 404 Stranger things
See the Pen
Responsive 404 Stranger things by ARiyou Jahan (@ARiyou2000)
on CodePen.
Coded with
HTML, CSS (SCSS)
#2 No Vacancy 404
See the Pen
No Vacancy 404 by Riley Shaw (@rileyjshaw)
on CodePen.
Coded with
Slim, Sass, CoffeScript
#3 404 Kittens
See the Pen
404 Kittens by nclud team (@nclud)
on CodePen.
Coded with
HTML, CSS (SCSS), JS
#4 – Glitched out
See the Pen
404 – Glitched out by ZonFire99 (@ZonFire99)
on CodePen.
#5 Fargo 404
See the Pen
Fargo 404 by Nathaniel Watson (@nw)
on CodePen.
Coded with
HTML (Pug), CSS (SCSS), JS
#6 404 No signal
See the Pen
404 No signal by Adem ilter (@ademilter)
on CodePen.
#7 Glitchy 404 Page
See the Pen
Glitchy 404 Page by Kay Pooma (@kaypooma)
on CodePen.
#8 Bluescreen – 404 Page
See the Pen
Bluescreen – 404 Page by Angela Galliat (@agalliat)
on CodePen.
#9 404 Space
See the Pen
404 Space by Keith (@KeithPaul)
on CodePen.
Coded with
HTML, CSS (SCSS), JS
#10 Error page – #Project 4
See the Pen
Error page – #Project4 by Jake (@Jake_Woods)
on CodePen.
Coded with
HTML, CSS (SCSS), JS
#11 404
See the Pen
404 by Metty (@Metty)
on CodePen.
#12 Space 404
See the Pen
Space 404 by Ethan (@eroxburgh)
on CodePen.
Coded with
HTML, CSS (SCSS), JS
#13 404 Error Page
See the Pen
404 Error Page by anhat.dev (@nhatanh17)
on CodePen.
#14 Daily UI #008 – 404 Page
See the Pen
Daily UI #008 – 404 Page by Rafaela Lucas (@rafaelavlucas)
on CodePen.
Coded with
HTML, CSS (SCSS), JS
#15 Lost in Space (ERRORS) (not responsive)
See the Pen
Lost in Space (ERRORS) (not responsive) by Radu (@maxym11)
on CodePen.
Coded with
HTML, CSS (SCSS)
#16 404 Page Not Found
See the Pen
404 Page Not Found by João Sousa (@joaosousa)
on CodePen.
Coded with
HTML, CSS (PostCSS)
#17 404 Error Page
See the Pen
404 Error Page by miranda (@mirandalwashburn)
on CodePen.
#18 404 Error page
See the Pen
404 Error page by Abolfazl Arab (@abol)
on CodePen.
#19 404 Makes bear sad ??
See the Pen
404 Makes bear sad ?? by Jhey (@jh3y)
on CodePen.
Coded with
HTML (Pug), CSS (Stylus), JS (Babel)
#20 404-magnifying-glass-svg-animation-css
See the Pen
404-magnifying-glass-svg-animation-css by Maelle Gomez (@maellegomezafpa)
on CodePen.
#21 en 404 page
See the Pen
en 404 page by Arman Azizpour (@arman_bag)
on CodePen.
#22 404 Venn Diagram
See the Pen
404 Venn Diagram by Michael Richins (@MrGrigri)
on CodePen.
Coded with
HTML, CSS (SCSS)
#23 Tractor Pull 404 Error
See the Pen
Tractor Pull 404 Error by Nick Soltis (@nss5161)
on CodePen.
Coded with
HTML, CSS (SCSS)
#24 Neon – 404 Page Not Found
See the Pen
Neon – 404 Page Not Found by Tibix (@Tibixx)
on CodePen.
#25 8-bit mario 404
See the Pen
8-bit mario 404 by JFabre (@josfaber)
on CodePen.
Coded with
HTML, CSS (SCSS), Babel
#26 404 error page
See the Pen
404 error page by Swarup Kumar Kuila (@uiswarup)
on CodePen.
Coded with
HTML, CSS (Bootstrap), JS (anime.js)
#27 Yeti 404 page
See the Pen
Yeti 404 Page by Darin (@dsenneff)
on CodePen.
Coded with
HTML, CSS (SCSS), JS (TweenMax.js, MorphSVGPlugin.js, CustomEase.js)
#28 404 page
See the Pen
404 Page by sarazond (@sarazond)
on CodePen.
#29 Ghost Page | 404
See the Pen
Ghost Page | 404 by Diogo Gomes (@diogo_ml_gomes)
on CodePen.
Coded with
HTML, CSS (SCSS), JS (jQuery)
#30 404 Error Example #3
See the Pen
404 Error Example #3 by Ricardo Prieto (@ricardpriet)
on CodePen.
#31 Bubbley 404
See the Pen
Bubbley 404 by Kyle Lavery (@kylelavery88)
on CodePen.
#32 404 page
See the Pen
404 page by Chris Samuels (@chrissamuels)
on CodePen.
Coded with
HTML, CSS, JS (TweenMax, MorphSVGPlugin)
#33 404 page
See the Pen
404 page by Bidji (@Bidji)
on CodePen.
#34 404 Error Example
See the Pen
404 Error Example #2 by Ricardo Prieto (@ricardpriet)
on CodePen.
#35 404 Page
See the Pen
404 Page by Kasper De Bruyne (@kdbkapsere)
on CodePen.
Coded with
HTML, CSS (SCSS), JS (Babel)
Conclusion
As you can see, there are no limits to your creativity. Which 404 page template do you like the most, or maybe you got creative yourself? Feel free to let me know! And maybe your 404 page will show up here soon. 🙂
Note: All pens are published on codepen.io and not by me.
Not enough? Then this could be something for you:
Sorry but NONE of them work, I’m assuming that the source files are separate files, IE HTML, CSS and JS, and to have 3 files created.IEThe HTML code goes into an html file, the CSS code to a css file, and if any java, then it too goes into its own files, ie, 404.html, 404, css and (if using java), 404.js and placed into a folder within a virtual host, and adding the apache directive:-ErrorDocument 404 /pages/404.html which doesn’t do what it should.Have a look at this url:- https://musaholic-studios.no-ip.org:13080/testit should show a centered, green 404 error on a black background, but nope.
You can put the full code in one HTML file or you can put them in seperate HTML, CSS and JS files. But you need to import them in your HTML file of course. And be careful: some of them using seperate libraries to work.