Mise en pratique
Texte

L'effroyable fossé entre paragraphes

Il faut respecter aussi le gras, l'italique, la largeur des paragraphes...

Notions

display styles de texte

Instructions

  • Le html est déjà construit
  • Seul le fichier CSS exo1.css est a éditer
  • Il faut respecter aussi le gras, l'italique, la largeur des paragraphes
Interaction

Les timides ronds multicolores

4 ronds timides s'affichent en gris, ils se détendent au survol de la souris

Notions

arrondis responsive pseudo-classes BEM transform

Instructions

  • Le html est déjà construit
  • Le style doit aller dans le fichier css/exo2.css
  • Au moment où la souris survole les ronds, ils doivent changer de couleur !
  • En bonus, au survol, les ronds doivent grossir aussi !

Ressources

Position

Le pernicieux carré au pompon rouge

Le carré doit toujours resté au centre du navigateur !

Notions

position box-model

Instructions

  • Le html est à construire dans html/exo3.html
  • Le style doit aller dans le fichier css/exo3.css
  • Un carré noir de 100px au milieu de la page, peu importe la taille ou le scroll de la fenêtre
  • Un rond rouge en haut à droite de 20px de diamètre
  • Le carré doit toujours resté au centre du navigateur !
flex

Le drapeau aux étoiles vicieuses

Un tour au Panama ?

Notions

flexbox box-model

Instructions

  • Reproduire le drapeau du Panama
  • Utiliser flexbox
  • Le html est déjà constuit html/exo4.html et ne doit pas être modifié
  • Le style doit aller dans le fichier css/exo4.css
Transformation

Le losange de la délivrance

Mais quelle transformation !

Notions

transform box-model

Instructions

  • Le html est déjà construit
  • Le style doit aller dans le fichier css/exo4.css

Ressources

Tableau

Le tableau de la victoire

Ligne ou colonne ? Telle est la question

Notions

tableaux

Instructions

  • Le html est déjà construit
  • Le style doit aller dans le fichier css/exo5.css
  • liens : #d42945
  • prix : #f03b58
  • bouton order : dégradé #f0fbff : #cae0ed / bordure : #cae0ed
  • bordures du tableau : #e5eff8
  • titres : #66a3d3/ font : Trebuchet MS ou Arial
  • fond entete tableau : #f4f9fe
  • fond intitule tableau : #f9fcfe
  • fond ligne paire : #f7fbff
  • fond ligne impaire : #ffffff
  • textes : #678197/ font : Arial

Ressources