Court

V281-04

Een extra variant van de footer.

Hoe te gebruiken?

In de config pas het veld 'navbar.footer.style' aan naar 'court'.

Voor de openingstijden, volg de instructies in het opening_times bestand in de "sections" map, of typ het als tekst.

Voorvertoning

Alvast beginnen met een basis opmaak?

CSS
Kopiërenfooter.nav-footer .top {
  background-color: var(--primary);
  color: white;
  padding: 2.5rem 0;
}

@media only screen and (min-width: 992px) {
  footer.nav-footer .top {
    padding: 5rem 0;
  }
}

footer .footer-socials a {
  margin: 0 0.5rem 1rem 0;
  font-size: 1.25em;
  transition: 0.4s color;
  color: white;
}

footer.nav-footer .title {
  font-size: 2.25rem;
  font-weight: 700;
  font-family: var(--font-family-heading);
  color:var(--primary);
}

footer.nav-footer .top a,
footer.nav-footer .bottom a.nav-link {
  color: white;
}

footer.nav-footer .footer-socials a:hover,
footer.nav-footer .footer-socials a:focus,
footer.nav-footer .top a:hover,
footer.nav-footer .top a:focus {
  color: var(--secondary);
}

footer.nav-footer ul {
  column-count: 2;
}

footer.nav-footer .opening_times-day_of_week {
  color: var(--secondary);
}

footer.nav-footer .opening_times-overview {
  columns: 2;
  column-gap: 30px;
  padding-inline-start: 0px;
  border-top: 1px solid white;
  padding-top: 0.5rem;
}

footer.nav-footer .opening_times-overview li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

footer.nav-footer ul li a {
  padding-left: 0;
}

footer.nav-footer .bottom {
  background-color: var(--secondary);
  color: white;
}

footer.nav-footer .bottom a.nav-link:hover,
footer.nav-footer .bottom a.nav-link:focus {
  background-color: white;
  color: var(--primary);
}