BaliseTonSite

La barre de navigation

Construis une navbar comme les pros avec Flexbox.

Tu viens de découvrir Flexbox : le menu de formation tactique de ton escouade CSS. C'est l'outil parfait pour aligner des éléments sur un axe. Et quel meilleur terrain d'entraînement qu'une barre de navigation ?

Le HTML contient un logo, 4 liens et un bouton "Contact". À toi de les disposer proprement avec Flexbox pour obtenir une navbar digne d'un vrai site.

Ce qu'on te demande

Utilise Flexbox pour transformer cette liste de liens en barre de navigation horizontale. Objectifs :

  • La .navbar utilise Flexbox avec justify-content et align-items
  • Les .nav-links sont aussi en Flexbox (liens côte à côte)
  • Utilise gap pour espacer les liens (pas de margin bricolé)
  • Supprime les puces de liste (list-style: none)
  • Les liens ont un style visuel : couleur, suppression du soulignement...

Le bouton "Contact" peut avoir un style différent des autres liens pour le faire ressortir.

CSS
Aperçu
Voyons où tu en es
?La .navbar utilise display: flex
?La .navbar utilise justify-content (répartition des éléments)
?La .navbar utilise align-items (alignement vertical)
?Les .nav-links utilisent aussi display: flex (liens en ligne)
?Tu utilises gap pour l'espacement entre les liens
?Les puces de la liste sont supprimées (list-style: none)
?Les liens ont un style visuel (couleur ou suppression du soulignement)

Astuce : justify-content: space-between pousse le logo à gauche et le bouton à droite. Les liens au milieu se placent naturellement entre les deux. Comme une formation en ligne.

Pourquoi c'est important : chaque site web a une navbar. C'est le premier composant qu'un visiteur voit, et Flexbox est l'arme de choix pour le construire. Compétence débloquée : mise en page horizontale.