| layout |
|---|
page |
In questo Esercizio, utilizzerete le nozioni di HTML e CSS che abbiamo visto a lezione.
La struttura della pagina è a vostra scelta, ma dovrà contenere i seguenti elementi:
- una intestazione (header) con il titolo della pagina e un'immagine di sfondo;
- un menù di navigazione, disposto orizzontalmente in alto o verticalmente a lato, contenente dei link alle altre sezioni del sito (non è necessario che le pagine a cui fanno riferimento i link esistano);
- una sezione di contenuti, che rappresenta il corpo principale della pagina. Questa sezione dovrà essere a sua volta divisa in "blocchi" di informazione (da disporre a vostro piacere utilizzando Flexbox), specifiche per il vostro progetto di sito (es., se si tratta di un quotidiano inline, ogni blocco può rappresentare una notizia; se si tratta di un'agenzia di viaggi, ogni blocco può rappresentare un volo o una prenotazione);
- un footer che contiene informazioni sulla pagina (tra cui nome, cognome, matricola).
A questo link un esempio di visualizzazione della pagina completa.
Stabilite in dettaglio la disposizione delle sezioni del sito (header, menù di navigazione, contenuti, blocchi all'interno dei contenuti, footer) e le distanze tra i diversi elementi della pagina. Illustrate il vostro progetto nella presentazione in maniera analoga a quanto vedete in questa immagine:
È richiesto l'uso delle seguenti proprietà CSS: margin, padding, height, position, border, border-radius, background-color.
Definite il carattere, il colore e la dimensione del testo in ciascuna delle sezioni della pagina definite in "Aspetto generale". Se i blocchi di contenuto sono a loro volta divisibili in sotto-parti, usate uno stile diverso per ciascuna.
Per ogni sezione di testo, definite tramite CSS:
- un carattere principale (da Google Fonts) e un carattere di riserva (non da Google Fonts);
- la dimensione del testo;
- lo stile del testo;
- il colore del testo;
- l'allineamento rispetto al contenitore.
E' richiesto l'uso delle seguenti proprietà CSS: font-weight, font-style, font-family, font-size, color, line-height.
L'intestazione ha un'immagine di sfondo, che non si ripete. Al di sopra dell'immagine vi è un overlay semitrasparente, di colore rgba(0, 0, 0, .3).
La sezioni dei contenuti deve contenere un'immagine per ogni "blocco" di informazione.