Revisar página 404
Revisa el motor: esta página no arranca.
El testigo de avería lleva un rato encendido y el diagnóstico solo devuelve el código 404. Vuelve al inicio mientras la revisamos.
Volver al inicioCar dashboard 404
A car instrument cluster at night: the needles run their check, the odometer rolls to 404 and the engine light stays on.
Settings
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-garage {
--accent: #ff5a1f;
--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-garage *,.n4-garage *::before,.n4-garage *::after {
box-sizing: border-box;
}
.n4-garage .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-garage .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-garage .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-garage .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-garage .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-garage .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-garage .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-garage .n4-stars,.n4-garage .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-garage .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-garage-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-garage .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-garage-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-garage [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-garage-tw {
from {
opacity: .3;
}
}
@keyframes n4-garage-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-garage-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-garage *,.n4-garage *::before,.n4-garage *::after {
animation: none!important;
transition: none!important;
}
}
.n4-garage {
background: radial-gradient(70% 50% at 50% 30%,#1c1e22,#060607 75%);
color: #f1f1f2;
}
.n4-garage .n4-dash {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1.2em;
width: min(80cqmin,560px);
font-size: min(1.9cqmin,13.5px);
margin-bottom: 2cqmin;
padding: 1.4em 1.8em;
border-radius: 7em/3.6em;
background: radial-gradient(60% 80% at 50% 0,rgba(255,255,255,.07),transparent),#0b0c0e;
box-shadow: inset 0 0 0 .3em #1d1f23,inset 0 .6em 1.2em rgba(0,0,0,.8),0 2em 3em -1.5em #000;
}
.n4-garage .n4-g {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.n4-garage .n4-face {
fill: #101114;
stroke: #2c2f35;
stroke-width: 2;
}
.n4-garage .n4-t {
stroke: #7d838b;
stroke-width: 1;
}
.n4-garage .n4-tm {
stroke: #f2f2f2;
stroke-width: 2;
}
.n4-garage .n4-red {
fill: none;
stroke: #ff3b30;
stroke-width: 3.4;
}
.n4-garage .n4-gn {
font: 600 8.5px "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
fill: #e9e9ea;
text-anchor: middle;
}
.n4-garage .n4-unit {
font: 500 5.5px "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
fill: #8d939b;
text-anchor: middle;
letter-spacing: .06em;
}
.n4-garage .n4-ndl {
transform-box: view-box;
transform-origin: 60px 60px;
rotate: var(--idle,-135deg);
animation: n4-garage-sweep calc(2.2s / var(--k)) ease-in-out .3s both;
}
.n4-garage .n4-ndl path {
fill: var(--accent);
filter: drop-shadow(0 0 2px var(--accent));
}
.n4-garage .n4-rev {
--idle: -111deg;
}
.n4-garage .n4-rev .n4-ndl path {
transform-box: view-box;
transform-origin: 60px 60px;
animation: n4-garage-idle calc(.22s / var(--k)) ease-in-out infinite alternate;
}
.n4-garage .n4-go .n4-rev .n4-ndl {
animation: n4-garage-revup calc(1.5s / var(--k)) ease-out;
}
.n4-garage .n4-go .n4-spd .n4-ndl {
animation: n4-garage-creep calc(1.5s / var(--k)) ease-out;
}
.n4-garage .n4-hub {
fill: #2a2c31;
stroke: #55585e;
}
.n4-garage .n4-mid {
display: flex;
flex-direction: column;
align-items: center;
gap: .65em;
}
.n4-garage .n4-warn {
display: flex;
gap: .6em;
}
.n4-garage .n4-warn svg {
width: 2em;
height: 2em;
fill: #2e2a24;
animation: n4-garage-test calc(1.8s / var(--k)) steps(1) both;
}
.n4-garage .n4-eng {
animation-name: n4-garage-eng!important;
}
.n4-garage .n4-go .n4-warn svg {
animation-name: n4-garage-testb;
}
.n4-garage .n4-go .n4-eng {
animation-name: n4-garage-engb!important;
}
.n4-garage .n4-odo {
display: flex;
align-items: center;
gap: .1em;
padding: .3em .45em;
border-radius: .35em;
background: #050506;
box-shadow: inset 0 0 0 .1em #2f3136;
}
.n4-garage .n4-odo span {
display: block;
width: .85em;
height: 1.2em;
overflow: hidden;
border-radius: .1em;
background: linear-gradient(#bdbdbd,#fff 35%,#fff 65%,#bdbdbd);
font: 700 1.3em/1.2 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
color: #111;
text-align: center;
}
.n4-garage .n4-odo span i {
display: block;
font-style: normal;
transform: translateY(calc(var(--d) * -1.2em));
animation: n4-garage-roll calc(2.6s / var(--k)) cubic-bezier(.3,.7,.2,1) calc(var(--i) * .12s) both;
}
.n4-garage .n4-odo small {
margin-left: .35em;
font: 600 .8em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
color: #8d939b;
}
.n4-garage .n4-code {
margin: 0;
font: 700 .85em/1.2 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
color: #ffb000;
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
}
.n4-garage .n4-start {
width: 7.4em;
height: 7.4em;
border: 0;
border-radius: 50%;
cursor: pointer;
font: 800 .62em/1.1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
text-transform: uppercase;
letter-spacing: .1em;
color: #f2f2f2;
background: radial-gradient(circle at 40% 30%,#4a4d52,#1b1c1f 70%);
box-shadow: 0 0 0 .4em #2a2b2f,0 0 0 .6em var(--accent),0 0 1.6em color-mix(in srgb,var(--accent) 50%,transparent),0 .6em 1.2em rgba(0,0,0,.6);
transition: transform .1s,filter .2s;
}
.n4-garage .n4-start:hover {
filter: brightness(1.2);
}
.n4-garage .n4-start:active {
transform: scale(.94);
}
.n4-garage .n4-start:focus-visible {
outline: 2px solid #fff;
outline-offset: .9em;
}
.n4-garage .n4-title {
font-size: clamp(20px,5cqmin,42px);
font-weight: 700;
letter-spacing: -.025em;
}
.n4-garage .n4-sub {
color: #a4a7ad;
}
.n4-garage .n4-cta {
background: var(--accent);
color: #170700;
}
@keyframes n4-garage-sweep {
0% {
rotate: -135deg;
}
45% {
rotate: 135deg;
}
}
@keyframes n4-garage-idle {
to {
rotate: 1.6deg;
}
}
@keyframes n4-garage-revup {
25% {
rotate: 60deg;
}
}
@keyframes n4-garage-creep {
30% {
rotate: -118deg;
}
}
@keyframes n4-garage-roll {
from {
transform: translateY(0);
}
}
@keyframes n4-garage-test {
0% {
fill: #ffb000;
filter: drop-shadow(0 0 .3em #ffb000);
}
80%,100% {
fill: #2e2a24;
filter: none;
}
}
@keyframes n4-garage-testb {
0% {
fill: #ffb000;
filter: drop-shadow(0 0 .3em #ffb000);
}
80%,100% {
fill: #2e2a24;
filter: none;
}
}
@keyframes n4-garage-eng {
0%,25%,50%,75%,100% {
fill: #ffb000;
filter: drop-shadow(0 0 .3em #ffb000);
}
12%,37%,62% {
fill: #2e2a24;
filter: none;
}
}
@keyframes n4-garage-engb {
0%,25%,50%,75%,100% {
fill: #ffb000;
filter: drop-shadow(0 0 .3em #ffb000);
}
12%,37%,62% {
fill: #2e2a24;
filter: none;
}
}
@media (prefers-reduced-motion:reduce) {
.n4-garage .n4-eng {
fill: #ffb000;
}
}
</style>
</head>
<body>
<main class="n4-garage">
<div class="n4-copy">
<div class="n4-dash">
<svg class="n4-g n4-rev" viewBox="0 0 120 120" aria-hidden="true"><circle cx="60" cy="60" r="57" class="n4-face"/><path class="n4-red" d="M111.7 54.6A52 52 0 0 1 96.8 96.8"/><path class="n4-t n4-tm" d="M24.6 95.4L29.6 90.4"/><path class="n4-t" d="M20.7 91.0L23.5 88.8"/><path class="n4-t" d="M17.4 86.1L20.4 84.3"/><path class="n4-t" d="M14.6 80.9L17.8 79.5"/><path class="n4-t" d="M12.4 75.5L15.8 74.4"/><path class="n4-t n4-tm" d="M11.0 69.8L17.8 68.4"/><path class="n4-t" d="M10.2 63.9L13.6 63.6"/><path class="n4-t" d="M10.0 58.0L13.5 58.2"/><path class="n4-t" d="M10.6 52.2L14.1 52.7"/><path class="n4-t" d="M11.9 46.4L15.2 47.4"/><path class="n4-t n4-tm" d="M13.8 40.9L20.3 43.5"/><path class="n4-t" d="M16.4 35.6L19.4 37.3"/><path class="n4-t" d="M19.5 30.6L22.4 32.7"/><path class="n4-t" d="M23.3 26.1L25.9 28.4"/><path class="n4-t" d="M27.5 22.0L29.8 24.6"/><path class="n4-t n4-tm" d="M32.2 18.4L36.1 24.2"/><path class="n4-t" d="M37.3 15.4L38.9 18.6"/><path class="n4-t" d="M42.7 13.1L43.9 16.4"/><path class="n4-t" d="M48.3 11.4L49.1 14.8"/><path class="n4-t" d="M54.1 10.3L54.5 13.8"/><path class="n4-t n4-tm" d="M60.0 10.0L60.0 17.0"/><path class="n4-t" d="M65.9 10.3L65.5 13.8"/><path class="n4-t" d="M71.7 11.4L70.9 14.8"/><path class="n4-t" d="M77.3 13.1L76.1 16.4"/><path class="n4-t" d="M82.7 15.4L81.1 18.6"/><path class="n4-t n4-tm" d="M87.8 18.4L83.9 24.2"/><path class="n4-t" d="M92.5 22.0L90.2 24.6"/><path class="n4-t" d="M96.7 26.1L94.1 28.4"/><path class="n4-t" d="M100.5 30.6L97.6 32.7"/><path class="n4-t" d="M103.6 35.6L100.6 37.3"/><path class="n4-t n4-tm" d="M106.2 40.9L99.7 43.5"/><path class="n4-t" d="M108.1 46.4L104.8 47.4"/><path class="n4-t" d="M109.4 52.2L105.9 52.7"/><path class="n4-t" d="M110.0 58.0L106.5 58.2"/><path class="n4-t" d="M109.8 63.9L106.4 63.6"/><path class="n4-t n4-tm" d="M109.0 69.8L102.2 68.4"/><path class="n4-t" d="M107.6 75.5L104.2 74.4"/><path class="n4-t" d="M105.4 80.9L102.2 79.5"/><path class="n4-t" d="M102.6 86.1L99.6 84.3"/><path class="n4-t" d="M99.3 91.0L96.5 88.8"/><path class="n4-t n4-tm" d="M95.4 95.4L90.4 90.4"/><text class="n4-gn" x="35.3" y="87.7">0</text><text class="n4-gn" x="25.7" y="69.8">1</text><text class="n4-gn" x="27.7" y="49.6">2</text><text class="n4-gn" x="40.6" y="33.9">3</text><text class="n4-gn" x="60.0" y="28.0">4</text><text class="n4-gn" x="79.4" y="33.9">5</text><text class="n4-gn" x="92.3" y="49.6">6</text><text class="n4-gn" x="94.3" y="69.8">7</text><text class="n4-gn" x="84.7" y="87.7">8</text><text class="n4-unit" x="60" y="86">x1000 r/min</text><g class="n4-ndl"><path d="M58.6 66L60 13l1.4 53z"/></g><circle cx="60" cy="60" r="5.5" class="n4-hub"/></svg>
<div class="n4-mid">
<div class="n4-warn" aria-hidden="true">
<svg class="n4-eng" viewBox="0 0 24 24"><path d="M3 10h2V8h3l2-2h5v2h2l2 2h2V8h2v9h-2v-2h-2l-2 3H9l-2-2H5v-2H3z"/></svg>
<svg class="n4-bat" viewBox="0 0 24 24"><path d="M6 5h3v2H6zm9 0h3v2h-3zM3 7h18v12H3zm3 5v1.6h4V12zm8 0v1.6h1.2V15h1.6v-1.4H18V12h-1.2v-1.4h-1.6V12z" fill-rule="evenodd"/></svg>
<svg class="n4-oil" viewBox="0 0 24 24"><path d="M2 11l5-2h6l2 2 6-3-4 8H5l-3-3zm19 5.5a1.5 1.5 0 0 0 3 0c0-1-1.5-3-1.5-3s-1.5 2-1.5 3z"/></svg>
</div>
<div class="n4-odo" aria-hidden="true" translate="no"><span style="--d:10;--i:0"><i>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</i></span><span style="--d:10;--i:1"><i>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</i></span><span style="--d:10;--i:2"><i>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</i></span><span style="--d:14;--i:3"><i>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</i></span><span style="--d:10;--i:4"><i>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</i></span><span style="--d:14;--i:5"><i>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</i></span><small>km</small></div>
<p class="n4-code">Check page 404</p>
<button class="n4-start" type="button">Start</button>
</div>
<svg class="n4-g n4-spd" viewBox="0 0 120 120" aria-hidden="true"><circle cx="60" cy="60" r="57" class="n4-face"/><path class="n4-t n4-tm" d="M24.6 95.4L29.6 90.4"/><path class="n4-t" d="M20.7 91.0L23.5 88.8"/><path class="n4-t" d="M17.4 86.1L20.4 84.3"/><path class="n4-t" d="M14.6 80.9L17.8 79.5"/><path class="n4-t" d="M12.4 75.5L15.8 74.4"/><path class="n4-t n4-tm" d="M11.0 69.8L17.8 68.4"/><path class="n4-t" d="M10.2 63.9L13.6 63.6"/><path class="n4-t" d="M10.0 58.0L13.5 58.2"/><path class="n4-t" d="M10.6 52.2L14.1 52.7"/><path class="n4-t" d="M11.9 46.4L15.2 47.4"/><path class="n4-t n4-tm" d="M13.8 40.9L20.3 43.5"/><path class="n4-t" d="M16.4 35.6L19.4 37.3"/><path class="n4-t" d="M19.5 30.6L22.4 32.7"/><path class="n4-t" d="M23.3 26.1L25.9 28.4"/><path class="n4-t" d="M27.5 22.0L29.8 24.6"/><path class="n4-t n4-tm" d="M32.2 18.4L36.1 24.2"/><path class="n4-t" d="M37.3 15.4L38.9 18.6"/><path class="n4-t" d="M42.7 13.1L43.9 16.4"/><path class="n4-t" d="M48.3 11.4L49.1 14.8"/><path class="n4-t" d="M54.1 10.3L54.5 13.8"/><path class="n4-t n4-tm" d="M60.0 10.0L60.0 17.0"/><path class="n4-t" d="M65.9 10.3L65.5 13.8"/><path class="n4-t" d="M71.7 11.4L70.9 14.8"/><path class="n4-t" d="M77.3 13.1L76.1 16.4"/><path class="n4-t" d="M82.7 15.4L81.1 18.6"/><path class="n4-t n4-tm" d="M87.8 18.4L83.9 24.2"/><path class="n4-t" d="M92.5 22.0L90.2 24.6"/><path class="n4-t" d="M96.7 26.1L94.1 28.4"/><path class="n4-t" d="M100.5 30.6L97.6 32.7"/><path class="n4-t" d="M103.6 35.6L100.6 37.3"/><path class="n4-t n4-tm" d="M106.2 40.9L99.7 43.5"/><path class="n4-t" d="M108.1 46.4L104.8 47.4"/><path class="n4-t" d="M109.4 52.2L105.9 52.7"/><path class="n4-t" d="M110.0 58.0L106.5 58.2"/><path class="n4-t" d="M109.8 63.9L106.4 63.6"/><path class="n4-t n4-tm" d="M109.0 69.8L102.2 68.4"/><path class="n4-t" d="M107.6 75.5L104.2 74.4"/><path class="n4-t" d="M105.4 80.9L102.2 79.5"/><path class="n4-t" d="M102.6 86.1L99.6 84.3"/><path class="n4-t" d="M99.3 91.0L96.5 88.8"/><path class="n4-t n4-tm" d="M95.4 95.4L90.4 90.4"/><text class="n4-gn" x="35.3" y="87.7">0</text><text class="n4-gn" x="25.7" y="69.8">30</text><text class="n4-gn" x="27.7" y="49.6">60</text><text class="n4-gn" x="40.6" y="33.9">90</text><text class="n4-gn" x="60.0" y="28.0">120</text><text class="n4-gn" x="79.4" y="33.9">150</text><text class="n4-gn" x="92.3" y="49.6">180</text><text class="n4-gn" x="94.3" y="69.8">210</text><text class="n4-gn" x="84.7" y="87.7">240</text><text class="n4-unit" x="60" y="86">km/h</text><g class="n4-ndl"><path d="M58.6 66L60 13l1.4 53z"/></g><circle cx="60" cy="60" r="5.5" class="n4-hub"/></svg>
</div>
<h1 class="n4-title">Check the engine: this page won't start.</h1>
<p class="n4-sub">The warning light has been on for a while and the diagnostics only return code 404. Go back home while we take a look.</p>
<a class="n4-cta" href="/">Back to home</a>
</div>
</main>
<script>
document.querySelectorAll(".n4-garage").forEach((el) => {
const dash = el.querySelector(".n4-dash");
el.querySelector(".n4-start").addEventListener("click", () => {
dash.classList.remove("n4-go");
void dash.offsetWidth;
dash.classList.add("n4-go");
});
});
</script>
</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
See all 404Where to use it
Garages, car dealers and motoring sites can use this instrument cluster as their error page. On load both needles sweep the full dial and come back, the mechanical odometer drums roll up to 000404, and the warning lights run their test until only the amber engine light is left on.
The round start button replays the check and gives the rev counter a quick blip, while the idle needle trembles slightly. Gauges are drawn in inline SVG with real tick marks. Change the needle color with the accent and point the button home.