P1.3b App - Accordion+Modal

Ajustement de vos couleurs dans vos CSS et vos class HTML Si ce n'est pas déjà fait, maintenant que vous avez personnalisé les classes de couleurs Bootstrap telles que
--bs-primary, --bs-secondary, --bs-info, --bs-warning etc.,
veuillez aller changer partout où c'est possible dans votre CSS, afin d'utiliser ces variables. Vous pouvez aussi utiliser les classes Bootstrap dans certain cas, par exemple sur un bouton avec la classe .btn-primary ou .btn-outline-primary ou encore sur un div, ajuster la couleur du texte avec la classe .text-primary ou l'arrière-plan avec la classe .bg-primary Page oeuvre (artwork.html)

Aperçu du résultat 👇

Pour faire pause et play sur la vidéo de la démo, si vous êtes dans Chrome, vous n'avez qu'à faire "clic-droit" au dessus de la démo et cliquer sur "Afficher les commandes".

Dupliquez votre index.html et renommez le artwork.html Éditez artwork.html, conservez le header et sa navbar ainsi que le footer mais supprimez tout le reste sur contenu dans main (tout en conservant la balise main, bien entendu). Faites en sorte que l’arrière-plan de la navbar est transparent, que pour cette page. Changez le burger menu par un bouton retour de même format qui contient un chevron qui pointe vers la gauche (qui mènera vers la page précédente, c’est à dire l’accueil).Vous pouvez utiliser une des icônes Bootstrap pour le chevron. Changez l’icône de l’utilisateur à droite par un bouton “J’aime”. Enlevez le logo du festival dans la navbar. Insérez l’image de l’œuvre à environ 33% de hauteur du viewport. Créez une nouvelle section en dessous, ou vous insérerez le nom de l’œuvre en titre principal (h1). Essayez de recréer l’illusion que le haut du contenu avec l’arrière-plan blanc déborde sur l’image (voir démo ci-haut). Sous le titre, créez une section qui contient une icône de carte (map) et inscrivez le lieu de l’expo. Suivi d’une icône de calendrier et les dates d’exposition/présentation. Ensuite une ou des cartes pour présenter le ou les artistes de l’œuvre. Ces cartes doivent avoir un bouton “En savoir plus”. Le texte dans la carte pour le présenter doit être très bref (quelques lignes). Ensuite on a la description de l’œuvre. Juste avant le footer, on a un accordéon Bootstrap avec un seul item : “Réservez votre place”. Le contenu de l’item sera un formulaire Bootstrap contenant Courriel, Prénom, Nom, Date et bouton Submit. Attention, pour l’accordéon, si vous faites un copier-coller des notes de cours ou du site Bootstrap, il ne faut pas conserver les ID par défaut de l’accordéons, des headers et des collapses. Pour votre compréhension je tiens à ce que vous appliquiez des IDs qui font référence au contenu sur lequel vous travaillez. Finalement, prenez le temps d’ajouter des classes utilitaires Bootstrap pour créer des marges entre chaque section de la page pour bien les définir.

Notes de cours 📚

Fenêtre modale Créez une fenêtre modale cachée par défaut. Placez la bien au bon endroit dans le HTML, selon ce que vous avez appris. Cette modal sera déclenchée par le bouton dans la carte de l’artiste “En savoir plus”. L'entête de cette modal contiendra comme titre le nom de l’artiste et sera accompagné par le bouton X pour fermer la modal. Le corps de la fenêtre modal contiendra une bio longue de l’artiste. Vous devez vous même trouver un texte qui décrit l'artiste sélectionné, pas de lorem ipsum!. La modal devra être centrée verticalement dans la page et avoir un format petit. Il devra y avoir une transition lorsqu’on ouvre et ferme la modal (elle ne doit pas apparaitre d’un seul coup sec).

Notes de cours 📚