Oefening: maak een hero-sectie

In deze oefening maak je zelf een hero-sectie met een achtergrondafbeelding, tekst en een decoratieve onderkant.

Gebruik de theoriepagina’s bij deze oefening:

Doel

Je leert hoe je een hero opbouwt met:

  • een achtergrondafbeelding
  • een gradient-overlay
  • tekst met hiërarchie
  • flexbox voor de positionering
  • een gebogen onderkant met een pseudo-element

Opdracht

Maak een hero-sectie voor een fictieve tentoonstelling of voor een portfolio.

De hero moet bevatten:

  • een achtergrondafbeelding
  • een titel in twee regels
  • één woord in cursief
  • tekst onderaan geplaatst
  • een donkere overlay met een gradient

Extra uitdaging

  • voeg een gebogen onderkant toe met ::after
  • gebruik clamp() voor de tekstgrootte

Stappenplan

  1. Maak een <header> met een class hero.
  2. Voeg een achtergrondafbeelding toe met background-image.
  3. Gebruik linear-gradient() voor een overlay.
  4. Gebruik display: flex om de tekst onderaan te plaatsen.
  5. Maak de titel met span-elementen.
  6. Geef de titel verschillende groottes en gewichten.
  7. Voeg eventueel een boog toe met ::after.

Voorbeeldstructuur (HTML)

<header class="hero">
  <h1 class="hero-text">
    <span class="hero-first-line">Titel</span>
    <span class="hero-second-line">
      Ondertitel &amp; <span class="hero-italic">Accent</span>
    </span>
  </h1>
</header>

Tips

  • Gebruik background-size: cover.
  • Zorg dat je tekst leesbaar blijft door een overlay te gebruiken.
  • Werk met rem en clamp().
  • Controleer je uitlijning met flexbox.

Evaluatie (op 20)

  • Structuur HTML (4 p)
    Correct gebruik van header en span-elementen
  • Layout (6 p)
    Flexbox correct toegepast, tekst goed geplaatst
  • Styling (6 p)
    Kleuren, overlay en typografie verzorgd
  • Extra (4 p)
    Boog en/of clamp() correct toegepast

Reflectie (kort)

Beschrijf kort:

  • waarom je deze afbeelding gekozen hebt
  • hoe je de tekst leesbaar hebt gemaakt