Oefening — Footer met social icons & mail

We voegen onderaan de pagina een footer toe met links naar socials en e-mail. Elk icoon is een anchor met een hover/focus-effect. We gebruiken Bootstrap Icons voor de pictogrammen.

1. Voorbereiding — Bootstrap Icons laden

Voeg in <head> (boven je eigen CSS) deze regel toe:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

2. Mark-up (HTML)

Plaats de footer onderaan je pagina, buiten je bestaande gridsecties. Elk icoon staat in een <a> (anchor). We geven een toegankelijk label mee met aria-label.

<footer class="site-footer" role="contentinfo">
  <nav class="socials" aria-label="Sociale media en contact">
    <a class="social-link" href="mailto:info@example.com" aria-label="E-mail">
      <i class="bi bi-envelope"></i>
      <span>Mail</span>
    </a>

    <a class="social-link" href="https://www.instagram.com/voorbeeld" target="_blank" rel="noopener" aria-label="Instagram">
      <i class="bi bi-instagram"></i>
      <span>Instagram</span>
    </a>

    <a class="social-link" href="https://www.facebook.com/voorbeeld" target="_blank" rel="noopener" aria-label="Facebook">
      <i class="bi bi-facebook"></i>
      <span>Facebook</span>
    </a>
  </nav>

  <small class="copyright">&copy; 2025 Jouw Naam</small>
</footer>

Korte uitleg elementen

<i>: iconfont-drager. Je stylet ‘m als tekst (font-size, color).
<span>: inline, betekenisloos op zich; hier voor het onderschrift onder het icoon.
mailto: opent de standaard mailapp met het adres ingevuld.
target="_blank" + rel="noopener" voor externe links (veilig en in nieuw tabblad).

3. CSS — layout & interactie

Plak onderaan je stylesheet. De footer krijgt een donkere balk; iconen centreren en reageren op hover/focus.

/* Footer basis */
.site-footer{
  background: #0f0f0f;
  color: #ccc;
  padding-block: 2rem 1rem;
  margin-top: 3rem;
  text-align: center;
}

/* Icons container: rij met gelijke ruimte */
.socials{
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3rem);
  margin-bottom: 1rem;
}

/* Link + icoon + label onder elkaar */
.social-link{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;

  color: #ff6b6b;            /* basis kleur (past bij je hero) */
  text-decoration: none;
  font-family: "halloween", system-ui, sans-serif;

  transition: transform .25s ease, color .25s ease, text-shadow .25s ease;
}

/* Icoon als tekst: grootte en kleur */
.social-link i{
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1;
}

/* Label */
.social-link span{
  font-size: 1rem;
  letter-spacing: .3px;
  color: #ddd;
}

/* Hover/focus: duidelijk effect + focusring voor keyboard */
.social-link:hover,
.social-link:focus{
  color: #fff;
  transform: translateY(-3px);
  text-shadow: 0 0 10px rgba(255,255,255,.25);
}
.social-link:focus-visible{
  outline: 3px solid #fff;
  outline-offset: 4px;
  border-radius: 8px;
}

/* Copyright-regel klein en zacht */
.site-footer .copyright{
  display: block;
  color: #aaa;
  font-size: .875rem;
}

/* Donkere modus tip: indien je hele site donker is */
@media (prefers-color-scheme: dark){
  .site-footer{ background:#0b0b0b; }
}

Tip: Je kunt iconen wisselen via icons.getbootstrap.com (bv. bi bi-tiktok, bi bi-youtube). Wil je liever alternatieven? Lucide en Remix Icon zijn ook gratis en netjes consistent.

4. Testpunten

Footer staat onderaan, full-width balk, inhoud gecentreerd.
Iconen staan naast elkaar; label onder het icoon.
Hover/focus geeft duidelijke feedback én een focusring.
E-mail opent met mailto:; externe links gaan in een nieuw tabblad.

5. Checklist

<footer role="contentinfo"> gebruikt (één per pagina).
<i> gestyled als tekst (font-size, color).
<span> voor onderschrift/semantische groepering.
aria-label op elke <a> voor screenreaders.
target="_blank" + rel="noopener" bij externe links.