Le fichier est divisé en main > section > article.
Le style est ajouté grâce au fichier style_general.css.
Compte rendu du projet
ROSTALSKI Baptiste & CIMBARO Mathéo
1 - Compte rendu de votre travail
Travail à réaliser
2 - Prise en main du code fourni
Questions
-
a. Le sélecteur header nav et header h1 sélectionnent respectivement les nav et les h1 decsendant d'un header. b. La propriété inline-block premet a un element de se comporter comme un bloc tout en étant inline. C'est-à-dire, qu'il conserve ses propriétés widht et heigth tout en étant inline.
-
La balise meta charset permet d'indiquer que le fichier est encodé en UTF-8.
La balise meta viewport est une première étape dans la création d'une page responsive. Cela permet de définir la taille de la page à celle de l'écran de l'utilisateur pour faire une "adaptation automatique". -
Les élèments de la page ont les classes description et illustration. Cela permet de les structurer grâce à du code CSS.
3 - Agencements
La condition utilisée est screen and (max-width: 640px)
Agencement desktop
-
a. Un header avec un titre h1 et un nav auquel est ajoutée la propriété CSS float: right. b. La propriété utilisé est display: none.
-
Une section avec deux articles contenant chacun une image et un paragraphe. Les articles ont la classe description et les images la classe illustration. L'attribut float: right a été ajouté aux deux classes.
-
La structuration du pieds de page utilise simplement la balise footer avec l'atribut text-align: center.
Agencement mobile
-
La classe illustration obtient les attributs suivants : display: block, float: none, margin-left: auto et margin-right: auto.
-
Aucun changement n'a été oppéré par rapport à l'agencement Desktop, la mise en forme était déjà correctement gérée.
-
a. Le sélecteur #buttonMenu a reçu la propriété display: initial dans agencement_flex.css. b. Le comportement a dû être modifié dans le fichier agenceent_flex.css. c. Le menu est découpé de manière à être facilement gérable (chaque élément du menu est un élement a dans div #menu). Le clique sur le bouton en haut de la page déclenche un événement côté JavaScript qui s'occupe de mettre à jour la propriété display entre flex et none pour afficher ou masquer les éléments du menu.