Houston, wir haben ein Problem.
Diese Seite ist aus der Umlaufbahn geraten. Wir bringen dich zurück zur Basis, bevor der Sauerstoff ausgeht.
Zurück zur BasisHTML + CSS404
Houston-404
Die Null ist ein Mond mit Kratern, um den ein Satellit kreist. Die Sterne folgen leicht der Maus.
Einstellungen
1x
Code
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>404 · Seite nicht gefunden</title>
<style>
body { margin: 0; background: #000; }
.n4-houston {
--accent: #9fc3ff;
--k: 1;
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
container-type: size;
display: grid;
place-items: center;
background: #000;
color: #f5f5f7;
font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;
-webkit-font-smoothing: antialiased;
text-align: center;
line-height: 1.4;
}
.n4-houston *,.n4-houston *::before,.n4-houston *::after {
box-sizing: border-box;
}
.n4-houston .n4-copy {
position: relative;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6cqmin;
width: 100%;
max-width: 680px;
padding: 0 6cqw;
}
.n4-houston .n4-title {
margin: 0;
font-size: clamp(17px,4.2cqmin,36px);
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.15;
text-wrap: balance;
}
.n4-houston .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-houston .n4-tag {
font: 600 clamp(10px,1.9cqmin,13px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent);
}
.n4-houston .n4-cta {
margin-top: 1.8cqmin;
display: inline-flex;
align-items: center;
gap: .5em;
padding: .85em 1.5em;
border-radius: 999px;
background: #f5f5f7;
color: #000;
font-size: clamp(13px,2.2cqmin,16px);
font-weight: 600;
text-decoration: none;
transition: transform .3s cubic-bezier(.25,.1,.25,1),box-shadow .3s cubic-bezier(.25,.1,.25,1);
}
.n4-houston .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-houston .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-houston .n4-stars,.n4-houston .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-houston .n4-stars {
background-image: radial-gradient(1px 1px at 8% 12%,#fff 60%,transparent),radial-gradient(1px 1px at 22% 68%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 35% 24%,#fff 60%,transparent),radial-gradient(1px 1px at 48% 82%,#fff 60%,transparent),radial-gradient(1px 1px at 57% 9%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 66% 44%,#fff 60%,transparent),radial-gradient(1px 1px at 74% 72%,#fff 60%,transparent),radial-gradient(1px 1px at 86% 18%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 93% 58%,#fff 60%,transparent),radial-gradient(1px 1px at 14% 42%,#fff 60%,transparent),radial-gradient(1px 1px at 40% 55%,#fff 60%,transparent),radial-gradient(1px 1px at 81% 90%,#fff 60%,transparent),radial-gradient(1px 1px at 4% 88%,#fff 60%,transparent),radial-gradient(1px 1px at 62% 30%,#fff 60%,transparent);
opacity: .75;
animation: n4-houston-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-houston .n4-stars2 {
background-image: radial-gradient(2px 2px at 18% 30%,rgba(255,255,255,.9) 50%,transparent),radial-gradient(1.5px 1.5px at 72% 20%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 30% 85%,rgba(255,255,255,.7) 50%,transparent),radial-gradient(1.5px 1.5px at 88% 70%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 52% 60%,rgba(255,255,255,.6) 50%,transparent),radial-gradient(1.5px 1.5px at 6% 55%,rgba(255,255,255,.8) 50%,transparent);
opacity: .55;
animation: n4-houston-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-houston [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-houston-tw {
from {
opacity: .3;
}
}
@keyframes n4-houston-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-houston-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-houston *,.n4-houston *::before,.n4-houston *::after {
animation: none!important;
transition: none!important;
}
}
.n4-houston {
background: radial-gradient(80% 60% at 50% 40%,#0a1020,#000 72%);
}
.n4-houston .n4-num {
margin: 0 0 1cqmin;
display: flex;
align-items: center;
font-size: clamp(84px,28cqmin,280px);
font-weight: 700;
letter-spacing: -.05em;
line-height: .9;
}
.n4-houston .n4-num b {
color: #f5f5f7;
text-shadow: 0 0 .2em color-mix(in srgb,var(--accent) 30%,transparent);
}
.n4-houston .n4-o {
position: relative;
isolation: isolate;
display: grid;
place-items: center;
width: .78em;
height: .78em;
margin: 0 .06em;
}
.n4-houston .n4-moon {
position: relative;
z-index: 1;
width: .72em;
height: .72em;
border-radius: 50%;
background: radial-gradient(circle at 30% 34%,rgba(0,0,0,.28) 0 .045em,transparent .05em),radial-gradient(circle at 64% 30%,rgba(0,0,0,.22) 0 .03em,transparent .035em),radial-gradient(circle at 55% 64%,rgba(0,0,0,.25) 0 .07em,transparent .075em),radial-gradient(circle at 26% 70%,rgba(0,0,0,.18) 0 .028em,transparent .033em),radial-gradient(circle at 78% 55%,rgba(0,0,0,.2) 0 .022em,transparent .027em),radial-gradient(ellipse 40% 30% at 40% 45%,rgba(0,0,0,.12),transparent 70%),radial-gradient(circle at 35% 30%,#f2f2f4,#c7c7cc 45%,#8e8e93 75%,#5a5a5f);
box-shadow: inset -.1em -.06em .14em rgba(0,0,0,.65),0 0 .35em rgba(255,255,255,.12);
}
.n4-houston .n4-orbit {
position: absolute;
left: 50%;
top: 50%;
width: 1.5em;
height: 1.5em;
margin: -.75em 0 0 -.75em;
transform: rotate(-16deg) scaleY(.32);
pointer-events: none;
z-index: 0;
animation: n4-houston-z calc(9s / var(--k)) linear infinite;
}
.n4-houston .n4-orbit::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: .008em solid rgba(255,255,255,.2);
}
.n4-houston .n4-sat {
position: absolute;
inset: 0;
animation: n4-houston-spin calc(9s / var(--k)) linear infinite;
}
.n4-houston .n4-sat::after {
content: "";
position: absolute;
left: 50%;
top: -.035em;
width: .07em;
height: .07em;
margin-left: -.035em;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 .06em .02em #fff,0 0 .22em color-mix(in srgb,var(--accent) 90%,#fff);
}
.n4-houston .n4-copy>* {
animation: n4-houston-fade calc(1s / var(--k)) cubic-bezier(.2,.7,.2,1) both;
}
.n4-houston .n4-copy>:nth-child(2) {
animation-delay: calc(.15s / var(--k));
}
.n4-houston .n4-copy>:nth-child(3) {
animation-delay: calc(.3s / var(--k));
}
.n4-houston .n4-copy>:nth-child(4) {
animation-delay: calc(.45s / var(--k));
}
@keyframes n4-houston-z {
0%,24.9% {
z-index: 0;
}
25%,74.9% {
z-index: 3;
}
75%,100% {
z-index: 0;
}
}
</style>
</head>
<body>
<main class="n4-houston">
<div class="n4-stars" data-depth="10" aria-hidden="true"></div>
<div class="n4-stars2" data-depth="26" aria-hidden="true"></div>
<div class="n4-copy">
<p class="n4-num" aria-hidden="true">
<b>4</b>
<span class="n4-o" data-depth="-14"><span class="n4-moon"></span><span class="n4-orbit"><span class="n4-sat"></span></span></span>
<b>4</b>
</p>
<h1 class="n4-title">Houston, wir haben ein Problem.</h1>
<p class="n4-sub">Diese Seite ist aus der Umlaufbahn geraten. Wir bringen dich zurück zur Basis, bevor der Sauerstoff ausgeht.</p>
<a class="n4-cta" href="/">Zurück zur Basis</a>
</div>
</main>
<script>
document.querySelectorAll(".n4-houston").forEach((el) => {
const layers = el.querySelectorAll("[data-depth]");
const move = (e) => {
const r = el.getBoundingClientRect();
const x = (e.clientX - r.left) / r.width - 0.5;
const y = (e.clientY - r.top) / r.height - 0.5;
layers.forEach((l) => {
const d = Number(l.dataset.depth);
l.style.transform = `translate3d(${-x * d}px, ${-y * d}px, 0)`;
});
};
el.addEventListener("pointermove", move);
});
</script>
</body>
</html>
Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus 404
Wofür du ihn nutzen kannst
Eine 404-Seite mit etwas Humor zeigt Besuchern, dass sich jemand um die Website kümmert, auch wenn mal ein Link ins Leere führt. „Houston, wir haben ein Problem“ schafft das in einer Zeile, und der kreisende Satellit hält den Blick fest. Passt gut zu einem SaaS-Startup, einer Coding-Schule oder einem Wissenschaftspodcast, der eine witzige 404-Seite sucht.
Die Sterne bewegen sich leicht mit der Maus und geben der Szene Tiefe; auf dem Handy bleiben sie einfach stehen. Tausch das Hellblau gegen deine Markenfarbe und lass den Spruch, wie er ist. Den kennt fast jeder.