Flat UI Color

Il sito
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.

Quando prepari i tuoi siti ti consigliamo di non scegliere colori a caso, ma invece di prenderli da una palette preparata da designer esperti.

  1. Crea un nuovo repository su GitHub e chiamalo flat-colors
  2. Clonalo in locale
  3. Crea un file index.html contenente 10 div
  4. Identifica ogni div con un id che rimandi al nome del colore, ad esempio "sunflower"
  5. All'interno di ogni div scrivi in due paragrafi di testo:
    • il nome del colore: ad es. SUNFLOWER
    • il codice esadecimale: ad es. #FFC312
  6. Applica ai paragrafi coi nomi la classe "nome_colore"
  7. Applica ai paragrafi con i codici la classe "codice_colore"
  8. Crea un foglio di stile main.css
  9. Scegli da Google Fonts un font che ti piace: https://fonts.google.com/ e incorporalo nel tuo file css utilizzando il codice @import preparato dal sito
  10. Crea delle regole CSS in modo che:
    • ogni div abbia dimensioni 500 x 500 pixel
    • ogni div abbia come colore di sfondo il colore corretto
    • tutti i titoli appaiano di colore bianco con il carattere che hai scelto da Google Fonts
    • tutti i codici colore appaiano in grigio su sfondo bianco con un normale carattere Arial di dimensioni ridotte
    • tutti i titoli abbiano un effetto ombreggiatura a tua scelta
    • tutti i titoli e i codici siano allineati orizzontalmente al centro