Esercizio Colori

Nuovo Esercizio: Palette Personalizzate da Flat UI Colors

L'obiettivo di questo esercizio è creare una pagina web che mostri 10 colori di una palette assegnata specificamente a ciascuno di voi, applicando stili CSS per renderla visivamente accattivante.

Assegnazione delle Palette:

Di seguito trovi il tuo nome e la palette di colori che dovrai utilizzare per l'esercizio. Trova la tua palette sul sito https://flatuicolors.com/. È fondamentale che tu scelga i tuoi 10 colori ESCLUSIVAMENTE dalla palette assegnata.

  • AMADIO MARCO: Flat UI Colors (Original / v1)
  • BONESSO ALESSANDRO: American Palette (v1)
  • BURATTO FILIPPO: Canadian Palette (v1)
  • BURCA ROBERT DAMIAN: British Palette (v1)
  • CAL DAVIDE: Australian Palette (v1)
  • EKEZIE CHUKWUMA CONFIDENCE: French Palette (v1)
  • EL YAQOUTI KHALIL: German Palette (v1)
  • EZEKWEM CHIMNONSO BERNARD: Spanish Palette (v1)
  • FLABOREA LORENZO: Indian Palette (v1)
  • FUSER TOMMASO: Turkish Palette (v1)
  • GANGAN IGOR: Chinese Palette (v2)
  • GORGHETTO NICOLA: Russian Palette (v2)
  • HOXHA MATEO: Italian Palette (v2 - subset europeo)
  • LAZZARINI ALESSIO: Dutch Palette (v2 - subset europeo)
  • MIFTARI AMADEO: Greek Palette (v2 - subset europeo)
  • PALUDETTO ALESSANDRO: Scandinavian Palette (v2 - subset europeo)
  • PAVAN MICHIELON SAMUELE: Portuguese Palette (v2 - subset europeo)
  • PERISSINOTTO FRANCESCO: Korean Palette (v2)
  • ROHAMAT RAHIM ULLAH: Japanese Palette (v2)
  • VIANELLO MATTEO: Colombian Palette (v2)
  • XIA JIAJUN: Brazilian Palette (v2)
  • ZOGGIA KEVIN: Turkish Palette (v3)
Passaggi da seguire per CIASCUN STUDENTE:

  1. Trova la tua Palette: Vai sul sito https://flatuicolors.com/ e individua la palette che ti è stata assegnata dalla lista qui sopra.

  2. Scegli 10 Colori: Dalla tua specifica palette assegnata, scegli 10 colori distinti. Per ciascun colore, annota il nome e il codice esadecimale (es. "Emerald" - #2ecc71).

  3. Crea un nuovo repository su GitHub: Chiamalo flat-colors-[tuo-nome] (sostituisci [tuo-nome] con il tuo nome, es. flat-colors-marco-amadio).

  4. Clona il repository appena creato sulla tua macchina locale.

  5. Crea un file index.html:

    • Assicurati che sia un documento HTML valido con <head> e <body>.
    • All'interno del <body>, crea 10 elementi <div>.
    • Ad ogni <div> assegna un attributo id che corrisponda al nome del colore che hai scelto (es. se hai scelto "Emerald", l'id sarà id="emerald"). Importante: usa caratteri minuscoli per gli ID e sostituisci eventuali spazi con trattini (es. "Bright Yarrow" -> id="bright-yarrow").
    • All'interno di ogni <div>, inserisci due paragrafi (<p>): 
      • Il primo paragrafo conterrà il nome del colore in MAIUSCOLO (es. EMERALD). Assegna a questo paragrafo la classe nome_colore.
      • Il secondo paragrafo conterrà il codice esadecimale del colore (es. #2ecc71). Assegna a questo paragrafo la classe codice_colore.
  6. Crea un file di stile main.css nella stessa directory del file index.html.

  7. Collega il file CSS al tuo index.html aggiungendo la riga <link rel="stylesheet" href="main.css"> all'interno dell'&lt;head> del documento HTML.

  8. Scegli un font da Google Fonts: Vai su https://fonts.google.com/ e scegli un font che ti piace (diverso magari da quello che potresti aver visto in esempi precedenti). Utilizza il codice @import fornito da Google Fonts e incollalo all'inizio del tuo file main.css.

  9. Crea le regole CSS nel file main.css:

    • Applica uno stile generale al <body> per rimuovere i margini predefiniti (margin: 0;) 
    • Definisci le regole per ogni <div>: 
      • Devono avere dimensioni di 400 x 400 pixel (width: 400px; height: 400px;).
      • Per ogni singolo div, utilizzando il suo id, imposta il background-color al codice esadecimale del colore corrispondente dalla tua palette scelta (es. #emerald { background-color: #2ecc71; }). Dovrai creare 10 regole specifiche, una per ogni ID/colore che hai scelto.
      • Aggiungi un piccolo margine intorno a ciascun div per separarli (ad es. margin: 10px;).
      • Applica text-align: center; al div per centrare orizzontalmente il testo al suo interno.
    • Definisci le regole per i paragrafi con la classe .nome_colore: 
      • Colore del testo bianco (color: white;).
      • Utilizza il font che hai importato da Google Fonts (font-family: 'NomeDelTuoFontScelto', sans-serif;).
      • Aumenta leggermente la dimensione del font (ad es. font-size: 2em;).
      • Applica un effetto ombreggiatura sul testo (text-shadow: 2px 2px 4px #000000; o sperimenta con un'altra combinazione di colore/offset/sfocatura).
      • Aggiungi un po' di padding-top per posizionare il titolo più in basso all'interno del div (ad es. padding-top: 150px;).
    • Definisci le regole per i paragrafi con la classe .codice_colore: 
      • Colore del testo grigio scuro (ad es. color: #333; o #666).
      • Colore di sfondo bianco (background-color: white;).
      • Font Arial o Helvetica (font-family: Arial, Helvetica, sans-serif;).
      • Dimensioni ridotte (ad es. font-size: 0.9em;).
      • Aggiungi un piccolo padding interno per distanziare il testo dallo sfondo bianco (ad es. padding: 5px;).
      • Applica display: inline-block; o display: inline; per far sì che lo sfondo bianco si adatti alla larghezza del testo.
  10. Visualizza il tuo file index.html nel browser per vedere il risultato. Controlla che ogni div abbia il colore di sfondo corretto e che il testo sia stilizzato come richiesto.

  11. Salva le modifiche e carica tutto il tuo codice (index.html e main.css) sul tuo repository GitHub.

Questo esercizio rafforza gli stessi concetti del precedente, ma ti dà l'opportunità di esplorare una palette diversa e di applicare le regole CSS specifiche per i colori che hai scelto.