Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <nav class="navbar">
      <a href="#" class="logo nav-link" style="font-size: 1rem">ArStore</a>

<a href="#" class="nav-link cart">
          CART(0)
          <span class="cart-icon-wrapper">
            <svg
              class="nav-icon-svg"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
            >
              <path
                d="M7.00488 7.99966V5.99966C7.00488 3.23824 9.24346 0.999664 12.0049 0.999664C14.7663 0.999664 17.0049 3.23824 17.0049 5.99966V7.99966H20.0049C20.5572 7.99966 21.0049 8.44738 21.0049 8.99966V20.9997C21.0049 21.5519 20.5572 21.9997 20.0049 21.9997H4.00488C3.4526 21.9997 3.00488 21.5519 3.00488 20.9997V8.99966C3.00488 8.44738 3.4526 7.99966 4.00488 7.99966H7.00488ZM7.00488 9.99966H5.00488V19.9997H19.0049V9.99966H17.0049V11.9997H15.0049V9.99966H9.00488V11.9997H7.00488V9.99966ZM9.00488 7.99966H15.0049V5.99966C15.0049 4.34281 13.6617 2.99966 12.0049 2.99966C10.348 2.99966 9.00488 4.34281 9.00488 5.99966V7.99966Z"
              ></path>
            </svg>
          </span>
        </a>
      </div>
    </nav>
    <section class="section">
      <div class="cards">
        <a href="#" class="card card-1">
          <figure class="visual">
            <img
              class="card-img"
              src="https://raw.githubusercontent.com/mobalti/ui/main/cards-01/images/img-1.avif"
              alt="Person with a game controller in hand"
            />
            <figcaption class="figcaption">Early Access</figcaption>
          </figure>
        </a>
        <a href="#" class="card card-2">
          <figure class="visual">
            <img
              class="card-img"
              src="https://raw.githubusercontent.com/mobalti/ui/main/cards-01/images/img-2.avif"
              alt="Person with curly hair in neon lighting"
            />
            <figcaption class="figcaption">Top Sellers</figcaption>
          </figure>
        </a>
        <a href="#" class="card card-3">
          <figure class="visual">
            <img
              class="card-img"
              src="https://raw.githubusercontent.com/mobalti/ui/main/cards-01/images/img-3.avif"
              alt="Person in vibrant neon lighting with abstract shapes"
            />
            <figcaption class="figcaption">New Releases</figcaption>
          </figure>
        </a>
        <a href="#" class="card card-4">
          <figure class="visual">
            <img
              class="card-img"
              src="https://raw.githubusercontent.com/mobalti/ui/main/cards-01/images/img-4.avif"
              alt="Person wearing a virtual reality headset in a blue-lit room"
            />
            <figcaption class="figcaption">Upcoming</figcaption>
          </figure>
        </a>
      </div>
    </section>  
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@layer reset {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

:where(:not(dialog)) {
    margin: 0;
  }
}

@layer demo {
  :root {
    color-scheme: dark;
    --nav-block-size: 74px;
  }
}

@layer components.navbar {
  .navbar {
    background-color: black;
    block-size: var(--nav-block-size);
    display: grid;
    gap: 1rem;
    grid-auto-flow: column;
    inset-block-start: 0;
    justify-content: space-between;
    padding-inline: 0.75rem;
    place-items: center;
    position: sticky;
    z-index: 10;
  }

.nav-actions {
    display: grid;
    gap: 1rem;
    grid-auto-flow: column;
    place-items: center;
  }

.nav-link {
    color: white;
    text-decoration: none;
    font: 500 0.875rem/1.25rem system-ui, sans-serif;
  }

.search-wrap {
    display: grid;
    grid-auto-flow: column;
    place-items: center;
    gap: 0.25rem;
  }

.search-btn {
    color: white;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    padding: 2px;
    margin: 0;
    cursor: pointer;
    background-color: inherit;
    border: none;
  }

.search-input {
    border: none;
    background-color: inherit;
    border-block-end: 1px solid currentColor;
    color: white;
    padding-block: 0.25rem;
    min-inline-size: 5ch;
    inline-size: 100%;
    font: 500 0.875rem/1.25rem system-ui, sans-serif;

&::placeholder {
      color: white;
    }

&:focus {
      outline: none;
    }
  }

.cart {
    display: grid;
    grid-auto-flow: column;
    place-items: center;
    gap: 2px;
  }

.cart-icon-wrapper {
    padding: 2px;
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }

.nav-icon-svg {
    block-size: auto;
    display: block;
    max-inline-size: 100%;
  }
}

@layer components.collections {
  .section {
    background-color: black;
    display: grid;
    inline-size: 100%;
    min-block-size: max(600px, calc(100dvb - var(--nav-block-size)));
    padding-block-end: 0.75rem;
    padding-inline: 0.75rem;
    place-items: center;
    position: relative;
  }

.cards {
    background-color: black;
    block-size: 100%;
    display: grid;
    gap: 1rem;
    inline-size: 100%;

@media (width > 1024px) {
      grid-template-columns: 1fr 1fr;
    }
  }

.card {
    container-type: size;
    inline-size: 100%;
    block-size: 100%;
    text-decoration: none;
    min-block-size: 280px;
    position: relative;

&:hover::after {
      opacity: 1;
    }

&::after {
      content: '';
      display: block;
      inset: 0;
      mix-blend-mode: multiply;
      opacity: 0;
      position: absolute;
      transition: opacity 0.2s ease;
    }
  }

.card-1::after {
    background-color: hsl(343, 98%, 52%);
  }

.card-2::after {
    background-color: hsl(199, 100%, 38%);
  }

.card-3::after {
    background-color: hsl(119, 59%, 64%);
  }

.card-4::after {
    background-color: hsl(49, 83%, 69%);
  }

.visual {
    background-color: black;
    block-size: 100%;
    display: grid;
    inline-size: 100%;
    overflow: hidden;
    place-items: center;

>* {
      grid-area: 1/1;
    }
  }

.card-img {
    block-size: 100cqb;
    inline-size: 100cqi;
    border-radius: inherit;
    display: block;
    background: conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111);
    filter: grayscale();
    object-fit: cover;
  }

.figcaption {
    z-index: 2;
    color: white;
    font: 400 8cqi / normal system-ui, sans-serif;
  }
}

Frontend Forever App