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 inicio
HTML + CSS404

404 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

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-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.

Versión Markdown con todo el código, para asistentes de IA

Más en 404

Ver todos: 404

Dó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.