M104 – DEVELOPPER DES SITES WEB STATIQUES
TP N°8 : Web Responsive et animations
Exercice 1 :
Créer la page responsive suivante :
MR. CHAOULID 1
M104 – DEVELOPPER DES SITES WEB STATIQUES
Exercice 2 :
Construisez un set d’exemple correspondant à l’illustration suivante :
Effectuez les paramétrages CSS permettant d’obtenir le résultat suivant :
Effectuez les paramétrages CSS permettant d’obtenir le résultat suivant :
Effectuez les paramétrages CSS permettant d’obtenir le résultat suivant :
Effectuez les paramétrages CSS permettant d’obtenir le résultat suivant :
Effectuez les paramétrages CSS permettant d’obtenir le résultat suivant :
MR. CHAOULID 2
M104 – DEVELOPPER DES SITES WEB STATIQUES
Effectuez les paramétrages CSS permettant d’obtenir le résultat suivant :
Effectuez les paramétrages CSS permettant d’obtenir le résultat suivant :
Effectuez les paramétrages CSS permettant d’obtenir le résultat suivant :
Exercice 3 :
Reproduisez le bouton ci-dessous en respectant les effets de transition différents sur le mouse hover
et le mouse out.
MR. CHAOULID 3
M104 – DEVELOPPER DES SITES WEB STATIQUES
Exercice 4 :
Créer le menu suivant, lorsque la souris survole l'élément, la couleur du texte et de l'arrière-plan
change.
Exercice 5 :
Créer l’animation suivante :
Exercice 6 :
Créer la page suivante et faites en sorte que le cercle se déplace entre le haut et le bas du conteneur.
En suivant le même principe que pour le premier cercle, animez un second cercle pour que celui-ci se
déplace en diagonale.
Animez un troisième cercle pour que celui-ci suive une trajectoire en forme de Z.
MR. CHAOULID 4