Puerta 404
Este vuelo no sale de aquí.
La puerta que buscas se ha cerrado o nunca estuvo en esta terminal. Revisa tu tarjeta de embarque o vuelve al vestíbulo.
Volver a salidasHTML + CSS404
404 Aeropuerto
Un panel de salidas con paletas que giran letra a letra hasta mostrar el vuelo 404 con destino desconocido.
Ajustes
1x
Código
<!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 · Página no encontrada</title>
<style>
body { margin: 0; background: #000; }
.n4-airport {
--accent: #fbbf24;
--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-airport *,.n4-airport *::before,.n4-airport *::after {
box-sizing: border-box;
}
.n4-airport .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-airport .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-airport .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-airport .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-airport .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-airport .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-airport .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-airport .n4-stars,.n4-airport .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-airport .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-airport-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-airport .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-airport-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-airport [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-airport-tw {
from {
opacity: .3;
}
}
@keyframes n4-airport-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-airport-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-airport *,.n4-airport *::before,.n4-airport *::after {
animation: none!important;
transition: none!important;
}
}
.n4-airport {
background: radial-gradient(90% 70% at 50% 20%,#1b2a4a,#0a1020 70%);
color: #eef2ff;
}
.n4-airport::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 30%;
background: repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 2px,transparent 2px 9cqw),linear-gradient(transparent,rgba(0,0,0,.4));
}
.n4-airport .n4-board {
display: grid;
gap: .45em;
padding: 1.1em 1.2em;
margin-bottom: 2cqmin;
border-radius: .6em;
background: #0d0f14;
box-shadow: inset 0 0 0 1px #2a2f3a,0 2.4em 4em -1.6em #000;
font: 700 clamp(8px,2.15cqmin,15px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
animation: n4-airport-fade calc(.8s / var(--k)) both;
}
.n4-airport .n4-bhead {
display: flex;
gap: .12em;
text-align: left;
color: #7c8598;
}
.n4-airport .n4-bhead s {
width: .8em;
}
.n4-airport .n4-bhead span {
width: calc((var(--n) * 1.22em - .12em) / .68);
font-size: .68em;
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap;
}
.n4-airport .n4-brow {
display: flex;
align-items: center;
gap: .12em;
}
.n4-airport .n4-brow s {
width: .8em;
}
.n4-airport .n4-brow b {
position: relative;
display: inline-grid;
place-items: center;
width: 1.1em;
height: 1.55em;
border-radius: .14em;
color: var(--accent);
background: linear-gradient(#23262e 50%,#1b1d24 50%);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.04);
}
.n4-airport .n4-brow b::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
background: #07080b;
}
.n4-airport .n4-flip b {
color: #f87171;
}
.n4-airport .n4-brow b.f {
animation: n4-airport-flip .07s linear;
}
.n4-airport .n4-title {
font-size: clamp(20px,5cqmin,42px);
font-weight: 700;
letter-spacing: -.025em;
}
.n4-airport .n4-cta {
background: var(--accent);
color: #111;
}
@keyframes n4-airport-flip {
50% {
transform: scaleY(.15);
filter: brightness(1.6);
}
}
</style>
</head>
<body>
<main class="n4-airport">
<div class="n4-copy">
<div class="n4-board" aria-hidden="true">
<div class="n4-bhead"><span style="--n:6">Vuelo</span><s></s><span style="--n:6">Destino</span><s></s><span style="--n:5">Hora</span><s></s><span style="--n:3">Puerta</span><s></s><span style="--n:9">Estado</span></div>
<div class="n4-brow" translate="no"><b data-c="I">I</b><b data-c="B">B</b><b data-c="2">2</b><b data-c="0">0</b><b data-c="4">4</b><b data-c="5">5</b><s></s><b data-c="R">R</b><b data-c="O">O</b><b data-c="M">M</b><b data-c="A">A</b><b data-c=" "> </b><b data-c=" "> </b><s></s><b data-c="1">1</b><b data-c="0">0</b><b data-c=":">:</b><b data-c="4">4</b><b data-c="0">0</b><s></s><b data-c="B">B</b><b data-c="1">1</b><b data-c="2">2</b><s></s><b data-c="B">B</b><b data-c="O">O</b><b data-c="A">A</b><b data-c="R">R</b><b data-c="D">D</b><b data-c="I">I</b><b data-c="N">N</b><b data-c="G">G</b><b data-c=" "> </b></div>
<div class="n4-brow" translate="no"><b data-c="V">V</b><b data-c="Y">Y</b><b data-c="1">1</b><b data-c="3">3</b><b data-c="1">1</b><b data-c="2">2</b><s></s><b data-c="P">P</b><b data-c="A">A</b><b data-c="R">R</b><b data-c="I">I</b><b data-c="S">S</b><b data-c=" "> </b><s></s><b data-c="1">1</b><b data-c="0">0</b><b data-c=":">:</b><b data-c="5">5</b><b data-c="5">5</b><s></s><b data-c="A">A</b><b data-c="0">0</b><b data-c="3">3</b><s></s><b data-c="O">O</b><b data-c="N">N</b><b data-c=" "> </b><b data-c="T">T</b><b data-c="I">I</b><b data-c="M">M</b><b data-c="E">E</b><b data-c=" "> </b><b data-c=" "> </b></div>
<div class="n4-brow n4-flip" translate="no"><b data-c="4">4</b><b data-c="0">0</b><b data-c="4">4</b><b data-c=" "> </b><b data-c=" "> </b><b data-c=" "> </b><s></s><b data-c="?">?</b><b data-c="?">?</b><b data-c="?">?</b><b data-c="?">?</b><b data-c=" "> </b><b data-c=" "> </b><s></s><b data-c="-">-</b><b data-c="-">-</b><b data-c=":">:</b><b data-c="-">-</b><b data-c="-">-</b><s></s><b data-c="?">?</b><b data-c="?">?</b><b data-c="?">?</b><s></s><b data-c="N">N</b><b data-c="O">O</b><b data-c="T">T</b><b data-c=" "> </b><b data-c="F">F</b><b data-c="O">O</b><b data-c="U">U</b><b data-c="N">N</b><b data-c="D">D</b></div>
<div class="n4-brow" translate="no"><b data-c="U">U</b><b data-c="X">X</b><b data-c="7">7</b><b data-c="7">7</b><b data-c="1">1</b><b data-c="0">0</b><s></s><b data-c="B">B</b><b data-c="E">E</b><b data-c="R">R</b><b data-c="L">L</b><b data-c="I">I</b><b data-c="N">N</b><s></s><b data-c="1">1</b><b data-c="1">1</b><b data-c=":">:</b><b data-c="2">2</b><b data-c="0">0</b><s></s><b data-c="C">C</b><b data-c="0">0</b><b data-c="7">7</b><s></s><b data-c="D">D</b><b data-c="E">E</b><b data-c="L">L</b><b data-c="A">A</b><b data-c="Y">Y</b><b data-c="E">E</b><b data-c="D">D</b><b data-c=" "> </b><b data-c=" "> </b></div>
</div>
<span class="n4-tag">Puerta 404</span>
<h1 class="n4-title">Este vuelo no sale de aquí.</h1>
<p class="n4-sub">La puerta que buscas se ha cerrado o nunca estuvo en esta terminal. Revisa tu tarjeta de embarque o vuelve al vestíbulo.</p>
<a class="n4-cta" href="/">Volver a salidas</a>
</div>
</main>
<script>
document.querySelectorAll(".n4-airport").forEach((el) => {
const cells = el.querySelectorAll(".n4-flip b");
const C = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789?-:";
const rm = matchMedia("(prefers-reduced-motion: reduce)").matches;
const timers = [];
const flip = () => cells.forEach((b, i) => {
const fin = b.dataset.c; let n = 5 + (i % 9) * 2;
const tick = () => { b.classList.remove("f"); void b.offsetWidth; b.classList.add("f"); b.textContent = --n > 0 ? C[Math.floor(Math.random() * C.length)] : fin === " " ? "\u00a0" : fin; if (n > 0) timers.push(setTimeout(tick, 75)); };
timers.push(setTimeout(tick, 300 + i * 35));
});
if (!rm) flip();
const iv = rm ? 0 : setInterval(flip, 8000);
});
</script>
</body>
</html>
Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en 404
Ver todos: 404Dónde usarlo
Webs de viajes, aerolíneas y buscadores de reservas pierden páginas constantemente cuando se cancelan rutas o caducan ofertas. Esta página de error toma el objeto más reconocible de cualquier terminal: un panel de salidas con vuelos, horas, puertas y estado. Una fila no para de girar sus caracteres con una animación mecánica rápida y siempre acaba en el vuelo 404, destino desconocido.
El panel es decorativo y queda oculto para los lectores de pantalla, mientras el título, el mensaje y el botón son texto normal. Con movimiento reducido el panel aparece ya terminado. Enlaza el botón a tu buscador o a las salidas y ajusta el color ámbar.