DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for 25 creative 404-Error Pages with cool animations
Lorenz
Lorenz

Posted on • Originally published at webdeasy.de

25 creative 404-Error Pages with cool animations

Originally published on webdeasy.de!

If you call up a page that does not (no longer) exist, you are redirected to 404 pages. But that’s not bad, because 404 pages can work wonders with a little creativity, so that visitors don’t leave your site.

404 pages are called this way, because in case a page does not or no longer exist, the server returns the status code 404 to show that the requested page does not (no longer) exist.

The pens can be used as a template template or as examples for your own site, let yourself be inspired! And let’s be honest…404 jokes are the best! 🀣

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


Author: ARiyou Jahan;
Coded in: HTML, CSS (SCSS);

#2 No Vacancy 404


Author: Riley Shaw;
Coded in: Slim, Sass, CoffeScript;

#3 404 Kittens


Author: nclud team;
Coded in: HTML, CSS (SCSS), JS;

#4 - Glitched out


Author: ZonFire99;
Coded in: HTML, CSS, JS;

#5 Fargo 404


Author: Nathaniel Watson;
Coded in: Pug, CSS (SCSS), JS;

#6 404 No signal


Author: Adem ilter;
Coded in: HTML, CSS, JS;

#7 Glitchy 404 Page


Author: Kay Pooma;
Coded in: HTML, CSS;

#8 Bluescreen - 404 Page


Author: Angela Galliat;
Coded in: HTML, CSS;

#9 404 Space


Author: Keith;
Coded in: HTML, CSS (SCSS), JS;

#10 Error page - #Project 4


Author: Jake;
Coded in: HTML, CSS (SCSS), JS;

#11 404


Author: Metty;
Coded in: HTML, CSS, JS;

#12 Space 404


Author: Ethan;
Coded in: HTML, CSS (SCSS), JS;

#13 404 Error Page


Author: anhat.dev;
Coded in: HTML, CSS, JS;

#14 Daily UI #008 - 404 Page


Author: Rafaela Lucas;
Coded in: HTML, CSS (SCSS), JS;

#15 Lost in Space (ERRORS) (not responsive)


Author: Radu;
Coded in: HTML, CSS (SCSS);

#16 404 Page Not Found


Author: JoΓ£o Sousa;
Coded in: HTML, PostCSS;

#17 404 Error Page


Author: miranda;
Coded in: HTML, CSS;

#18 404 Error page


Author: Abolfazl Arab;
Coded in: HTML, CSS;

#19 404 Makes bear sad 🐻😭


Author: Jhey;
Coded in: Pug, Stylus, Babel;

#20 404-magnifying-glass-svg-animation-css


Author: Maelle Gomez;
Coded in: HTML, CSS;

#21 en 404 page


Author: Arman Azizpour;
Coded in: HTML, CSS;

#22 404 Venn Diagram


Author: Michael Richins;
Coded in: HTML, CSS (SCSS);

#23 Tractor Pull 404 Error


Author: Nick Soltis;
Coded in: HTML, CSS (SCSS);

#24 Neon - 404 Page Not Found


Author: Tibix;
Coded in: HTML, CSS;

#25 8-bit mario 404


Author: JFabre;
Coded in: HTML, CSS (SCSS), Babel;

Conclusion

As you can see, there are no limits to your creativity. Which one do you like best, or have you perhaps become creative yourself? Please let me know! And maybe your 404 page will appear here soon. πŸ™‚

Not enough? Then this could be something for you!

Note: All pens are published on codepen.io and not by me.

Which page is your favorite? Mine is #1 and #18. Definitely! πŸ‘Œ

Top comments (4)

Collapse
 
keiner_meza04 profile image
Keiner Meza

las puedo usar en mi pagina web no tendrΓ© problemas ?

Collapse
 
webdeasy profile image
Lorenz Author

That's how I would understand it. Look: blog.codepen.io/documentation/lice...

What image format should you use in your next project? πŸ€”