Clínica veterinaria · Historial 404
Esta página se ha escapado.
Salió corriendo en cuanto oyó la palabra «vacuna». Ya volverá; mientras, te esperamos en la sala.
Volver a la sala de esperaHTML + CSS404
404 Veterinaria
Un rastro de huellas entra por un lado, pisa el 404 y sale por el otro: el paciente se ha escapado.
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-vet {
--accent: #ff6b4a;
--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-vet *,.n4-vet *::before,.n4-vet *::after {
box-sizing: border-box;
}
.n4-vet .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-vet .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-vet .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-vet .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-vet .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-vet .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-vet .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-vet .n4-stars,.n4-vet .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-vet .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-vet-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-vet .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-vet-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-vet [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-vet-tw {
from {
opacity: .3;
}
}
@keyframes n4-vet-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-vet-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-vet *,.n4-vet *::before,.n4-vet *::after {
animation: none!important;
transition: none!important;
}
}
.n4-vet {
background: radial-gradient(80% 60% at 50% 36%,#fffaf6,#fdeee4 62%,#f8e1d2);
color: #3d2618;
font-family: "SF Pro Rounded",ui-rounded,"Nunito","Quicksand","Segoe UI",system-ui,sans-serif;
}
.n4-vet .n4-num {
position: relative;
margin: 0 0 1.4cqmin;
font-size: clamp(84px,30cqmin,300px);
font-weight: 800;
letter-spacing: -.05em;
line-height: .9;
color: #3d2618;
animation: n4-vet-rise calc(1.1s / var(--k)) cubic-bezier(.2,.7,.2,1) both;
}
.n4-vet .n4-trail {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: max(100cqw,190cqmin);
margin-left: calc(max(100cqw,190cqmin) / -2);
pointer-events: none;
}
.n4-vet .n4-paw {
--c: var(--accent);
--s: clamp(20px,5cqmin,40px);
position: absolute;
left: var(--x);
top: var(--y);
width: var(--s);
height: var(--s);
margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
transform: rotate(84deg);
background: radial-gradient(ellipse 25% 20% at 50% 66%,var(--c) 95%,transparent 100%),radial-gradient(ellipse 15% 13% at 37% 76%,var(--c) 95%,transparent 100%),radial-gradient(ellipse 15% 13% at 63% 76%,var(--c) 95%,transparent 100%),radial-gradient(ellipse 9.5% 12.5% at 20% 42%,var(--c) 94%,transparent 100%),radial-gradient(ellipse 10% 13% at 38% 24%,var(--c) 94%,transparent 100%),radial-gradient(ellipse 10% 13% at 62% 24%,var(--c) 94%,transparent 100%),radial-gradient(ellipse 9.5% 12.5% at 80% 42%,var(--c) 94%,transparent 100%);
animation: n4-vet-step calc(7s / var(--k)) calc(var(--i) * .24s / var(--k)) ease-out infinite backwards;
}
.n4-vet .n4-tag {
color: color-mix(in srgb,var(--accent) 85%,#3d2618);
}
.n4-vet .n4-title {
font-size: clamp(22px,5.6cqmin,48px);
font-weight: 800;
letter-spacing: -.03em;
}
.n4-vet .n4-sub {
color: #85624d;
}
.n4-vet .n4-cta {
background: var(--accent);
color: #fff;
box-shadow: 0 .8cqmin 2cqmin -.8cqmin color-mix(in srgb,var(--accent) 80%,transparent);
}
.n4-vet .n4-copy>:not(.n4-num) {
animation: n4-vet-fade calc(1s / var(--k)) calc(.4s / var(--k)) cubic-bezier(.2,.7,.2,1) both;
}
@keyframes n4-vet-rise {
from {
opacity: 0;
transform: translateY(.1em);
}
}
@keyframes n4-vet-step {
0% {
opacity: 0;
transform: rotate(84deg) scale(.5);
}
4% {
opacity: 1;
transform: rotate(84deg) scale(1.1);
}
7% {
transform: rotate(84deg);
}
62% {
opacity: 1;
}
80%,100% {
opacity: 0;
}
}
</style>
</head>
<body>
<main class="n4-vet">
<div class="n4-copy">
<p class="n4-num" aria-hidden="true">404<span class="n4-trail"><i class="n4-paw" style="--x:-2.0%;--y:40.0%;--i:0"></i><i class="n4-paw" style="--x:6.0%;--y:55.2%;--i:1"></i><i class="n4-paw" style="--x:14.0%;--y:38.4%;--i:2"></i><i class="n4-paw" style="--x:22.0%;--y:53.6%;--i:3"></i><i class="n4-paw" style="--x:30.0%;--y:36.8%;--i:4"></i><i class="n4-paw" style="--x:38.0%;--y:52.0%;--i:5"></i><i class="n4-paw" style="--x:46.0%;--y:35.2%;--i:6"></i><i class="n4-paw" style="--x:54.0%;--y:50.4%;--i:7"></i><i class="n4-paw" style="--x:62.0%;--y:33.6%;--i:8"></i><i class="n4-paw" style="--x:70.0%;--y:48.8%;--i:9"></i><i class="n4-paw" style="--x:78.0%;--y:32.0%;--i:10"></i><i class="n4-paw" style="--x:86.0%;--y:47.2%;--i:11"></i><i class="n4-paw" style="--x:94.0%;--y:30.4%;--i:12"></i><i class="n4-paw" style="--x:102.0%;--y:45.6%;--i:13"></i></span></p>
<span class="n4-tag">Clínica veterinaria · Historial 404</span>
<h1 class="n4-title">Esta página se ha escapado.</h1>
<p class="n4-sub">Salió corriendo en cuanto oyó la palabra «vacuna». Ya volverá; mientras, te esperamos en la sala.</p>
<a class="n4-cta" href="/">Volver a la sala de espera</a>
</div>
</main>
</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
Quien tiene mascota es un público muy agradecido. Entra en la web de una clínica veterinaria para mirar cuándo toca la vacuna, pedir cita o buscar el teléfono porque el perro se ha comido algo raro. Una página 404 para veterinaria con un paciente a la fuga le saca una sonrisa en vez de un enfado.
Pon el teléfono de urgencias en el mensaje: alguien con un gato malito no se va a poner a buscarlo. El rastro de huellas luce más en pantalla ancha, donde cruza la página entera. En el móvil el recorrido es más corto, pero se entiende igual.