Exercices

Projet conçu en tant que formateur pour héberger des exercices liés à l'apprentissage de la programmation

Project maintained by thomgo Hosted on GitHub Pages — Theme by mattgraham

Reproduire un header

Regardez le header suivant et la manière dont il se transforme sur smartphones, tablettes et pc. Essayez de reproduire la même chose en utilisant le positionnement sur la grille de Bootstrap.

Vous devrez ajouter quelques lignes de CSS pour voir vos éléments HTML et leur mettre de la couleur. N’oubliez pas également d’utiliser les balises sémantiques.

A vous de jouer !

Smartphones

positionnement header smartphone

Tablette

positionnement header tablette

Desktop

positionnement header desktop

Correction

<div class="container-fluid mt-2">
          <header class="row">
             <aside class="col-12 col-sm-12 col-lg-4">
                <h2>Voilà un aside</h2>
             </aside>
             <section class="col-12 col-sm-6 col-lg-8">
                <h2>Voilà une section</h2>
             </section>
             <nav class="col-12 col-sm-6 col-lg-12">
                <h2>Voilà une nav</h2>
             </nav>
          </header>
 </div>