P1.3a App - Sections cartes

Note NE JAMAIS utiliser l’attribut style directement dans les balises HTML pour styliser vos éléments.

Soit, vous utilisez les classes utilitaires Bootstrap, soit vous stylisez vous-même avec des classes personnalisées dans main.css et/ou styles-app.css et/ou styles-lp.css. Suivez toujours les instructions lorsqu'il est mentionné dans les instructions d'utiliser les classes utilitaires Bootstrap. Section œuvres en vedette

Aperçu du résultat pour la section œuvres en vedette👇

Dans la balise main, dans le .container que vous avez précédemment créé, ajoutez une 3e section (sous les filtres). Cette section fera office de rangée Bootstrap. Ajoutez les classes qui sont de mise. Ajoutez-lui un titre de niveau 2 nommé En vedette. Cette section, vous comprendrez, listera les œuvres mis en vedette par le festival d’art. Sous le titre, créez 3 colonnes de largeur identique qui rempliront la rangée. Dans chaque colonne, (vous pouvez commencer par la première et ensuite faire un copier-coller dans les autres colonnes lorsque vous êtes satisfaits), créez une carte Bootstrap. Cette carte sera appliquée non pas sur un div mais sur une balise a afin qu’elle soit complètement cliquable. Ces liens doivent mener vers la future page : artwork.html. La carte contient une image de l’œuvre, tout en haut. Appliquez à l’image une hauteur de height: 20vh; afin que sa dimension soit adaptable avec la dimension de l’écran (vh = view height). Positionnez l’image dans son cadre avec la propriété object-fit et object-position. Sous l’image, le titre de l’œuvre. Note : n’oubliez pas d’ajouter les balises et classes nécessaires pour formatter une carte Bootstrap comme il se doit. - Sur une nouvelle ligne (rangée), ajoutez le mot “Par “ et le nom de l’artiste (s’il y en a plusieurs, séparez les noms par une virgule). - Sur une nouvelle ligne (rangée), groupez une icône de calendrier (icône Bootstrap) avec une date d’exposition.
- Groupez une icône d’horloge (icône Bootstrap) avec une heure de performance.
- Les 2 groupes doivent s’afficher sur la même ligne, avec un espace maximal entre les 2. Utilisez les classes utilitaires Bootstrap pour positionner selon les consignes. - Sur une nouvelle ligne, ajoutez une vignette de la photo de l’artiste. S’il y en a plusieurs, affichez les vignettes de chaque artiste une à côté de l’autre.
- Sur cette même ligne, ajoutez un texte “Plus d’info” avec une icône de chevron (icône Bootstrap) qui pointe vers la droite.
- Les 2 éléments (photo et plus d’info) doivent s’afficher sur la même ligne, avec un espace maximal entre les 2. Utilisez les classes utilitaires Bootstrap pour positionner selon les consignes. Stylisez la carte comme vous le souhaitez, tant que les conditions précédentes sont remplies. Ajoutez un effet de survol sur la carte. Lorsque vous êtes satisfait, vous pouvez dupliquer la première carte dans les 2 autres colonnes et ajuster son contenu pour les différentes œuvres. Donnez un id à cette section de la page et, dans votre feuille de style, affectez-lui la largeur de 140%. Les cartes de cette section spécifique, devront avoir une largeur maximum de 200px. Vous pouvez aussi réduire le padding à l’intérieur de celles-ci pour faire plus de place au contenu. Pour ce faire, vous pouvez aller écrire les styles directement dans votre feuille de style. Assurez-vous de ne cibler que les cartes de cette section. Afin d’éviter que la section qui dépasse maintenant la page ne force une scrollbar horizontale, ajoutez la propriété css overflow-x: hidden; à la balise body. Sur la rangée de la section actuelle, ajoutez une marge supplémentaire en bas avec les classes utilitaires Bootstrap. Comme la largeur de l'écran d'un appareil mobile est restreint, il vaut mieux réduire la largeur des gouttières (gutters) entre les colonnes, ajoutez les classes Bootstrap en conséquence.

Notes de cours 📚

Section autres œuvres

Aperçu du résultat pour Autres œuvres 👇

Dans la balise main, dans le .container que vous avez précédemment créé, ajoutez une 4e section (sous la section des Œuvres en vedette). Cette section fera office de rangée Bootstrap. Ajoutez les classes qui sont de mise. Ajoutez-lui un titre de niveau 2 nommé Autres œuvres et performances. Cette section, vous comprendrez, listera de toutes les œuvres et performances qui ne sont pas en vedette. Ajoutez une colonne qui s’affichera sur toute la largeur de la rangée. Dans cette colonne, ajoutez 3 cartes, exactement configurées comme celle de la section précédente, cependant celle-ci n’auront pas de largeur maximale (donc le css que vous avez ajoutée aux cartes de la section précédente ne devrait pas affecter les cartes de cette section. Appliquez à l’image de la carte une hauteur de height: 20vh; afin que sa dimension soit adaptable avec la dimension de l’écran (vh = view height). Positionnez l’image dans son cadre avec la propriété object-fit et object-position. Ajustez le contenu de toutes vos cartes en y insérant les infos réelles 6 œuvres que vous avez sélectionnées en équipe, soient 3 qui sont promues en vedette et 3 dans la section autres.

Notes de cours 📚