<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gallery 03 — ALEXY LINK</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section class="gallery" aria-label="Masonry gallery">
      <div class="gallery__inner">
        <div class="gallery__header">
          <h2 class="gallery__heading">Ship Your Website Quickly with ALEXY LINK</h2>
          <p class="gallery__subheading">Use prebuilt templates and components for a professional, stunning look.</p>
        </div>

        <div class="gallery__grid" data-gallery>
          <button
            type="button"
            class="tile tile--active"
            data-tile
            data-span="normal"
            data-title="Open horizon"
            data-category="Landscape"
            aria-pressed="true"
            aria-label="Open horizon — currently featured"
          >
            <img
              class="tile__image"
              src="https://images.unsplash.com/photo-1751877056213-40060dd66290?q=80&w=1200&auto=format&fit=crop"
              alt="Dry, open desert landscape stretching toward the horizon under a clear blue sky"
              width="1200"
              height="1500"
              loading="lazy"
              decoding="async"
            />
            <span class="tile__caption">
              <span class="tile__title">Open horizon</span>
              <span class="tile__category">Landscape</span>
            </span>
          </button>

          <button
            type="button"
            class="tile tile--tall"
            data-tile
            data-span="tall"
            data-title="In motion"
            data-category="Workspace"
            aria-pressed="false"
            aria-label='Feature "In motion" as the large image'
          >
            <img
              class="tile__image"
              src="https://images.unsplash.com/photo-1772115428479-9045bc0c2a3d?q=80&w=700&auto=format&fit=crop"
              alt="Close-up of a hand typing on a mechanical keyboard"
              width="700"
              height="900"
              loading="lazy"
              decoding="async"
            />
            <span class="tile__caption">
              <span class="tile__title">In motion</span>
              <span class="tile__category">Workspace</span>
            </span>
          </button>

          <button
            type="button"
            class="tile"
            data-tile
            data-span="normal"
            data-title="Light &amp; shadow"
            data-category="Interior"
            aria-pressed="false"
            aria-label='Feature "Light &amp; shadow" as the large image'
          >
            <img
              class="tile__image"
              src="https://images.unsplash.com/photo-1760284739389-8a833519d6a5?q=80&w=700&auto=format&fit=crop"
              alt="Minimalist white architectural walls patterned with rhythmic sunlight and shadow"
              width="700"
              height="500"
              loading="lazy"
              decoding="async"
            />
            <span class="tile__caption">
              <span class="tile__title">Light &amp; shadow</span>
              <span class="tile__category">Interior</span>
            </span>
          </button>

          <button
            type="button"
            class="tile tile--wide"
            data-tile
            data-span="wide"
            data-title="Sketch to spec"
            data-category="Product"
            aria-pressed="false"
            aria-label='Feature "Sketch to spec" as the large image'
          >
            <img
              class="tile__image"
              src="https://images.unsplash.com/photo-1753162657504-15a8e14d2606?q=80&w=1200&auto=format&fit=crop"
              alt="Close-up of a hand sketching a design on paper, with scissors and a ruler on a studio table"
              width="1200"
              height="700"
              loading="lazy"
              decoding="async"
            />
            <span class="tile__caption">
              <span class="tile__title">Sketch to spec</span>
              <span class="tile__category">Product</span>
            </span>
          </button>

          <button
            type="button"
            class="tile"
            data-tile
            data-span="normal"
            data-title="Color study"
            data-category="Abstract"
            aria-pressed="false"
            aria-label='Feature "Color study" as the large image'
          >
            <img
              class="tile__image"
              src="https://images.unsplash.com/photo-1774802035419-6ac3c8536c72?q=80&w=700&auto=format&fit=crop"
              alt="Abstract architectural forms in green and purple tones with dramatic shadow play"
              width="700"
              height="500"
              loading="lazy"
              decoding="async"
            />
            <span class="tile__caption">
              <span class="tile__title">Color study</span>
              <span class="tile__category">Abstract</span>
            </span>
          </button>

          <button
            type="button"
            class="tile"
            data-tile
            data-span="normal"
            data-title="Reading nook"
            data-category="Interior"
            aria-pressed="false"
            aria-label='Feature "Reading nook" as the large image'
          >
            <img
              class="tile__image"
              src="https://images.unsplash.com/photo-1741557337567-759a930dbb7d?q=80&w=700&auto=format&fit=crop"
              alt="Warm, sunlit reading nook with ceramic pottery, potted plants and books"
              width="700"
              height="500"
              loading="lazy"
              decoding="async"
            />
            <span class="tile__caption">
              <span class="tile__title">Reading nook</span>
              <span class="tile__category">Interior</span>
            </span>
          </button>
        </div>
      </div>
    </section>

    <script src="script.js"></script>
  </body>
</html>
Gallery 03

Requirements

Dependencies

Usage
