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

Folded paper map card

A mountain route printed on an accordion map that unfolds into three panels with creases and paper shading.

Settings

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">Hiking map</span><b>Cares Trail</b><span class="ds">Picos de Europa<br>12 km · 4 h 30 min</span><i class="mi"></i><span class="sc">Scale 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="Unfold map" data-b="Fold map"><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>Unfold map</span></button></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

Markdown version with all the code, for AI assistants

More in Cards

See all Cards

3D tilt card

CardsReact + Motion

Spotlight card

CardsReact + Motion

Weather and calendar widget

CardsReact + Motion

Spotlight border card

CardsHTML + CSS

Lift and zoom card

CardsHTML + CSS

3D flip card

CardsHTML + CSS

Animated gradient card

CardsHTML + CSS

Hover reveal card

CardsHTML + CSS

Where to use it

Paper maps fold in a zigzag, and this card reproduces the gesture in 3D CSS: three nested panels rotate around their shared edges, the closed stack shows a printed cover, and opening it spreads the full route with contour lines, a river and a marching dashed trail. It fits hiking apps, travel guides, event venues and tourism sites.

The main color is the cover band, the route and the button, the second the river and cover contours. Replace the SVG map with your own drawing in the same 195 by 100 frame.