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 4
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 lightgreen. 1 pt
#2. Le corps de la page (body) doit :
▪ Occuper 35% en largueur.
▪ Être centré horizontalement. 4 pts
▪ Avoir un padding de 5px.
▪ Avoir un arrière-plan blanc.
#3. Chaque division quote doit avoir :
▪ Un margin supérieure, inférieure et à gauche de 30px.
La dernière quote ne doit pas avoir un margin inférieure.
▪ Des bordures de couleur lightsalmon.
7 pts
L’épaisseur des bordures est 2px, sauf pour la bordure gauche :
10px.
Le type des bordures est solid, sauf pour la bordure gauche :
double.
▪ 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 greenyellow.
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 4
▪ Avoir des bordures de 3px et de couleur lightsalmon.
▪ Avoir des coins arrondis de 20px comme indiqué.
▪ Être positionné comme indiqué :
#5. Le texte du quote doit :
▪ Être justifié.
▪ Être gras.
5 pts
▪ Avoir une taille de texte de 20px.
▪ Avoir une couleur lightgreen.
▪ 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 lightgreen.
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 4
Partie 2 : Javascript 25 pts
#7. Le corps de la page doit :
▪ Avoir des bordures à droite et à gauche dotted de 2px et de 3 pts
couleur lightgreen.
▪ Avoir un box-shadow de 200px et de couleur lightsalmon.
#8. Le titre principal doit :
▪ Avoir une couleur salmon.
▪ Être aligné à gauche.
▪ Avoir un padding de 20px.
▪ Avoir un margin inférieur de 30px. 6 pts
▪ Avoir une bordure à droite et à gauche de 2px d’une couleur
greenyellow.
▪ Avoir une bordure supérieure et inférieure de 10px d’une
couleur greenyellow.
▪ Des coins arrondis de 15px.
#9. Ajouter le lien Add quote qui doit :
▪ Référencer la même page.
7 pts
▪ Être centré.
▪ 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
Ce nombre doit :
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 4
▪ Être aligné à droite.
▪ Avoir une couleur salmon.
▪ Être gras.
#11. Masquer les spans rating-value.
Afficher au centre le rating de chaque quote :
3 pts
Page 4 sur 4
