Navigatie header

De header van dit framework bestaat uit een banner met of zonder achtergrond afbeelding. en maakt gebruik van de row en col classes

Met achtergrond afbeelding

Om de banner een achergrond afbeelding te geven moet je deze laden in een <style></style> element tussen het <head></head> element.

<head>
  <style>
    .banner {background-image: url('');}
  </style>
</head>

Daarna plaats je de banner binnen of buiten de container class. Ik vind het mooier binnen de container class maar smaken verschillen.

<header class="banner txt-color-white">
  <div class="row align-items-center">
    <div class="col">
      <img alt="logo" class="image image-center" src="">
    </div>
    <div class="col">
      <p class="font-dancing-script txt-size-mega">Jouw slogan</p>
    </div>
  </div>
</header>

Zonder achtergrond afbeelding

<header class="banner-no-img">
  <div class="row align-items-center">
    <div class="col">
      <img alt="logo" class="image image-center" src="">
    </div>
    <div class="col">
      <p class="font-dancing-script txt-size-mega">Jouw slogan</p>
    </div>
  </div>
</header>

Kleurpalet

Klik op een kleur om de banner te wijzigen en de code zichtbaar te maken!