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 inicio404 Taller
El cuadro de un coche de noche: las agujas hacen el chequeo, el cuentakilómetros llega a 404 y el testigo de avería sigue encendido.
Ajustes
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-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">Revisar página 404</p>
<button class="n4-start" type="button">Arrancar</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">Revisa el motor: esta página no arranca.</h1>
<p class="n4-sub">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.</p>
<a class="n4-cta" href="/">Volver al inicio</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 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
Talleres, concesionarios y webs de motor pueden usar este cuadro de instrumentos como página de error. Al cargar, las dos agujas recorren la esfera entera y vuelven, los rodillos del cuentakilómetros giran hasta 000404 y los testigos hacen su prueba hasta que solo queda encendido el ámbar del motor.
El botón redondo de arranque repite el chequeo y da un acelerón al cuentarrevoluciones, mientras la aguja tiembla un poco al ralentí. Las esferas son SVG con marcas reales. Cambia el color de las agujas con el acento y enlaza el botón con tu portada.