Cet exercice consiste a créer une galerie d’images pas à pas.
Consignes de l’exercice
Téléchargez la totalité des fichiers de travail (.html, .css et images) afin de réaliser l’exercice.
– Pour télécharger un fichier, faites un clic droit sur le fichier désiré et choisissez l’option Télécharger.
– Pour télécharger plusieurs fichiers, sélectionnez les fichiers désirés puis cliquez sur Télécharger les sélectionnés. Les fichiers seront téléchargés sous la forme d’une archive .zip. Veillez à bien extraire le contenu de l’archive avant de commencer à travailler.
La première étape est de configurer la couleur d’arrière-plan de la page et la police par défaut.
Quel est l’élément HTML qui contient tous les autres ?
Positionnez les éléments de la galerie. Les conteneurs des images div doivent être positionnés pour s’afficher côte à côte. Observez bien le code HTML pour trouver le sélecteur CSS adapté.
Vous devez modifier les éléments div qui se trouvent dans l’élément avec l’id galerie.
Une fois le bon sélecteur trouvé, vous pouvez utiliser du positionnement flottant ou une flexbox.
Positionnement les titres sur les images. Pour cela, positionnez les éléments de paragraphe afin qu’ils se retrouvent par dessus les images.
Un élément positionné en absolu sera positionné par rapport à son ancêtre le plus proche qui a été positionné…
Mettez en forme les étiquettes, elles sont mises sur un fond avec une opacité de 60%.
Il existe plusieurs méthodes pour coder les couleurs en CSS : hexadécimal, rgb et rbga.
Mettez en forme des vignettes de la galerie. Le trait gris visible sur la partie zoomée est une bordure. Ce trait blanc peut être obtenue soit avec une bordure, soit avec une marge.
Ajoutez des icônes. En utilisant les éléments inline span, ajoutez une icône en haut à droite des vignettes. L’icône est fournie dans l’archive. Tout doit être fait en CSS, il n’y a aucune modification à apporter au HTML. Utilisez la propriété background pour mettre l’image dans le span.
Ajout des effets au survol, au passage de la souris sur les div, les bordures doivent changer de couleur et les éléments p doivent être masqués.
Bonjour, merci beaucoup pour ce tuto ! ça m’a bien aidée 🙂