AIMRAN
Mapa excursionistaRuta del CaresPicos de Europa
12 km · 4 h 30 minEscala 1:25 000
HTML + CSSKarten

Gefaltete Papierkarte

Eine Bergroute auf einer Leporello-Karte, die sich in drei Felder mit Falzen und Papierschatten auffaltet.

Einstellungen

16px
1x

Code

<div class="uvq07-map"><div class="mp"><div class="p1"><div class="fc fr"><span class="art" style="--o:0"><svg viewBox="0 0 195 100" aria-hidden="true"><path class="gd" d="M0 25H195M0 50H195M0 75H195M39 0V100M78 0V100M117 0V100M156 0V100"/><g class="cn"><ellipse cx="58" cy="40" rx="12" ry="7.9" transform="rotate(-12 58 40)"/><ellipse cx="58" cy="40" rx="22" ry="14.5" transform="rotate(-12 58 40)"/><ellipse class="ix" cx="58" cy="40" rx="33" ry="21.8" transform="rotate(-12 58 40)"/><ellipse cx="58" cy="40" rx="45" ry="29.7" transform="rotate(-12 58 40)"/><ellipse cx="142" cy="52" rx="9" ry="6.3" transform="rotate(18 142 52)"/><ellipse class="ix" cx="142" cy="52" rx="18" ry="12.6" transform="rotate(18 142 52)"/><ellipse cx="142" cy="52" rx="28" ry="19.6" transform="rotate(18 142 52)"/><ellipse cx="142" cy="52" rx="39" ry="27.3" transform="rotate(18 142 52)"/></g><g class="fo"><circle cx="96" cy="16" r="2"/><circle cx="101" cy="16" r="2"/><circle cx="106" cy="16" r="2"/><circle cx="96" cy="21" r="2"/><circle cx="101" cy="21" r="2"/><circle cx="106" cy="21" r="2"/><circle cx="96" cy="26" r="2"/><circle cx="101" cy="26" r="2"/><circle cx="106" cy="26" r="2"/></g><path class="rv" d="M0 80C30 72 50 88 80 76S120 62 150 74S180 90 195 82"/><path class="rt" d="M18 70C35 62 48 58 62 52S88 48 100 56S126 66 140 58S165 44 178 34"/><path class="pk" d="M55 41l3-5 3 5zM139 53l3-5 3 5z"/><circle class="pa" cx="18" cy="70" r="3"/><circle class="pb" cx="178" cy="34" r="3.4"/><text x="21" y="80">Poncebos</text><text x="160" y="27">Caín</text></svg></span></div><div class="p2"><div class="fc fr"><span class="art" style="--o:1"><svg viewBox="0 0 195 100" aria-hidden="true"><path class="gd" d="M0 25H195M0 50H195M0 75H195M39 0V100M78 0V100M117 0V100M156 0V100"/><g class="cn"><ellipse cx="58" cy="40" rx="12" ry="7.9" transform="rotate(-12 58 40)"/><ellipse cx="58" cy="40" rx="22" ry="14.5" transform="rotate(-12 58 40)"/><ellipse class="ix" cx="58" cy="40" rx="33" ry="21.8" transform="rotate(-12 58 40)"/><ellipse cx="58" cy="40" rx="45" ry="29.7" transform="rotate(-12 58 40)"/><ellipse cx="142" cy="52" rx="9" ry="6.3" transform="rotate(18 142 52)"/><ellipse class="ix" cx="142" cy="52" rx="18" ry="12.6" transform="rotate(18 142 52)"/><ellipse cx="142" cy="52" rx="28" ry="19.6" transform="rotate(18 142 52)"/><ellipse cx="142" cy="52" rx="39" ry="27.3" transform="rotate(18 142 52)"/></g><g class="fo"><circle cx="96" cy="16" r="2"/><circle cx="101" cy="16" r="2"/><circle cx="106" cy="16" r="2"/><circle cx="96" cy="21" r="2"/><circle cx="101" cy="21" r="2"/><circle cx="106" cy="21" r="2"/><circle cx="96" cy="26" r="2"/><circle cx="101" cy="26" r="2"/><circle cx="106" cy="26" r="2"/></g><path class="rv" d="M0 80C30 72 50 88 80 76S120 62 150 74S180 90 195 82"/><path class="rt" d="M18 70C35 62 48 58 62 52S88 48 100 56S126 66 140 58S165 44 178 34"/><path class="pk" d="M55 41l3-5 3 5zM139 53l3-5 3 5z"/><circle class="pa" cx="18" cy="70" r="3"/><circle class="pb" cx="178" cy="34" r="3.4"/><text x="21" y="80">Poncebos</text><text x="160" y="27">Caín</text></svg></span></div><div class="fc bk cv"><span class="k">Wanderkarte</span><b>Cares-Route</b><span class="ds">Picos de Europa<br>12 km · 4 h 30 min</span><i class="mi"></i><span class="sc">Maßstab 1:25.000</span></div><div class="p3"><div class="fc fr"><span class="art" style="--o:2"><svg viewBox="0 0 195 100" aria-hidden="true"><path class="gd" d="M0 25H195M0 50H195M0 75H195M39 0V100M78 0V100M117 0V100M156 0V100"/><g class="cn"><ellipse cx="58" cy="40" rx="12" ry="7.9" transform="rotate(-12 58 40)"/><ellipse cx="58" cy="40" rx="22" ry="14.5" transform="rotate(-12 58 40)"/><ellipse class="ix" cx="58" cy="40" rx="33" ry="21.8" transform="rotate(-12 58 40)"/><ellipse cx="58" cy="40" rx="45" ry="29.7" transform="rotate(-12 58 40)"/><ellipse cx="142" cy="52" rx="9" ry="6.3" transform="rotate(18 142 52)"/><ellipse class="ix" cx="142" cy="52" rx="18" ry="12.6" transform="rotate(18 142 52)"/><ellipse cx="142" cy="52" rx="28" ry="19.6" transform="rotate(18 142 52)"/><ellipse cx="142" cy="52" rx="39" ry="27.3" transform="rotate(18 142 52)"/></g><g class="fo"><circle cx="96" cy="16" r="2"/><circle cx="101" cy="16" r="2"/><circle cx="106" cy="16" r="2"/><circle cx="96" cy="21" r="2"/><circle cx="101" cy="21" r="2"/><circle cx="106" cy="21" r="2"/><circle cx="96" cy="26" r="2"/><circle cx="101" cy="26" r="2"/><circle cx="106" cy="26" r="2"/></g><path class="rv" d="M0 80C30 72 50 88 80 76S120 62 150 74S180 90 195 82"/><path class="rt" d="M18 70C35 62 48 58 62 52S88 48 100 56S126 66 140 58S165 44 178 34"/><path class="pk" d="M55 41l3-5 3 5zM139 53l3-5 3 5z"/><circle class="pa" cx="18" cy="70" r="3"/><circle class="pb" cx="178" cy="34" r="3.4"/><text x="21" y="80">Poncebos</text><text x="160" y="27">Caín</text></svg></span></div><div class="fc bk"></div></div></div></div></div><button type="button" aria-expanded="false" data-a="Karte aufklappen" data-b="Karte zuklappen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 4L3 6.5V20l6-2.5 6 2.5 6-2.5V4l-6 2.5zM9 4v13.5M15 6.5V20"/></svg><span>Karte aufklappen</span></button></div>

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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Karten

Alle ansehen: Karten

3D-Tilt-Karte

KartenReact + Motion

Spotlight-Karte

KartenReact + Motion

Wetter- und Kalender-Widget

KartenReact + Motion

Karte mit Spotlight-Rand

KartenHTML + CSS

Karte mit Lift und Zoom

KartenHTML + CSS

Karte mit 3D-Flip

KartenHTML + CSS

Karte mit lebendigem Verlauf

KartenHTML + CSS

Karte mit verstecktem Inhalt

KartenHTML + CSS

Wofür du ihn nutzen kannst

Papierkarten falten sich im Zickzack, und diese Karte baut die Geste in 3D-CSS nach: Drei verschachtelte Felder drehen sich um ihre gemeinsamen Kanten, der geschlossene Stapel zeigt ein gedrucktes Titelblatt, und beim Öffnen liegt die ganze Route mit Höhenlinien, Fluss und wandernder Strichellinie da. Passt zu Wander-Apps, Reiseführern, Veranstaltungsorten und Tourismusseiten.

Die Hauptfarbe ist Titelband, Route und Button, die zweite Fluss und Linien auf dem Titel. Ersetze die SVG-Karte durch eine eigene Zeichnung im selben Rahmen von 195 mal 100.