Laboratoire - Media queries et autres

Marche à suivre

Écrivez le code CSS permettant de styler la page HTML distribué pour reproduire la page web affiché ci-dessous en respectant les critères suivants:

• Les couleurs utilisées sont: #292955, #3f5aa3, #5394d1 et #fff.
• La police de caractère utilisé peut être trouvé sur Google Fonts. On utilise Noto Sans pour tout le site web.
• Les espacements peuvent être approximatifs, mais essayez d'être le plus similaire possible à l'image ci-dessous.
• La hauteur du header est fixe à 25rem.
• La hauteur et largeur des images dans la gallerie est de 10rem.
• La largeur du >aside< est de 15rem. Il est possible que vous ayez à utiliser la propriété min-width.
• Pour éviter de déformer les images, vous pouvez utiliser la propriété object-fit: cover;.
• L'ombre autour du titre peut être accompli à l'aide la propriété text-shadow.
• Les changements d'interface se font à une taille de navigateur de 45rem et 70rem.
• Le footer est bien poussé en bas de l'écran, même sur les grands écrans. Vous pouvez dézoomé la page web pour tester ceci.

Image à reproduire

Sur grand écran

Sur moyen écran

Sur petit écran

Fichiers

Si vous voulez faire l'exercice dans son entier, démarrez avec le fichier distribué.zip. Si vous voulez simplement faire l'exercice pour le matériel vu dans ce module, démarrer avec le fichier distribué-partiel.zip.