Esercizio
Riproducete il il layout in allegato utilizzando l'approccio visto in classe.
Fate un piccolo blocco alla volta aggiungendo ad ogni step le regole css.
Come sempre aiutatevi con le slide e tutto ciò che avete a disposizione.
Attenzione:
Nel caso non vi venga in mente come spaziare il contenuto interno all'header non preoccupatevi, passate oltre! Potreste aver bisogno di una regola css che avete usato durante il fundamental... 😃
Bonus
Partendo dallo stesso HTML, create un secondo file CSS per crearne una versione diversa.
Si può fare? Alla grande! Es. https://stylestage.dev/
Questa versione avrà il corpo pagina più stretto e centrato. Occhio all'header il cui background rimane invece a tutta pagina.
Consegna
Riproducete il layout dell'immagine allegata utilizzando ciò che abbiamo visto stamattina aiutandovi con le slide, video e documentazione.
Come l'esercizio scorso e d'ora in avanti sempre, faremo questo:
Create una nuova cartella con nome html-css-booleaner
Apritela con VSCode e create il file index.html (sarà la prima pagina ad aprirsi in un sito).
Attenzione: per i nomi dei file usate sempre lettere minuscole e trattini al posto degli spazi :);
All'interno della cartella del repo, create una sottocartella img nella quale inserirete le immagini necessarie.
Sempre nella cartella create la cartella css nella quale inserirete creandolo il vostro file.
Ora, andiamo sul tab GIT e clicchiamo “Publish on GitHub”, ricordando poi di selezionare una repo pubblica
Poi clicchiamo ok e verifichiamo che la repo sia stata creata effettivamente su GitHub prima di procedere con l’esercizio
Ricordatevi di pushare di tanto in tanto per consegnare il vostro lavoro in modo incrementale.
