Mapa excursionistaRuta del CaresPicos de Europa
12 km · 4 h 30 minEscala 1:25 000
12 km · 4 h 30 minEscala 1:25 000
HTML + CSSCards
Mapa de papel plegado
Una ruta de montaña impresa en un mapa de acordeón que se despliega en tres paneles con sus pliegues y sombras.
Ajustes
16px
1x
Código
<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">Mapa excursionista</span><b>Ruta del Cares</b><span class="ds">Picos de Europa<br>12 km · 4 h 30 min</span><i class="mi"></i><span class="sc">Escala 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="Desplegar mapa" data-b="Plegar mapa"><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>Desplegar mapa</span></button></div>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 Cards
Ver todos: CardsDónde usarlo
Los mapas de papel se doblan en zigzag y esta tarjeta reproduce el gesto con CSS 3D: tres paneles anidados giran sobre sus bordes, la pila cerrada muestra una portada impresa y al abrirla aparece la ruta completa con curvas de nivel, un río y un sendero discontinuo que avanza. Encaja en apps de senderismo, guías de viaje, recintos de eventos y webs de turismo.
El color principal es la franja de portada, la ruta y el botón; el secundario, el río y las curvas de la portada. Sustituye el mapa SVG por tu dibujo en el mismo marco de 195 por 100.