25 tolle 404 Seiten Templates – mit Animationen!

Beim Aufruf einer nicht (mehr) existierenden Seite wird man auf 404-Seiten weitergeleitet. Das ist aber nicht direkt schlecht, denn die 404-Seite 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 mit witzigen Animationen, Designs und lustigen Bildern oft ein guter Weg, um Besucher bei der Stange zu halten – also dazu zu bringen deine Website nicht zu verlassen. In diesem Zuge ist auch wichtig, Benutzer direkt die Möglichkeit zu geben eine andere Unterseite auf deiner Website aufzurufen (Schau unbedingt auf meiner 404-Seite vorbei). Auch responsive müssen die Seiten natürlich gut aussehen.

Die Pens 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!?

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

Verdiene Geld mit deiner Website oder Blog

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

Verdiene Geld mit deiner Website oder Blog

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;

Fazit

Wie Du siehst sind Deiner Kreativität keine Grenzen gesetzt. Welche 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. 🙂

Noch nicht genug? Dann könnte das etwas für Dich sein!

Hinweis: Alle Pens sind auf codepen.io veröffentlicht und nicht von mir.

Ähnliche Beiträge
Beteilige dich an der Unterhaltung

6 Kommentare

  1. Blog triggers sagt:

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

Deine E-Mail-Adresse wird nicht veröffentlicht.

bold italic underline strikeThrough
insertOrderedList insertUnorderedList outdent indent
removeFormat
createLink unlink
code

Das könnte dich auch interessieren