Clínica veterinaria · Historial 404
This page has run off.
It bolted the moment it heard the word “vaccine”. It’ll come back; in the meantime, we’ll see you in the waiting room.
Back to the waiting roomHTML + CSS404
Vet clinic 404
A trail of paw prints walks in from one side, steps right over the 404 and leaves: the patient has escaped.
Settings
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 · Page not found</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">Vet clinic · Record 404</span>
<h1 class="n4-title">This page has run off.</h1>
<p class="n4-sub">It bolted the moment it heard the word “vaccine”. It’ll come back; in the meantime, we’ll see you in the waiting room.</p>
<a class="n4-cta" href="/">Back to the waiting room</a>
</div>
</main>
</body>
</html>
Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in 404
Where to use it
Pet owners are a soft audience. They come to a vet website to check a vaccine date, book a check‑up or find the phone number when the dog ate something odd. A vet 404 page with a runaway patient makes them smile instead of getting annoyed, and keeps your warm tone even on an error.
Put your emergency phone number in the message: someone looking at a sick cat will not go hunting for it. The paw trail looks best on a wide screen, where it crosses the whole page. On a phone it is shorter but still reads well.