Office de la Formation Professionnelle et de la Promotion du Travail

TDI 2ème année

Anouar DERDOURI
CC N°2
Développement web côté client

Epreuve : Pratique Durée : 2h00 Barème : /20

Variante 3

Vous n'avez pas le droit de modifier le code HTML

Partie 1 : CSS 28 pts

#1. La balise html doit avoir un arrière-plan gray. 1 pt

#2. Le corps de la page (body) doit :

▪ Occuper 40% en largueur.
▪ Être centré horizontalement. 4 pts
▪ Avoir un padding de 15px.
▪ Avoir un arrière-plan blanc.

#3. Chaque division quote doit avoir :

▪ Un margin supérieure et inférieure de 30px.
La dernière quote ne doit pas avoir un margin inférieure.
▪ Un margin à gauche de 70px.
7 pts
▪ Des bordures de couleur lightblue.
L’épaisseur des bordures est 2px, sauf pour la bordure gauche :
10px.
▪ Des coins arrondis de 10px.

#4. Le numéro du quote doit :

▪ Avoir un width et un height de 50px.
▪ Être gras.
9 pts
▪ Avoir un contenu centré horizontalement et verticalement.
▪ Avoir un arrière-plan lightgray.
▪ Avoir des coins arrondis de 5px.

Page 1 sur 4
 Office de la Formation Professionnelle et de la Promotion du Travail

TDI 2ème année

Anouar DERDOURI
CC N°2
Développement web côté client

Epreuve : Pratique Durée : 2h00 Barème : /20

Variante 3

▪ Être positionné comme indiqué :

#5. Le texte du quote doit :

▪ Être justifié.
▪ Etre gras.
5 pts
▪ Avoir une taille de texte de 20px.
▪ Avoir une couleur gray.
▪ Avoir un margin inférieure de 30px.

#6. L'auteur du quote doit :

▪ Être gras. 2 pts
▪ Avoir une bordure inférieure de 2px et de couleur gray.

Page 2 sur 4
 Office de la Formation Professionnelle et de la Promotion du Travail

TDI 2ème année

Anouar DERDOURI
CC N°2
Développement web côté client

Epreuve : Pratique Durée : 2h00 Barème : /20

Variante 3

Partie 2 : Javascript 25 pts

#7. Le corps de la page doit :

▪ Avoir des bordures à droite et à gauche dotted de 3px et de 3 pts
couleur gray.
▪ Avoir un box-shadow de 50px et de couleur lightblue.

#8. Le titre principal doit :

▪ Avoir une couleur blue.
▪ Être aligné au centre.
▪ Avoir un padding supérieur et inférieur de 15px.
▪ Avoir un margin inférieur de 30px. 6 pts
▪ Avoir une bordure à droite et à gauche de 10px d’une couleur
lightgray.
▪ Avoir une bordure supérieure et inférieure de 3px d’une
couleur lightgray.
▪ Des coins arrondis de 15px.

#9. Ajouter le button Add quote qui doit :

▪ Être gras.
▪ Être centré.
7 pts
▪ Avoir un padding supérieure et inférieure de 5px.
▪ Avoir un padding à droite et à gauche de 15px.
▪ Afficher le message d’alerte « Added successfully » à la suite
du click.

#10. Il faut calculer et Afficher le nombre de quotes de chaque auteur. 6 pts

Page 3 sur 4
 Office de la Formation Professionnelle et de la Promotion du Travail

TDI 2ème année

Anouar DERDOURI
CC N°2
Développement web côté client

Epreuve : Pratique Durée : 2h00 Barème : /20

Variante 3

Ce nombre doit :
▪ Être aligné à droite.
▪ Avoir une couleur blue.
▪ Être gras.

#11. Masquer les spans rating-value.

Afficher le rating de chaque quote :
3 pts

Il doit être aligné à droite.

Page 4 sur 4