Sendero GR 404
Este sendero no lleva a ninguna parte.
Hemos seguido todas las marcas y la página no aparece en el mapa. Da media vuelta y vuelve al inicio del camino.
Volver al inicio del caminoHTML + CSS404
404 Sendero
Un poste de sendero sobre un mapa topográfico; la tablilla del 404 cuelga de un clavo y la brújula no se aclara.
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-trail {
--accent: #2f6b3a;
--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-trail *,.n4-trail *::before,.n4-trail *::after {
box-sizing: border-box;
}
.n4-trail .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-trail .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-trail .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-trail .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-trail .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-trail .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-trail .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-trail .n4-stars,.n4-trail .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-trail .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-trail-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-trail .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-trail-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-trail [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-trail-tw {
from {
opacity: .3;
}
}
@keyframes n4-trail-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-trail-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-trail *,.n4-trail *::before,.n4-trail *::after {
animation: none!important;
transition: none!important;
}
}
.n4-trail {
background: repeating-radial-gradient(ellipse at 16% 80%,transparent 0 2.4cqmin,rgba(130,92,45,.2) 2.4cqmin 2.65cqmin),repeating-radial-gradient(ellipse at 86% 14%,transparent 0 2.9cqmin,rgba(130,92,45,.16) 2.9cqmin 3.15cqmin),radial-gradient(90% 70% at 50% 40%,#f6eedc,#e2d1ad);
color: #2a2116;
}
.n4-trail .n4-post {
position: relative;
width: 26em;
height: 19em;
font-size: min(1.9cqmin,13px);
margin-bottom: 1cqmin;
}
.n4-trail .n4-pole {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2.2em;
margin-left: -1.1em;
clip-path: polygon(50% 0,100% 1.1em,100% 100%,0 100%,0 1.1em);
background: repeating-linear-gradient(90deg,rgba(0,0,0,.09) 0 .15em,transparent .15em .6em),linear-gradient(90deg,#6e4320,#a36c38 45%,#6e4320);
}
.n4-trail .n4-gr {
position: absolute;
left: 0;
right: 0;
bottom: 3em;
height: 1.6em;
background: linear-gradient(#f8f5ee 0 42%,transparent 42% 58%,#c62828 58%);
}
.n4-trail .n4-arrow {
position: absolute;
top: calc(1.6em + var(--t) * 3.5em);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
width: 12.5em;
height: 2.8em;
color: #f7e9cc;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
background: linear-gradient(transparent 82%,rgba(0,0,0,.22) 82%),repeating-linear-gradient(1deg,rgba(0,0,0,.08) 0 .15em,transparent .15em .8em),linear-gradient(#a8692f,#7a4519);
rotate: var(--r,0deg);
transition: rotate .3s;
cursor: default;
}
.n4-trail .n4-arrow b {
font: 800 .95em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
}
.n4-trail .n4-arrow em {
font: 700 .85em/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-style: normal;
white-space: nowrap;
}
.n4-trail .n4-arrow::after {
content: "";
position: absolute;
top: 50%;
width: .42em;
height: .42em;
margin-top: -.21em;
border-radius: 50%;
background: #3a2410;
box-shadow: inset 0 0 0 .1em #c9a46a;
}
.n4-trail .n4-r {
left: calc(50% - .5em);
padding: 0 1.9em 0 1.3em;
transform-origin: 0 50%;
clip-path: polygon(0 0,calc(100% - 1.2em) 0,100% 50%,calc(100% - 1.2em) 100%,0 100%);
}
.n4-trail .n4-r::after {
left: .45em;
}
.n4-trail .n4-l {
right: calc(50% - .5em);
padding: 0 1.3em 0 1.9em;
flex-direction: row-reverse;
transform-origin: 100% 50%;
clip-path: polygon(1.2em 0,100% 0,100% 100%,1.2em 100%,0 50%);
}
.n4-trail .n4-l::after {
right: .45em;
}
.n4-trail .n4-arrow:hover {
animation: n4-trail-nudge calc(.7s / var(--k));
}
.n4-trail .n4-lost {
transform-origin: calc(100% - .66em) 50%;
color: #ffe3c4;
background: linear-gradient(transparent 82%,rgba(0,0,0,.22) 82%),repeating-linear-gradient(1deg,rgba(0,0,0,.1) 0 .15em,transparent .15em .7em),linear-gradient(#b4743b,#8a5226);
animation: n4-trail-hang calc(3.4s / var(--k)) ease-in-out infinite alternate;
}
.n4-trail .n4-lost:hover {
animation: n4-trail-hang calc(.5s / var(--k)) ease-in-out infinite alternate;
}
.n4-trail .n4-compass {
position: absolute;
right: 0;
bottom: 0;
width: 5.4em;
height: 5.4em;
border-radius: 50%;
background: radial-gradient(circle,#f8f1e0 0 58%,#c9a86a 60% 66%,#6b4a1f 67%);
box-shadow: 0 .3em .5em rgba(0,0,0,.3);
}
.n4-trail .n4-compass::before {
content: "N";
position: absolute;
top: .55em;
left: 50%;
translate: -50% 0;
font: 800 .75em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
color: #c62828;
}
.n4-trail .n4-compass i {
position: absolute;
left: 50%;
top: 22%;
bottom: 22%;
width: .7em;
margin-left: -.35em;
background: linear-gradient(#c62828 50%,#2a2116 50%);
clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
animation: n4-trail-lost calc(5s / var(--k)) ease-in-out infinite;
}
.n4-trail .n4-tag {
color: var(--accent);
}
.n4-trail .n4-title {
font-size: clamp(20px,5cqmin,42px);
font-weight: 800;
letter-spacing: -.03em;
}
.n4-trail .n4-sub {
color: #6b5a43;
}
.n4-trail .n4-cta {
background: var(--accent);
color: #f6eedc;
}
@keyframes n4-trail-nudge {
25% {
rotate: calc(var(--r,0deg) + 6deg);
}
50% {
rotate: calc(var(--r,0deg) - 4deg);
}
75% {
rotate: calc(var(--r,0deg) + 2deg);
}
}
@keyframes n4-trail-hang {
from {
rotate: -27deg;
}
to {
rotate: -19deg;
}
}
@keyframes n4-trail-lost {
0% {
rotate: 0deg;
}
20% {
rotate: 140deg;
}
35% {
rotate: 95deg;
}
55% {
rotate: 290deg;
}
70% {
rotate: 250deg;
}
100% {
rotate: 360deg;
}
}
@media (prefers-reduced-motion:reduce) {
.n4-trail .n4-lost {
rotate: -24deg;
}
}
</style>
</head>
<body>
<main class="n4-trail">
<div class="n4-copy">
<div class="n4-post" aria-hidden="true">
<i class="n4-pole"><i class="n4-gr"></i></i>
<span class="n4-arrow n4-r" style="--t:0;--r:-2deg"><b>Refugio</b><em translate="no">2,4 km</em></span>
<span class="n4-arrow n4-l" style="--t:1;--r:3deg"><b>Mirador</b><em translate="no">1,1 km</em></span>
<span class="n4-arrow n4-r" style="--t:2;--r:-1deg"><b>Inicio</b><em translate="no">0,4 km</em></span>
<span class="n4-arrow n4-l n4-lost" style="--t:3"><b>Página 404</b><em translate="no">? km</em></span>
<i class="n4-compass"><i></i></i>
</div>
<span class="n4-tag">Sendero GR 404</span>
<h1 class="n4-title">Este sendero no lleva a ninguna parte.</h1>
<p class="n4-sub">Hemos seguido todas las marcas y la página no aparece en el mapa. Da media vuelta y vuelve al inicio del camino.</p>
<a class="n4-cta" href="/">Volver al inicio del camino</a>
</div>
</main>
</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
Clubes de montaña, marcas de exterior y webs de turismo pueden usar esta página de error de montaña. Un poste de madera con marcas blancas y rojas sostiene flechas hacia el refugio, el mirador y el inicio, mientras la tablilla de la página 404 cuelga suelta de un solo clavo y la aguja de una brújula da vueltas sin encontrar el norte.
El fondo dibuja curvas de nivel con degradados repetidos, sin imágenes. Al pasar el puntero, cada flecha se tambalea, y con movimiento reducido la tablilla suelta se queda quieta. Cambia el verde bosque y enlaza el botón con tu portada.