Elenco degli esercizi:

• Esercizio 1:
  

  Creare un elemento "contenitore" che sia alto il 50% dell'altezza della pagina.

  All'interno dell'elemento "contenitore" creare un elemento "contenuto" con all'interno la scritta "LOREM IPSUM" esattamente in mezzo alla pagina.

  La scritta deve essere dello stesso colore del bordo del rettangolo e deve essere in stampatello maiuscolo.

  Il bordo deve essere di 1px.

  Attorno alla scritta ci devono essere 30px di spazio (tra la scritta e il bordo).

  L'elemento "contenitore" deve essere posizionato in mezzo (sia sull'asse delle x che sull'asse delle y) in maniera dinamica.

  Non dovete utilizzare nessuna altezza o larghezza in pixel.

• Esercizio 2:
  

  Creare due elementi "box" allineati sulla stessa riga e larghi ciascuno il 50% della pagina (senza usare width: 50%).

  Il primo box (first-child) dovrà contenere un’immagine di sfondo che copre tutta l’area.

  Alcune note da ricordare:

  • di dare all’immagine un nome più facile rispetto a quello con cui scaricherete l’immagine
  • evitare nomi bg (1).jpg
  • ricordate che quando si lavora online, il nome delle immagini, dovrà essere indicativo anche per l’indicizzazione
  • inserite l’immagine all’interno di una cartella apposita

  Il secondo box (last-child) dovrà contenere:

  • un elemento "sottotitolo" che abbia le seguenti caratteristiche:
    • interlinea 40px
    • grandezza del font 20px
    • colore adeguato tenendo conto dei colori dell’immagine (non utilizzate giallo o colori non immediatamente visibili dall’utente)
    • font Marcellus (Google Font)
  • un elemento "titolo" che abbia le seguenti caratteristiche:
    • interlinea 55px
    • grandezza del font 35px
    • colore nero (non c’è bisogno di indicarlo, tutti gli elementi, di default sono neri)
    • font Marcellus (Google Font)
    • stampatello maiuscolo
  • un elemento "testo" che abbia le seguenti caratteristiche:
    • interlinea 26px
    • grandezza del font 26px
    • colore #777
    • font Lora (Google Font)
    • larghezza 80% (per fare in modo che l’elemento sia centrato dovete inserire “margin: auto;”)

  Una delle parole del testo dovrà:

  • essere sottolineata (non con text-decoration ma con un piccolo bordo SOLO SUL LATO INFERIORE) dello stesso colore del titolo iniziale
  • all’hover del mouse lo sfondo della parola diventerà dello stesso colore della sottolineatura
  
  
• Esercizio 3:
  

  Fare il menù come il sito https://www.diennea.com/ (senza hamburger e senza menù a tendina delle lingue).

  Provate a raggiungere questo obiettivo SENZA guardare nello specifico il codice.
  Poi, se vedete che non riuscite in nessun modo, andate a guardarlo naturalmente.

  Non è detto che dobbiate utilizzare lo stesso modo di allineamento che usano loro.
  Vi correggerò solo errori e non modalità diverse da come lo farò io.

  INDICAZIONI: testi uguali, font uguali, spaziature uguali, potete scegliere un altro logo, se scegliete un altro logo le barrette divisorie delle voci dovranno avere un colore scelto in base alla nuova immagine.