Kort og et fotogalleri · Kod med Martin

Byg de to mest populære dele af moderne hjemmesider: indholdskort og et gitter af fotos.

Vis mig: et kort

Et kort er et hvidt rektangel med en skygge, der holder et billede og tekst sammen. Du kender dem fra YouTube, Netflix og onlinebutikker. Et kort er bare en boks med et par egenskaber:

<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);
}

To nye ting her:

<div> er en tom boks uden egen betydning – bare en “pakke” til at samle ting, der hører sammen.
box-shadow er en skygge: tallene betyder forskydning til højre, forskydning ned, sløring og farve (her, sort med 10% gennemsigtighed). Skyggen er det, der forvandler et fladt rektangel til et kort.

Vis mig: kort side om side

Nu til et trick, du allerede kender – flexbox. Pak kortene ind i en boks og sæt den til 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 = på en computer sidder kortene side om side, på en telefon stables de. Du har lige bygget en responsiv hjemmeside – en der tilpasser sig enhver skærm.

Nu er det din tur 💪

Tilføj en sektion med kort til din hjemmeside – mindst tre side om side. Hvad der kommer på dem, afhænger af dit projekt:

🏫 Skolehjemmeside – løsning (lærerkort)

<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>

🙋 Personlig hjemmeside – løsning (hobbykort)

<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>

🌍 Rejsejournal – løsning (turkort)

<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>

⚽ Klubhjemmeside – løsning (spillerkort)

<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>

Den samme CSS virker for hvert projekt:

.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);
}

Bonus: et fotogalleri

Har du mange fotos? Et gitter af fotos er endnu enklere – brug bare aspect-ratio og object-fit for at holde dem alle samme størrelse:

<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 */
}

✅

Tjek dig selv: Din hjemmeside har kort med skygger, der sidder side om side. Gør dit browservindue til telefonbredde – kortene stables. Det kaldes responsivt design, og du har lige klaret det.

Det tager du med fra denne lektion

<div> er en indpakningsboks til ting, der hører sammen.
Et kort = baggrund + border-radius + padding + box-shadow.
Flexbox med flex-wrap og min-width = et layout, der virker på både computere og telefoner.