1. Commencez par créer une page HTML5 contenant une zone header, une zone nav, une zone aside, 5 zones section et une zone footer.
2. A l'aide d'un fichier CSS lié, définissez les propriétés suivantes pour les zones :
   • header : prend toute la largeur de la page, contiendra un texte de 40px de haut et en petites capitales
   • nav sera une zone horizontale sous le header de 600px de large
   • aside : est une colonne alignée à droite de 200px de large
   • section : un ensemble de zones centrées de 800px de large
   • footer : un zone en fin de page qui contiendra 2 liens-images alignés à droite
3. Toutes les zones doivent avoir une bordure rouge de 1px et un bord arrondi (Indice : border-radius de 10px)

• la première image devra subir une inclinaison de 15deg en y (skewY) lors du survol du pointeur souris. Utilisez le sélecteur first-of-type.
• la deuxième image devra subir une inclinaison de 20deg en x (skewX) lors du survol du pointeur souris. Utilisez le sélecteur nth-last-of-type.
• la troisième image devra subir une mise à l'échelle scale de 1.2 (ie. un grossissement) lors du survol du pointeur souris. Utilisez le sélecteur nth-child.
• la quatrième image devra subir une rotation de 25 degrés (en changeant l'origine en (0,0) voir rotate) lors du survol du pointeur souris. Utilisez le sélecteur nth-of-type.
• la cinquième image devra subir une mise à l'échelle de 0.5 (ie. un rétrécissement) et une translation (120px, 50px) lors du survol du pointeur souris. Utilisez le sélecteur last-of-type.

• Puisqu'ici nous travaillons sur les transitions, vos transformations devront se faire en en douceur, testez 0.5, 2 et 5 secondes pour avoir une idée du rendu de chaque transformation.

• Dans section suivante de la page (et non celle créée précédemment), ajoutez 2 images et une balise vidéo.
• Quand vous survolez une des deux images, une transformation (au choix mais différente en fonction de chaque image) sera appliqué à la vidéo. Testez cela lors de la lecture de la vidéo (choix des sélecteurs)
• Vous pouvez utiliser les URLs suivantes pour la vidéo :
  • https://upload.wikimedia.org/wikipedia/commons/d/d0/Caminandes-_Llama_Drama_-_Short_Movie.ogv
  • http://www.i3s.unice.fr/~logre/docs/my_vid.mp4

<p>
  <a href="#">Survole moi!
    <span>Je suis une infobulle...</span>
  </a>
</p>

Nous allons maintenant modifier notre css pour transformer le span en infobulle.

• centrez le texte contenu dans la balise p
• donnez une couleur à votre lien
• modifiez votre span en
  • le positionnant de manière absolue ¹⁾
  • en lui ajoutant une marge supérieure de -50px et une marge inférieure de -25px, afin de décaller son affichage,
  • en modifiant la couleur de son texte,
  • en rendant son arrière plan noir (et un petit peu transparent, notation RGBa ).
• On pourra également ajouter
  • des bords arrondis,
  • une boîte un peu plus grande ²⁾
  • une ombre de boite ³⁾
  • ainsi qu'une légère transformation scale(0) rotate(-12deg) pour un effet d'apparition plus sympa.
• Il faut également, maintenant que vous avez bien défini le span
  • rendre l'élément span complètement invisible en le rendant transparent (opacity:0)
  • activer les transitions, par exemple avec une durée de 0.25s
• Enfin, il nous faut le faire apparaître quand on survole l'élément a.
  • rendre visible(opacity:1) notre élément span quand on survole l'élément a.
• Si vous avez utilisé une transformation, pensez également à remettre votre span en état lors de ce survole (scale(1) rotate(0)). Une petite amélioration consiste à faire ces mêmes modifications lors du gain du focus de l'élément a.

• Faites en sorte que les liens fonctionnent (qu'ils vous déplacent dans la page)
• Modifiez l'apparence du menu pour qu'il ressemble à l'image ci-dessous
• Ouvrez le menu lors du survol de la lettre de manière à rendre le lien accessible ⁴⁾
• Ajoutez une rotation (un tour complet) de la lettre lors du survol
• Pour dans les infobulles, ne pas aller à la ligne ⁵⁾
• Gérer les débordements par des points de suspension. ⁶⁾