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
Wegweiser-404
Ein hölzerner Wegweiser auf einer topografischen Karte; das 404-Schild hängt an einem Nagel und der Kompass ist ratlos.
Einstellungen
1x
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 · Seite nicht gefunden</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>Hütte</b><em translate="no">2,4 km</em></span>
<span class="n4-arrow n4-l" style="--t:1;--r:3deg"><b>Aussicht</b><em translate="no">1,1 km</em></span>
<span class="n4-arrow n4-r" style="--t:2;--r:-1deg"><b>Start</b><em translate="no">0,4 km</em></span>
<span class="n4-arrow n4-l n4-lost" style="--t:3"><b>Seite 404</b><em translate="no">? km</em></span>
<i class="n4-compass"><i></i></i>
</div>
<span class="n4-tag">Wanderweg GR 404</span>
<h1 class="n4-title">Dieser Weg führt nirgendwohin.</h1>
<p class="n4-sub">Wir sind allen Markierungen gefolgt, und die Seite ist nicht auf der Karte. Kehr um und geh zurück zum Ausgangspunkt.</p>
<a class="n4-cta" href="/">Zurück zum Ausgangspunkt</a>
</div>
</main>
</body>
</html>
Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus 404
Alle ansehen: 404Wofür du ihn nutzen kannst
Wandervereine, Outdoormarken und Tourismusseiten können diese Bergfehlerseite nutzen. Ein Holzpfosten mit rot-weißer Wegmarkierung trägt Pfeilschilder zur Hütte, zum Aussichtspunkt und zum Startpunkt, während das Schild zur Seite 404 lose an einem einzigen Nagel hängt und eine Kompassnadel kreist, ohne Norden zu finden.
Der Hintergrund zeichnet Höhenlinien mit wiederholten Verläufen, ganz ohne Bilder. Beim Überfahren wackeln die Schilder, bei reduzierter Bewegung bleibt das lose Schild ruhig. Ändere das Waldgrün und verlinke den Button mit der Startseite.