<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="map-card">
  <div class="map-route">
    <i>
    </i>
    <b>
      ✦
    </b>
  </div>
  <small>
    WEEKEND QUEST
  </small>
  <h3>
    Find the hidden garden
  </h3>
  <p>
    0.8 km away
  </p>
</article>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.map-card{width:240px;padding:15px;border-radius:13px;background:#e8d4a5;color:#594229;font-family:Arial;box-shadow:6px 8px 0 #9a744d;transition:transform .25s}.map-card:hover{transform:rotate(1deg) translateY(-4px)}.map-route{position:relative;height:76px;overflow:hidden;border:1px solid #b99768;border-radius:8px;background:repeating-linear-gradient(45deg,#dfc596 0 9px,#e8d4a5 10px 18px)}.map-route i{position:absolute;top:37px;left:16px;width:145px;border-top:3px dashed #b76346;transform:rotate(-13deg);transform-origin:left;transition:width .55s}.map-route b{position:absolute;right:15px;top:14px;color:#b76346;font-size:25px;transition:transform .4s}.map-card:hover .map-route i{width:190px}.map-card:hover .map-route b{transform:scale(1.3) rotate(22deg)}.map-card small{display:block;margin-top:13px;font-size:9px;font-weight:800;letter-spacing:1px;color:#a96b48}.map-card h3{margin:6px 0;font-size:17px}.map-card p{margin:0;font-size:10px;color:#8f765b}