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

Carte routière pliée en papier

Un itinéraire de montagne imprimé sur une carte en accordéon qui se déplie en trois volets avec plis et ombres.

Réglages

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">Carte de randonnée</span><b>Sentier du Cares</b><span class="ds">Picos de Europa<br>12 km · 4 h 30 min</span><i class="mi"></i><span class="sc">Échelle 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="Déplier la carte" data-b="Replier la carte"><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>Déplier la carte</span></button></div>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Cartes

Voir tout : Cartes

Carte inclinable 3D

CartesReact + Motion

Carte à halo lumineux

CartesReact + Motion

Widget météo et agenda

CartesReact + Motion

Carte à bordure lumineuse

CartesHTML + CSS

Carte qui se soulève

CartesHTML + CSS

Carte qui se retourne

CartesHTML + CSS

Carte au dégradé animé

CartesHTML + CSS

Carte à contenu révélé

CartesHTML + CSS

Où l’utiliser

Les cartes papier se plient en zigzag, et cette carte reproduit le geste en CSS 3D : trois volets imbriqués tournent autour de leurs bords communs, la pile fermée montre une couverture imprimée, et l'ouverture déploie tout l'itinéraire avec courbes de niveau, rivière et sentier en pointillés qui avance. Pour applis de randonnée, guides de voyage, lieux d'événements et sites touristiques.

La couleur principale donne le bandeau, l'itinéraire et le bouton, la seconde la rivière et les courbes de la couverture. Remplace la carte SVG par ton dessin dans le même cadre de 195 sur 100.