Kort og et bildegalleri · Kode med Martin

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

Jeg viser deg: et kort

Et kort er et hvidt rektangel med en skygge, der holder et bilde og tekst sammen. Du kjenner dem fra YouTube, Netflix og netthandelker. 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 farge (her, sort med 10% gjennomsigtighed). Skyggen er det, der forvandler et fladt rektangel til et kort.

Jeg viser deg: kort side om side

Nu til et trick, du allerede kjenner – flexbox. Pak kortene ind i en boks og sett 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 datamaskin sidder kortene side om side, på en telefon stables de. Du har nettopp bygget en responsiv nettside – en der tilpasser sig hver skjerm.

Nå er det din tur 💪

Legg til en sektion med kort til din nettside – mindst tre side om side. Hva der kommer på dem, afhænger af prosjektet ditt:

🏫 Skolenettside – 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 nettside – 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>

🌍 Reisejournal – 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>

⚽ Klubnettside – 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 fungerer 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 bildegalleri

Har du mange bilder? Et gitter af bilder er endnu enklere – bruk 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 */
}

✅

Sjekk deg selv: Din nettside har kort med skygger, der sidder side om side. Gjør ditt nettleservindue til telefonbredde – kortene stables. Det kaldes responsivt design, og du har lige klaret det.

Dette tar du med deg fra leksjonen

<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 fungerer på både datamaskine og telefoner.