<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="transit-card">
  <div class="transit-view">
    <span class="cloud cloud-a">
    </span>
    <span class="cloud cloud-b">
    </span>
    <span class="hill hill-a">
    </span>
    <span class="hill hill-b">
    </span>
    <b>
      08:42
    </b>
  </div>
  <div class="transit-info">
    <span>
      PLATFORM 06
    </span>
    <h3>
      Barcelona → Paris
    </h3>
    <p>
      Arriving in 14 min
      <i>
        ●
      </i>
    </p>
  </div>
</article>

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

.transit-card{width:255px;overflow:hidden;border:1px solid #293746;border-radius:16px;background:#f7f1e5;color:#263747;font-family:Arial,sans-serif;box-shadow:7px 8px 0 #293746;transition:transform .25s}.transit-card:hover{transform:translate(-3px,-3px)}.transit-view{position:relative;height:105px;overflow:hidden;background:linear-gradient(#91cef0 0 62%,#e8d493 62%);border-bottom:1px solid #293746}.transit-view b{position:absolute;top:13px;left:14px;padding:5px 8px;border-radius:5px;background:#293746;color:#fff;font-size:11px}.cloud{position:absolute;width:45px;height:12px;border-radius:20px;background:#fff9;animation:window-drift 8s linear infinite}.cloud-a{top:25px;left:-24px}.cloud-b{top:45px;left:120px;animation-delay:-4s}.hill{position:absolute;bottom:-13px;width:150px;height:57px;border-radius:50% 50% 0 0;background:#6da169}.hill-a{left:-25px}.hill-b{right:-55px;background:#4f8762}.transit-info{padding:14px 16px}.transit-info>span{font-size:9px;font-weight:800;letter-spacing:1.2px;color:#aa7040}.transit-info h3{margin:7px 0;font-size:17px}.transit-info p{margin:0;color:#64717d;font-size:12px}.transit-info i{color:#4aab73;font-style:normal}@keyframes window-drift{to{transform:translateX(290px)}}