Karty i galeria zdjęć · Koduj z Martinem

Zbuduj dwa najpopularniejsze elementy nowoczesnych stron: karty z treścią i siatkę zdjęć.

Pokażę ci: karta

Karta to biały prostokąt z cieniem, który łączy obrazek i tekst. Znasz je z YouTube, Netflix i sklepów online. Karta to po prostu pudełko z kilkoma właściwościami:

<div class="card">
  <img src="images/photo.jpg" alt="Photo description">
  <h3>Card heading</h3>
  <p>Short text for the card.</p>
</div>

.card {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Dwie nowe rzeczy:

<div> to puste pudełko bez własnego znaczenia – tylko „paczka” na rzeczy, które idą razem.
box-shadow to cień: liczby to przesunięcie w prawo, w dół, rozmycie i kolor (tu czarny z 10% kryciem). Cień zamienia płaski prostokąt w kartę.

Pokażę ci: karty obok siebie

Teraz trik, który już znasz – flexbox. Owij karty w pudełko i ustaw flex:

<div class="cards">
  <div class="card">…</div>
  <div class="card">…</div>
  <div class="card">…</div>
</div>

.cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cards .card {
  flex: 1;             /* cards fairly share the available space */
  min-width: 200px;    /* but none will ever be narrower than 200px */
}

flex-wrap: wrap + min-width = na komputerze karty obok siebie, na telefonie jedna pod drugą. Właśnie zbudowałeś responsywną stronę – taką, która dopasowuje się do ekranu.

Teraz ty 💪

Dodaj sekcję z kartami – co najmniej trzy obok siebie. Co w nich będzie, zależy od projektu:

🏫 Strona szkoły – rozwiązanie (karty nauczycieli)

<h2>Our Teachers</h2>
<div class="cards">
  <div class="card">
    <h3>Ms. Turner</h3>
    <p>4th grade homeroom. Teaches English and art. Loves cats.</p>
  </div>
  <div class="card">
    <h3>Mr. Bennett</h3>
    <p>Math and P.E. Runs the floorball club.</p>
  </div>
  <div class="card">
    <h3>Principal Adams</h3>
    <p>Running the school for 10 years. Plays the piano.</p>
  </div>
</div>

🙋 Strona osobista – rozwiązanie (karty hobby)

<h2>My Hobbies</h2>
<div class="cards">
  <div class="card">
    <img src="images/soccer.jpg" alt="Me during a match">
    <h3>Soccer</h3>
    <p>I play forward for the youth team. 12 goals this year!</p>
  </div>
  <div class="card">
    <img src="images/minecraft-build.jpg" alt="My castle in Minecraft">
    <h3>Minecraft</h3>
    <p>I build huge castles. This one took a month.</p>
  </div>
  <div class="card">
    <h3>Coding</h3>
    <p>I'm building this very website right now. And this is just the start.</p>
  </div>
</div>

🌍 Dziennik podróży – rozwiązanie (karty wyjazdów)

<h2>Our Trips</h2>
<div class="cards">
  <div class="card">
    <img src="images/mountains.jpg" alt="View from the summit">
    <h3>The Mountains</h3>
    <p>A three-day hike. Best part: wild berries and the lookout tower.</p>
  </div>
  <div class="card">
    <img src="images/sea.jpg" alt="A bay in Greece">
    <h3>Greece</h3>
    <p>A week at the beach. We saw dolphins!</p>
  </div>
  <div class="card">
    <img src="images/dc.jpg" alt="View from a monument in Washington, D.C.">
    <h3>Washington, D.C.</h3>
    <p>Museums, monuments, and way too much walking.</p>
  </div>
</div>

⚽ Strona klubu – rozwiązanie (karty zawodników)

<h2>Roster</h2>
<div class="cards">
  <div class="card">
    <h3>Jake · goalkeeper 🧤</h3>
    <p>Team captain. 5 clean sheets this season.</p>
  </div>
  <div class="card">
    <h3>Owen · midfield ⚡</h3>
    <p>Fastest player on the team. 8 assists.</p>
  </div>
  <div class="card">
    <h3>Tom · forward 🎯</h3>
    <p>Top scorer. 14 goals this season.</p>
  </div>
</div>

Ten sam CSS działa dla wszystkich projektów:

.cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cards .card {
  flex: 1;
  min-width: 200px;
}

.card {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Extra: galeria zdjęć

Masz dużo zdjęć? Siatka zdjęć jest jeszcze prostsza – użyj aspect-ratio i object-fit, żeby wszystkie miały ten sam rozmiar:

<div class="gallery">
  <img src="images/p1.jpg" alt="…">
  <img src="images/p2.jpg" alt="…">
  <img src="images/p3.jpg" alt="…">
  <img src="images/p4.jpg" alt="…">
</div>

.gallery {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gallery img {
  width: 180px;
  aspect-ratio: 1;      /* a square */
  object-fit: cover;    /* the photo fills the square and gets cropped, not squished */
}

✅

Sprawdź się: Strona ma karty z cieniami obok siebie. Zmniejsz okno do szerokości telefonu – karty układają się w stos. To responsywny design – właśnie go osiągnąłeś.

Co wyniesiesz z tej lekcji

<div> to opakowanie na rzeczy, które idą razem.
Karta = tło + border-radius + padding + box-shadow.
Flexbox z flex-wrap i min-width = układ działający na komputerze i telefonie.