Examen 1 - Révision A

Directives

Clonez le dépôt Github Classroom disponible à l'adresse que votre enseignant va vous donner.
Une fois votre travail terminé, faites un commit de tous vos fichiers modifiés avec le message "Version finale". Enoyez ensuite le tout sur Github en faisant un "push".

Modifier le texte de l'onglet pour "Examen 1 - Votre nom".
Changez l'image qui affiche le texte "Shree" dans l'entête par Examen 1, il y a déjà une image de créer avec ce texte appelé examen1.png.
Modifier le menu de la façon suivante :
- Changez le texte Home pour Accueil.
- Changer le texte About pour Medias Queries et modifiez le liens hypertexte pour qui afficher la page medias_queries.html.
- Changez le texte Vegetable pour Mise en page et modifiez le lien hypertexte pour qu'il affiche la page mise_en_page.html.
- Supprimez les entrées "Testimonial" et "Contact Us"
Dans la première section, il y a trois écrans qui défile, un avec le titre "Bienvenue à l'examen 1" et deux autres identiques avec le titre "Welcome to Shree". Supprimez les deux avec le titre "Welcome to Shree".
Supprimez dans l'écran "Bienvenue à l'examen 1" le "textbox" où il est inscrit "Vegetable", les boutons Search, Contact Us et Vegetable. Supprimer aussi les trois cercles dans le bas qui servent de navigation. (Voir image plus bas). Svp gardez la belle image de brocoli ;).
Supprimez la carte Google Map de la section Contact Us.

À supprimer, dans la première section, tout ce qui est encadré en rouge.

examen01_reva_01

Reliez le fichier medias_queries.css qui se retrouve dans le sous-dossier css au fichier medias_queries.html.
Ajoutez les règles nécessaires pour que lors de l'impression la disposition de la page se modifie comme suit:
La section "pub" doit être masquée.
La section "image" se retrouve en dessous du texte et est centrée.
Vous devez conserver les proportions des colonnes des sections (l'article restera centré même si la publicité est masquée et que l'image se retrouve en dessous. Voir image résultat attendu).
Ajoutez le texte "Version pour impression" sous le texte "The Dalai Lama lorem ipsum Generator" de l'entête. (Vous pouvez formater le texte de la façon que vous voulez)

Résultat attendu

examen01_reva_02

Créez la structure de base d'un fichier HTML pour le fichier mise_en_page.html
Créez un fichier mise_en_page.css dans le répertoire css et reliez-le au fichier mise_en_page.html
Reproduisez la disposition suivante à l'aide de Flexbox, Grid ou les deux :

examen01_reva_03

Précision

Les balises html et body ont une marge de 0%
Le conteneur principal à une hauteur de 100vh
Le menu à une largeur fixe de 200px.
La section article (en mauve) prend le restant de l'espace comme largeur.
L'image du menu est disponible dans le dossier images et elle se nomme endless_knot.png.
L'image est centrée horizontalement et est alignée tout en bas du menu.
L'image à une largeur de 100px.
Le titre de la page est centré.
Le texte a été généré depuis le site https://www.lipsum.com/ et son alignement doit être justify.
La couleur d'arrière-plan du menu est aliceblue et celle de l'article est blueviolet.

ÉlÉments	Critères	Points
Total		/100
Suivi de version Git		/5
	Cloner un dépôt	2
	Faire un commit final	2
	Faire un push vers Github	1
Modification au gabarit		/15
	Modification des textes	2
	Modification du menu	3
	Modification à la première section	8
	Modification de la section à propos	2
Medias Queries		/30
	Liaison du fichier css	2
	Section pub masquée	5
	Section image bien positionnée	5
	Affichage du texte "Version pour impression"	8
	Respect du résultat attendu	10
Mise en page		/50
	Le fichier HTML est bien structuré	2
	La disposition générale du menu répond aux directives	20
	L'image du menu est bien positionnée	15
	Le titre de la page est centré	5
	L'article est bien aligné	3
	La disposition finale répond aux directives	5