25 kreative 404-Error Seiten mit coolen Animationen

25 kreative 404-Error Seiten mit coolen Animationen Thumbnail
Veröffentlicht am 22. Juni 2020

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.

Anzeige

404-Seiten heißen so, weil Server im Falle einer nicht oder nicht mehr existierenden Seite den Status Code 404 zurückliefert um zu zeigen, dass die angeforderte Seite nicht (mehr) existiert.

Die Pens können als Template Vorlage oder als Beispiele für Deine eigene Seite dienen, 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

See the Pen Responsive 404 Stranger things by ARiyou Jahan (@ARiyou2000) on CodePen.

Autor: ARiyou Jahan;
Programmiert in: HTML, CSS (SCSS);

#2 No Vacancy 404

See the Pen No Vacancy 404 by Riley Shaw (@rileyjshaw) on CodePen.

Autor: Riley Shaw;
Programmiert in: Slim, Sass, CoffeScript;

Anzeige

#3 404 Kittens

See the Pen 404 Kittens by nclud team (@nclud) on CodePen.

Autor: nclud team;
Programmiert in: HTML, CSS (SCSS), JS;

#4 – Glitched out

See the Pen 404 – Glitched out by ZonFire99 (@ZonFire99) on CodePen.

Autor: ZonFire99;
Programmiert in: HTML, CSS, JS;

#5 Fargo 404

See the Pen Fargo 404 by Nathaniel Watson (@nw) on CodePen.

Autor: Nathaniel Watson;
Programmiert in: Pug, CSS (SCSS), JS;

#6 404 No signal

See the Pen 404 No signal by Adem ilter (@ademilter) on CodePen.

Autor: Adem ilter;
Programmiert in: HTML, CSS, JS;

Anzeige

#7 Glitchy 404 Page

See the Pen Glitchy 404 Page by Kay Pooma (@kaypooma) on CodePen.

Autor: Kay Pooma;
Programmiert in: HTML, CSS;

#8 Bluescreen – 404 Page

See the Pen Bluescreen – 404 Page by Angela Galliat (@agalliat) on CodePen.

Autor: Angela Galliat;
Programmiert in: HTML, CSS;

#9 404 Space

See the Pen 404 Space by Keith (@KeithPaul) on CodePen.

Autor: Keith;
Programmiert in: HTML, CSS (SCSS), JS;

#10 Error page – #Project 4

See the Pen Error page – #Project4 by Jake (@Jake_Woods) on CodePen.

Autor: Jake;
Programmiert in: HTML, CSS (SCSS), JS;

Anzeige

#11 404

See the Pen 404 by Metty (@Metty) on CodePen.

Autor: Metty;
Programmiert in: HTML, CSS, JS;

#12 Space 404

See the Pen Space 404 by Ethan (@eroxburgh) on CodePen.

Autor: Ethan;
Programmiert in: HTML, CSS (SCSS), JS;

#13 404 Error Page

See the Pen 404 Error Page by anhat.dev (@nhatanh17) on CodePen.

Autor: anhat.dev;
Programmiert in: HTML, CSS, JS;

#14 Daily UI #008 – 404 Page

See the Pen Daily UI #008 – 404 Page by Rafaela Lucas (@rafaelavlucas) on CodePen.

Autor: Rafaela Lucas;
Programmiert in: 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.

Anzeige

Autor: Radu;
Programmiert in: HTML, CSS (SCSS);

#16 404 Page Not Found

See the Pen 404 Page Not Found by João Sousa (@joaosousa) on CodePen.

Autor: João Sousa;
Programmiert in: HTML, PostCSS;

#17 404 Error Page

See the Pen 404 Error Page by miranda (@mirandalwashburn) on CodePen.

Autor: miranda;
Programmiert in: HTML, CSS;

#18 404 Error page

See the Pen 404 Error page by Abolfazl Arab (@abol) on CodePen.

Autor: Abolfazl Arab;
Programmiert in: HTML, CSS;

#19 404 Makes bear sad 🐻😭

See the Pen 404 Makes bear sad 🐻😭 by Jhey (@jh3y) on CodePen.

Anzeige

Autor: Jhey;
Programmiert in: Pug, Stylus, Babel;

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

See the Pen 404-magnifying-glass-svg-animation-css by Maelle Gomez (@maellegomezafpa) on CodePen.

Autor: Maelle Gomez;
Programmiert in: HTML, CSS;

#21 en 404 page

See the Pen en 404 page by Arman Azizpour (@arman_bag) on CodePen.

Autor: Arman Azizpour;
Programmiert in: HTML, CSS;

#22 404 Venn Diagram

See the Pen 404 Venn Diagram by Michael Richins (@MrGrigri) on CodePen.

Autor: Michael Richins;
Programmiert in: HTML, CSS (SCSS);

#23 Tractor Pull 404 Error

See the Pen Tractor Pull 404 Error by Nick Soltis (@nss5161) on CodePen.

Anzeige

Autor: Nick Soltis;
Programmiert in: HTML, CSS (SCSS);

#24 Neon – 404 Page Not Found

See the Pen Neon – 404 Page Not Found by Tibix (@Tibixx) on CodePen.

Autor: Tibix;
Programmiert in: HTML, CSS;

#25 8-bit mario 404

See the Pen 8-bit mario 404 by JFabre (@josfaber) on CodePen.

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
Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.