Open the full-page example → · Download complete recipe (ZIP)
Try the working example
The preview runs only our supplied example code. Entries stay in the page; the practice form cannot send them. For keyboard testing, use the full-page example.
Build it step by step
- Keep a clear missing-page heading and a useful destination. The decorative number is hidden from assistive technology.
- Build the orbit with a border and a pseudo-free decorative span. No image service, canvas or device data is needed.
- Add motion only inside prefers-reduced-motion: no-preference. Each animation runs once and ends in under three seconds.
- Check the reduced-motion setting and follow the home link. For an actual deployment, verify the HTTP response for a genuinely missing path.
Why it works
A short arrival animation gives the composition character without leaving movement running beside text. The default stylesheet is static; motion is an enhancement when the visitor has not requested reduced motion.
A mistake worth catching
An attractive error page returned with HTTP 200 is still a soft error. Naming a file 404.html alone is not enough on every host; routing and response status matter too.
Read the complete source
The ZIP also includes the local font and its licence, a README and any illustrations. The source below is the same code used in the preview.
HTML source
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Mario V.W.B.R. Obst"><meta name="robots" content="noindex, follow"><meta name="referrer" content="no-referrer">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; connect-src 'none'; form-action 'none'; object-src 'none'; base-uri 'none'">
<title>A missing page with a little orbit</title><link rel="stylesheet" href="style.css">
</head>
<body><main><div class="answer" aria-hidden="true">42<span class="orbit"></span></div><p class="kicker">A SMALL DETOUR IN THE UNIVERSE</p><h1>The answer stayed.<br>The page wandered off.</h1><p>You found 42. The address you followed did not lead to a page here.</p><p><a href="https://html-code.fyi/">Return to HTML code FYI</a></p><p class="hint">This is a design exercise served as a normal example page. A real missing URL also needs an HTTP 404 response from its host.</p></main></body></html>CSS source
@font-face{font-family:FYI;src:url("inter.ttf") format("truetype");font-weight:100 900;font-display:swap}
*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#20212a;color:#efedf6;font-family:FYI,sans-serif;line-height:1.6}main{max-width:960px;margin:auto;padding:24px}h1,h2{line-height:1.15}a{color:#ff9b45}button,input,select,textarea{font:inherit;color:inherit;background:#282934;border:1px solid #777582;border-radius:6px;padding:10px}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}:focus-visible{outline:3px solid #ff9b45;outline-offset:4px}label{display:block;margin-top:16px}button{margin:12px 8px 12px 0}p{max-width:70ch}.hint{color:#c7c3d2} [hidden]{display:none!important}.panel{padding:20px;border:1px solid #555361;border-radius:12px;background:#282934}img{max-width:100%;height:auto}code{overflow-wrap:anywhere}input,select,textarea{max-width:100%}a,button{touch-action:manipulation}
main{text-align:center;max-width:760px;padding-block:48px}p{margin-inline:auto}.answer{position:relative;display:inline-block;font-size:clamp(7rem,28vw,14rem);font-weight:850;line-height:1.1;color:#ff7700;text-shadow:6px 4px 0 #713900}.kicker{letter-spacing:.16em;font-size:.75rem}.orbit{position:absolute;left:-12%;top:45%;width:124%;height:25%;border:2px solid #f8c895;border-radius:50%;transform:rotate(-18deg);pointer-events:none}h1{font-size:clamp(1.8rem,5vw,3rem)}@media(prefers-reduced-motion:no-preference){.answer{animation:arrival 1.8s ease-out 1}.orbit{animation:orbit 2.4s ease-in-out 1}@keyframes arrival{from{opacity:.3;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes orbit{0%{transform:rotate(-35deg);opacity:.2}100%{transform:rotate(-18deg);opacity:1}}}Take it one step further
Change the orbit tilt and the arrival distance. Keep the final text readable and the reduced-motion version completely static.
Check your work
Try a narrow window, 200% zoom and keyboard-only operation. Disable JavaScript to inspect the fallback. For motion, test your reduced-motion preference. Do not use real personal details in learning forms.
Keep exploring
Read the companion guide · Practise finding small mistakes · All code recipes
Technical reference and authorship
Read the underlying platform documentation (new tab). The explanation, composition and example were written for this site; this link is a factual reference, not a source of a copied template. Inter has its own font licence in the download.
Use and adapt the original example for your own learning. For other reuse, see Legal information. About AI assistance.