Oefening — Eenvoudige hero met Flexbox

In deze oefening maak je een eenvoudige hero-sectie: een grote header bovenaan je pagina met een achtergrondafbeelding, een titel en een korte ondertitel.

1. HTML-structuur

<header class="hero">
  <h1>Happy Halloween</h1>
  <p>Trick or treat</p>
</header>

2. CSS — Flexbox en achtergrondafbeelding

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  min-height: 70vh;

  background-image: url("../images/back-hero.jpg");
  background-size: cover;
  background-position: center;

  color: white;
  text-align: center;
}

.hero h1 {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.5rem;
}

3. Wat moet je zien?

De hero staat bovenaan de pagina.
De afbeelding vult de volledige hero.
De tekst staat gecentreerd.
De titel is groter dan de ondertitel.

4. Opdracht

Gebruik een achtergrondafbeelding
Plaats een titel en ondertitel
Zorg dat alles mooi gecentreerd staat met Flexbox

5. Extra

Plaats de tekst onderaan in plaats van in het midden
Voeg een donkere overlay toe met linear-gradient()
Voeg een knop toe onder de tekst