Kodas

index.html — pripildyk galeriją

Prieš išdėstydamas galeriją, duok jai ką išdėstyti. Trys kortelės plačiame ekrane sėdėtų vienoje eilėje ir niekada neparodytų, kaip tinklelis apsivynioja. Pridėk dar tris, kad galerija turėtų šešias ir stulpeliai matomai užsipildytų bei apsivyniotų keičiantis ekrano pločiui.

Kiekviena nauja kortelė — tos pačios formos, kurią jau pažįsti: <article class="picture-card"> su antrašte (paveikslėlis + „mėgstamų" mygtukas) ir kūnu (pavadinimas + data). Skiriasi tik turinys: dar trys tikri APOD paveikslėliai, kiekvienas su savo sąžiningu alt, tikrais width/height ir loading="lazy".

<article class="picture-card">
  <div class="card-header">
    <img src="…/CrescentSaturn_cassini_1080.jpg" alt="Crescent Saturn"
         width="1080" height="682" loading="lazy">
    <button class="fav-btn" title="Save to collection" aria-label="Save to collection">♡</button>
  </div>
  <div class="card-body">
    <h2>Crescent Saturn</h2>
    <p class="picture-date">2019-07-07</p>
  </div>
</article>

Kitos dvi — Ispanų šokėjos spiralinė galaktika (960×951 — beveik kvadratinė) ir Magelano galaktika NGC 55 (1024×1024 — tobulas kvadratas). Jų matmenys vėl visi skirtingi, ir tai yra esmė: kad ir kokios formos būtų šaltinis, object-fit: cover ir tinklelis paverčia kiekvieną kortelę vienoda plytele. Kodo stulpelyje — visos šešios pilnai.

Atkreipk dėmesį: žymėjimui nereikėjo nieko žinoti apie išdėstymą. Kortelės — tiesiog turinys normalioje tėkmėje, kol kas vis dar stulpelis. Kitas žingsnis prideda vieną taisyklę konteineriui aplink jas, ir tos pačios šešios article virsta galerija.

index.html MODIFIKUOTI 33 eilutės pakeistos

Redaguok šį failą kataloge ./

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cosmos — Astronomy Picture of the Day</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <a href="#main-content" class="skip-link">Skip to main content</a>

  <nav class="navbar" aria-label="Main navigation">
    <a href="#home" class="brand">🌌 Cosmos</a>
    <div class="nav-links">
      <a href="#home" class="nav-link active">Home</a>
      <a href="#gallery" class="nav-link">Gallery</a>
    </div>
  </nav>

  <main id="main-content" tabindex="-1">

    <section id="home" aria-label="Home">
      <div class="hero-text">
        <h1>Explore the universe</h1>
        <p class="hero-sub">Every day NASA publishes a photograph of our universe, with a short explanation from an astronomer.</p>
        <p>Powered by NASA's <a href="https://apod.nasa.gov/apod/" class="text-link">Astronomy Picture of the Day</a>.</p>
      </div>
    </section>

    <section id="gallery" aria-label="Latest pictures">
      <div class="grid">

        <article class="picture-card">
          <div class="card-header">
            <img src="https://apod.nasa.gov/apod/image/1604/DustAngelNebula_rba1024.jpg" alt="A Dust Angel Nebula" width="1024" height="664" loading="lazy">
            <button class="fav-btn" title="Save to collection" aria-label="Save to collection">♡</button>
          </div>
          <div class="card-body">
            <h2>A Dust Angel Nebula</h2>
            <p class="picture-date">2016-04-28</p>
          </div>
        </article>

        <article class="picture-card">
          <div class="card-header">
            <img src="https://apod.nasa.gov/apod/image/0304/moonhalo_mccay.jpg" alt="A Halo Around the Moon" width="500" height="743" loading="lazy">
            <button class="fav-btn" title="Save to collection" aria-label="Save to collection">♡</button>
          </div>
          <div class="card-body">
            <h2>A Halo Around the Moon</h2>
            <p class="picture-date">2003-04-21</p>
          </div>
        </article>

        <article class="picture-card">
          <div class="card-header">
            <img src="https://apod.nasa.gov/apod/image/0411/burnscliff_opportunity.jpg" alt="Burns Cliff on Mars" width="640" height="480" loading="lazy">
            <button class="fav-btn" title="Save to collection" aria-label="Save to collection">♡</button>
          </div>
          <div class="card-body">
            <h2>Burns Cliff on Mars</h2>
            <p class="picture-date">2004-11-15</p>
          </div>
        </article>

        <article class="picture-card">
          <div class="card-header">
            <img src="https://apod.nasa.gov/apod/image/1907/CrescentSaturn_cassini_1080.jpg" alt="Crescent Saturn" width="1080" height="682" loading="lazy">
            <button class="fav-btn" title="Save to collection" aria-label="Save to collection">♡</button>
          </div>
          <div class="card-body">
            <h2>Crescent Saturn</h2>
            <p class="picture-date">2019-07-07</p>
          </div>
        </article>

        <article class="picture-card">
          <div class="card-header">
            <img src="https://apod.nasa.gov/apod/image/1907/NGC1566_Shatz_960d.jpg" alt="NGC 1566, the Spanish Dancer spiral galaxy" width="960" height="951" loading="lazy">
            <button class="fav-btn" title="Save to collection" aria-label="Save to collection">♡</button>
          </div>
          <div class="card-body">
            <h2>NGC 1566: The Spanish Dancer Spiral Galaxy</h2>
            <p class="picture-date">2019-07-02</p>
          </div>
        </article>

        <article class="picture-card">
          <div class="card-header">
            <img src="https://apod.nasa.gov/apod/image/1907/NGC55-LRGB_hager1024.jpg" alt="The Magellanic galaxy NGC 55" width="1024" height="1024" loading="lazy">
            <button class="fav-btn" title="Save to collection" aria-label="Save to collection">♡</button>
          </div>
          <div class="card-body">
            <h2>Magellanic Galaxy NGC 55</h2>
            <p class="picture-date">2019-07-12</p>
          </div>
        </article>

      </div>
    </section>

  </main>

</body>
</html>