Fioritures

Dans ce TP, nous allons améliorer l'apparence de la page d'accueil.

Dégradé

Aller sur le site web https://css3gen.com, puis sur CSS3 Gradient Generator.
Créer un dégradé qui vous plait, et le mettre en arrière plan de la page d'accueil (mais laisser l'arrière plan des blocs en blanc, pour que le texte soit lisible).

Couleurs

Il existe en CSS plusieurs manières de définir des couleurs.

140 couleurs portent un nom (par exemple : beige, chartreuse, red, violet, magenta, olive, pink, snow, yellow, etc.). Pour que les paragraphes soient écrits en rouge (ce qui est déconseillé, car illisible), on utilisera donc :
```
p {
  color: red;
}
```
plus de seize millions de couleurs peuvent être définies en choisissant précisément la quantité des trois couleurs primaires rouge, vert, bleu. Ce code est précédé d'un dièse #, et composé de six chiffres hexadécimaux (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F) : les deux premiers représentent le rouge, les deux suivants le vert, et les deux derniers le bleu.

Voici par exemple comment coder le vert (pas de rouge, beaucoup de vert, pas de bleu) ; le violet (du rouge et du bleu, mais pas de vert), et le bleu foncé (pas de rouge, pas de vert, un peu de bleu).

Pour que les paragraphes soient écrits en rouge (ce qui est déconseillé, car illisible), on utilisera donc :
```
p {
  color: #ff0000;
}
```

Définir les couleurs des balises <h1> et <h2> de votre site web.
Choisir une couleur adaptée pour la bordure des blocs, qui se marie bien avec le dégradé choisi dans la partie précédente.
Au moins une des couleurs doit être définie par son nom ; au moins une des couleurs doit être définie par son code hexadécimal.

Ombres

Toujours sur le site web https://css3gen.com, aller sur CSS3 Box Shadow Generator.
Créer une ombre qui vous convienne pour les blocs des personnages de la page d'accueil.

Polices

Visiter le site web https://fonts.google.com, puis choisir une police qui vous convient pour le titre de la page d'accueil.
Cliquer sur le ⊕, puis sur le cadre Family selected qui apparait en bas de la page, puis sur @IMPORT.
Dans votre fichier CSS, copier, en tout début de fichier, la ligne :
```
@import url('https://fonts.googleapis.com/css?family=VOTREPOLICE');
```
Puis, dans le bloc adéquat, recopier la ligne qui commence par :
```
  font-family: 'VOTREPOLICE', …;
```
Recommencer la même procédure pour modifier la police des titres des blocs des personnages.

Validation

Vérifiez que cette page ne produit aucune erreur sur http://validator.w3.org, et que le fichier style.css ne produit aucune erreur sur https://jigsaw.w3.org/css-validator/.

Évaluation

Complétez la fiche d'évaluation, copiez votre travail (fichiers html et css) dans le dossier partagé, rendez-moi la fiche d'évaluation, et passez au TP suivant.

⚠️ Attention ! ⚠️