35 HTML 404 Seiten Templates

Beim Aufruf einer nicht (mehr) existierenden Seite wird man auf 404 Seiten weitergeleitet. Das ist aber nicht direkt schlecht, denn die 404 Seiten 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. Dazu ist nur ein wenig HTML, CSS und manchmal auch JavaScript notwendig. 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.

Diese 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

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

#2 No Vacancy 404

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

#3 404 Kittens

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

#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.

#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.

#10 Error page – #Project 4

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

#11 404

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

#12 Space 404

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

#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.

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

See the Pen Lost in Space (ERRORS) (not responsive) by Radu (@maxym11) on CodePen.

#16 404 Page Not Found

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

#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.

#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.

#23 Tractor Pull 404 Error

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

#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.

#26 404 error page

See the Pen 404 error page by Swarup Kumar Kuila (@uiswarup) on CodePen.

#27 Yeti 404 page

See the Pen Yeti 404 Page by Darin (@dsenneff) on CodePen.

#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.

#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.

#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.

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: