Queries pour les médias

Cet exercice a pour but de se familiariser avec les media queries, cette technologie liée à CSS3.

Structurer une page

Tout démarre par une bonne structure html. Celle-ci est simple.
- Créer un header contenant le titre de la page
- Créer une section contenant 4 articles, eux mêmes contenant un titre et un sous-titre
- Créer la mise en page CSS. Cacher le header, placer les articles dans la page, chacun occupant un quart de la fenêtre, chacun possédant une couleur de fond différente. Les titres dans les blocs seront de couleur blanches et les sous-titres cachés.

Media queries pour grand écran

La css de base est prevue pour grand écran (1400 et plus)
placer une media query permettant de modifier le comportement
- sur écran 1200 à 800
- sur écran de 800 à 480
- sur petit écran (480 à 320)

Produire une animation sur les éléments (agrandissement/reduction, changement de couleur, rotation)

Print it

Produire la css print de cette page, faisant apparaitre le header de la page et les sous-titres