P1.3a LP - 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 Fonctionnalités

2 exemples de résultats possibles pour cette section (mais vous avez une certaine flexibilité) 👇

Bien que vous ayez préalablement designé votre page, vous devez tout de même suivre les instructions de ce devoir. Libre à vous par la suite d’ajouter les détails de votre maquette mais ces instructions-ci absolument doivent être suivies avant de personnaliser votre page (bref le résultat final doit conserver les instructions ci-bas). Si ce n’est pas le cas, ajoutez votre section hero dans la balise main Sous la section Hero, créez une 2e section, identifiez-la section-features. Ce sera la section qui présente les fonctionnalités de l’appli que vous présentez au public. Il y en a 6. Le texte à utiliser se trouve dans le wiki du cours 4 (groupe H24). Pour créer cette section, utilisez la balise sémantique la plus appropriée. Sachez aussi que cette section fera office de rangée Bootstrap. Ajoutez les classes qui sont de mise. Dans cette section ajoutez un conteneur Bootstrap qui lui-même contiendra 2 rangées. Dans la première rangée, ajoutez un titre de niveau 2 nommé Fonctionnalités suivi d’un paragraphe qui introduit la section (le texte est disponible dans le wiki). Dans la 2e rangée, créez 6 colonnes. Par défaut, les colonnes s’affichent sur toute la largeur de la rangée (donc une en dessous de l'autre). À partir du breakpoint md, on verra 2 colonnes par rangée. À partir du breakpoint lg, on verra 3 colonnes par rangée (excepté si vous choisissez d'avoir des cartes horizontales, pour le breakpoint lg on gardera alors 2 colonnes par rangée). Dans chaque colonne, (commencez par la première et vous pourrez dupliquer lorsque complété), créez une carte Bootstrap.
Chaque carte Bootstrap devra contenir le titre et la description de la fonctionnalité. Les cartes ne sont PAS cliquables (elles ne mènent pas à une autre page ou une autre section, elles ne servent qu'à présenter le contenu tel quel). Allez voir la documentation sur les icônes Bootstrap et installez le paquet d'icônes via CDN, soit avec la balise link ou via @import dans le css, à ta guise. Chaque carte Bootstrap devra accueillir une icône (icône Bootstrap). Utilisez la méthode Icon Font (voir documentation liée au point précédent). Vous n'êtes pas contraints à utiliser les même icônes que les aperçus ci-haut. Allez-y avec votre intuition. Appliquez le style qui vous convient selon votre design. Vous avez aussi la possibilité d’explorer autre chose au niveau du style, pas une nécessité de vous coller à votre design. Il faut que les cartes sortent un peu du look classique avec le petit filet gris autour, amusez-vous à explorer les possibilités. Ce peut-être des cartes horizontales (en 2 colonnes) ou verticales (icone, titre, texte, l’une en dessous de l’autre). À vous de voir ! Sur les rangées et les colonnes de la section actuelle, ajoutez une marge supplémentaire en haut et en bas avec les classes utilitaires Bootstrap. Au besoin, pour réduire la largeur des gouttières (gutters) entre les colonnes, ajoutez les classes Bootstrap en conséquence.

Notes de cours 📚

Section Témoignages

Aperçu du résultat selon 3 dimensions d'écran: par défaut, ensuite à partir du breakpoint sm et ensuite à partir du beakpoint lg 👇

Sous la section section-features, créez une 3e section, identifiez-la section-testimonials. Ce sera la section des témoignages de gens qui sont satisfaits de l’appli. Comme la section fonctionnalités, ajoutez deux rangées, la première contenant un titre Témoignages et un paragraphe qui présente la section. Dans la 2e rangée, créez 6 colonnes de largeur identique. Par défaut, les colonnes s’affichent sur toute la largeur (donc une en dessous de l'autre). À partir du breakpoint sm, on verra 2 colonnes par rangée. À à partir du breakpoint lg, on verra 4 colonnes par rangée. La 2e rangée de cartes témoignage n’en contiendra que 2, trouvez un moyen de les centrer dans leur propre rangée avec les classes utilitaires Bootstrap. La carte contient une photographie de la personne qui témoigne. Vous pouvez utiliser ce site pour aller chercher des portrait photographique d'hommes et de femmes. Choisissez le format "petit" de l'image. Prenez le temps de télécharger les images, bien les nommer et les classer dans vos assets. Appliquez à l’image une hauteur à votre guise autour 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. L'image ne doit pas être écrasée ou étirée. Elle doit garder son ratio initial. Sous l’image, le nom de la personne qui témoigne en tant que titre de la carte. Note : n’oubliez pas d’ajouter les balises et classes nécessaires pour formatter une carte Bootstrap comme il se doit. Sous le titre de la carte, ajoutez un témoignage de votre cru. Soyez sympa. 😊 Stylisez un peu les cartes. J'ajoute cependant un style obligatoire, vous devez ajouter des icônes “quote” de Bootstrap, soit en arrière-plan, en haut ou au coin de la carte, en filigrane, un peu superposé ou autre idée de placement. Sur toutes les sections de votre page (et il y en aura d’autres à venir), assurez-vous d’avoir un padding en haut et en bas assez large pour laisser respirer le contenu. Assurez-vous aussi que ce padding est constant de section en section. Utilisez les classes utilitaires Boostrap pour générer ce padding. Assurez-vous aussi d’alterner la couleur de fond de chacune de vos sections pour de bien distinguer la séparation entre chacune d'elle.

Notes de cours 📚