<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="moon-card">
  <small>
    TONIGHT · 84% ILLUMINATED
  </small>
  <div class="moon-phases">
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
  </div>
  <h3>
    Waxing gibbous
  </h3>
  <p>
    Moonset at 05:48
  </p>
</article>

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

.moon-card{width:245px;padding:18px;border-radius:18px;background:#19233a;color:#f2f4ff;font-family:Arial;box-shadow:0 9px 18px #17203344}.moon-card small{font-size:8px;font-weight:800;letter-spacing:1px;color:#a6b7de}.moon-phases{display:flex;justify-content:space-between;align-items:center;margin:20px 0}.moon-phases i{width:25px;height:25px;border-radius:50%;background:linear-gradient(90deg,#dce5ff 50%,#35415b 50%);box-shadow:0 0 8px #b8c8ff44}.moon-phases i:nth-child(1){background:#35415b}.moon-phases i:nth-child(2){background:linear-gradient(90deg,#dce5ff 23%,#35415b 23%)}.moon-phases i:nth-child(3){background:linear-gradient(90deg,#dce5ff 50%,#35415b 50%)}.moon-phases i:nth-child(4){background:linear-gradient(90deg,#dce5ff 76%,#35415b 76%)}.moon-phases i:nth-child(5){background:#dce5ff}.moon-card h3{margin:0 0 6px;font-size:20px}.moon-card p{margin:0;color:#9caed0;font-size:10px}