Vous allez maintenant créer la zone de contenu principal de chaque page. Cette zone est subdivisée en deux sections distinctes, soit le contenu principal et la barre latérale.

Aperçu du résultat 👇

Requis

  1. Chaque page devra avoir une barre latérale. Par défaut, celle-ci ne devra pas être affichée tant que le breakpoint md n'est pas atteint.

    Lorsque ce breakpoint est atteint, la barre latérale devrait avoir une largeur équivalente au ¼ de son conteneur Bootstrap. Pour vous aider à de passer d'un état à l'autre, référez-vous à l'utilitaire de display.

    Éventuellement, cette barre latérale servira à accueillir votre animation 3D. En attendant que celle-ci soit prête, insérez cette image à l'intérieur de la barre latérale afin de la visualiser adéquatement. Faites en sorte pour que votre image prenne toute la largeur de la colonne et ne dépasse jamais de celle-ci.

  2. Vous avez le choix d'afficher la barre latérale à gauche ou à droite sur votre page. Cependant, prenez note que toutes les pages de votre site ne peuvent pas l'afficher du même côté.

  3. Chaque page aura une zone correspondant au contenu principal de la page. Par défaut, cette zone devra prendre toute la largeur d'un conteneur Bootstrap. Cependant, lorsque le breakpoint md est atteint, cette zone devra avoir une largeur équivalente au ¾ de son conteneur afin de laisser une place à la barre latérale.

    Le contenu de cette zone vous sera fourni dans une étape ultérieure.

  4. Ajoutez le id main au conteneur que vous avez créé dans cet exercice. Ensuite, sur le bouton "En savoir plus" présent dans les héros, pointez vers ce id.

Notes de cours 📚