30 HTML 404 Seiten Template Inspirationen

Beim Aufruf einer nicht (mehr) existierenden Seite wird man auf 404 Seiten weitergeleitet. Das ist aber nicht direkt schlecht, denn die 404 Templates können durch ein bisschen Kreativität wahre Wunder wirken, damit Besucher deine Seite nicht verlassen.
404-Seiten (oder Error Page) heißen so, weil Server im Falle einer nicht oder nicht mehr existierenden Seite den HTTP Status Code 404 zurückliefern, um zu zeigen, dass die angeforderte Seite nicht (mehr) existiert.
Ein kreativer Weg für 404 Seiten Templates ist es, mit witzigen Animationen, Designs und lustigen Bildern seine Besucher dazu zu bringen, die Webseite nicht zu verlassen. In diesem Zuge ist auch wichtig, Benutzer direkt die Möglichkeit zu geben eine andere Unterseite auf deiner Website aufzurufen. Auch responsive müssen die Seiten natürlich gut aussehen.
Die 404 Seiten Templates können als Template Vorlage oder als Beispiele für deine eigene Seite dienen (natürlich komplett kostenlos), lass dich inspirieren! Und sind wir mal ehrlich…404 Witze sind die Besten, oder?
Ich wollte gerade einen Witz über 404-Seiten machen, habe aber keinen gefunden.
Die gezeigten Pens sind mit MIT lizensiert. Mehr Infos zur eigenen Nutzung findest Du im Codepen Blog.
#1 Responsive 404 Stranger things
Autor: ARiyou Jahan;
Programmiert in: HTML, CSS (SCSS);
#2 No Vacancy 404
Autor: Riley Shaw;
Programmiert in: Slim, Sass, CoffeScript;
#3 404 Kittens
Autor: nclud team;
Programmiert in: HTML, CSS (SCSS), JS;
#4 – Glitched out
Autor: ZonFire99;
Programmiert in: HTML, CSS, JS;
#5 Fargo 404
Autor: Nathaniel Watson;
Programmiert in: Pug, CSS (SCSS), JS;
#6 404 No signal
Autor: Adem ilter;
Programmiert in: HTML, CSS, JS;
#7 Glitchy 404 Page
Autor: Kay Pooma;
Programmiert in: HTML, CSS;
#8 Bluescreen – 404 Page
Autor: Angela Galliat;
Programmiert in: HTML, CSS;
#9 404 Space
Autor: Keith;
Programmiert in: HTML, CSS (SCSS), JS;
#10 Error page – #Project 4
Autor: Jake;
Programmiert in: HTML, CSS (SCSS), JS;
#11 404
Autor: Metty;
Programmiert in: HTML, CSS, JS;
#12 Space 404
Autor: Ethan;
Programmiert in: HTML, CSS (SCSS), JS;
#13 404 Error Page
Autor: anhat.dev;
Programmiert in: HTML, CSS, JS;
#14 Daily UI #008 – 404 Page
Autor: Rafaela Lucas;
Programmiert in: HTML, CSS (SCSS), JS;
#15 Lost in Space (ERRORS) (not responsive)
Autor: Radu;
Programmiert in: HTML, CSS (SCSS);
#16 404 Page Not Found
Autor: João Sousa;
Programmiert in: HTML, PostCSS;
#17 404 Error Page
Autor: miranda;
Programmiert in: HTML, CSS;
#18 404 Error page
Autor: Abolfazl Arab;
Programmiert in: HTML, CSS;
#19 404 Makes bear sad ??
Autor: Jhey;
Programmiert in: Pug, Stylus, Babel;
#20 404-magnifying-glass-svg-animation-css
Autor: Maelle Gomez;
Programmiert in: HTML, CSS;
#21 en 404 page
Autor: Arman Azizpour;
Programmiert in: HTML, CSS;
#22 404 Venn Diagram
Autor: Michael Richins;
Programmiert in: HTML, CSS (SCSS);
#23 Tractor Pull 404 Error
Autor: Nick Soltis;
Programmiert in: HTML, CSS (SCSS);
#24 Neon – 404 Page Not Found
Autor: Tibix;
Programmiert in: HTML, CSS;
#25 8-bit mario 404
Autor: JFabre;
Programmiert in: HTML, CSS (SCSS), Babel;
#26 404 error page
Autor: Swarup Kumar Kuila;
Programmiert in: HTML, CSS (Bootstrap), JS (anime.js);
#27 Yeti 404 page
Autor: Darin;
Programmiert in: HTML, CSS (SCSS), JS (TweenMax.js, MorphSVGPlugin.js, CustomEase.js);
#28 404 page
Autor: sarazond;
Programmiert in: HTML, CSS;
#29 Ghost Page | 404
Autor: Diogo Gomes;
Programmiert in: HTML, CSS (SCSS), JS (jQuery);
#30 404 Error Example #3
Autor: Ricardo Prieto;
Programmiert in: HTML, CSS;
Fazit
Wie Du siehst sind Deiner Kreativität keine Grenzen gesetzt. Welches 404 Seiten Template gefällt dir am besten, oder hast bist Du vielleicht selber kreativ geworden? Lass es mich gerne wissen! Und vielleicht taucht schon bald deine 404-Seite hier auf. 🙂
Hinweis: Alle Pens sind auf codepen.io veröffentlicht und nicht von mir.
Noch nicht genug? Dann könnte das etwas für dich sein:
Wie fandest du diesen Beitrag?


Very Attractive Custom 404 Error Page. Nice Keep it up☺RegardsFounder of BlogTriggers.com