Direi che è il momento di aggiungere un un eder al nostro sito, dove potremmo mostrare sia il nostro logo che il menù di navigazione.

Vediamo il design su sigma e analizziamo un attimo eh come come impostare la struttura del markup? Um abbiamo vediamo che c'è un eder che sta sempre fisso in alto e con un lieve gradiente dietro più scuro abbiamo il logo e affianco il menù allineati tutti entrambi sulla sulla sinistra.

Vediamo come riprodurre intanto strutturalmente questa questo elemento torno sul mio markup.

In questo caso anche in questo caso posso sfruttare un uno dei tag semantici di h t m l cinque chiamato proprio er che appunto indica l'utilizzo di questa sezione.

Um aggiungerei una classe che mi servirà anche in questo caso per aggiustare poi i posizionamenti la chiamerei ether.

Non preferisco non applicare gli stili direttamente all'elemento, quindi all'elemento al tag ether ma creare sempre una classe di appoggio potrebbe servirmi nel caso in cui decidessi di cambiare a un certo punto il il tag che s che sto usando, utilizziamo un container per raggruppare i nostri elementi, quindi class container all'interno di un anche in questo caso preferisco associare alla alla classe del container, una cla, una class.

Quindi la chiamo ed container che mi servirà per i tuning all'interno della dell'ade um e adesso posso creare il mio lo direi che un dev può bastare aggiungerei anche in questo caso una classe specifica.

Vediamo il nostro logo in realtà è del semplice testo è il nome del portfolio praticamente.

Quindi metterei e poi stileremo il tutto salviamo ricarichiamo okay, vediamo che qualcosa è apparso um prima cosa che possiamo notare vediamo che il background è scuro perché appunto non è sovrapposto il nostro leader non è sovrapposto a quello che è la la la sezione la sezione che fa da hiro um quello che possiamo fare aggiudicare del layout e cercare di seguire un batter di design che lascia leder sempre fisso nonostante scrolliamo questo è un tter molto comune che ha ancora l'elemento nella parte alta dello schermo in modo tale che l'utente abbia sempre accesso a quelli che sono i menù o comunque il titolo l'intestazione del sito.

In questo caso potrei sfruttare la mia classe e io aggiungerei anche un commento nel c s s giusto per cominciare a separare un po' le le varie section aggiungerei um alla classe e un posizionamento.

In questo caso sfrutterò un position position pixel richiede che io debba dichiarare appunto um anche le coordinate del mio posizionamento, in questo caso relativamente al pot, per cui dovrò dichiarare un top zero perché voglio che sia ancorato alla parte superiore e almeno un left zero da specificare in modo tale che sia ancorato a ver orizzontalmente alla a sinistra.

A questo punto dichiarò anche un wd cento per cento perché voglio voglio che la larghezza sia nella nell'interezza del del suo wt e andiamo a vedere cos'è cambiato ricaricando la pagina okay ricaricando la pagina noto che effettivamente il blocco adesso si sovrappone al mio al mio view e se dopo avremo modo di scrollare, vedremo come questo resterà ancorato sempre in alto.

Cominciamo ad assegnare uno stile al logo.

Vediamo la design il okay abbiamo un phon way seicento e un trentasei e l'it quarantadue Mhm applichiamo anche un tex transform per aggiungere lo stile case, quindi tutto maiuscolo salviamo ci siamo quasi.

Adesso aggiungiamo qualche altro elemento abbiamo il menù di navigazione H T m l cinque ci mette a disposizione un tag ad hoc che è semanticamente corretto per cre- per creare un menù di navigazione.

In questo caso utilizzerò quindi il menù Nav a cui darò classe, menù che utilizzerò per aggiustare poi posizionamenti al suo interno.

Um utilizzerò invece um dovrò lista i miei item e quale tag h t m l è più adatto per un un listing di elementi.

In questo caso utilizzerò con all'interno il tag lì che mi indica appunto un figlio, un child dell'elemento.

Il nostro menù conterrà dei link.

Abbiamo la voce work e la voce contact.

Quindi all'interno del mio libro potrò utilizzare un tag ancor non specifico l'hr F per il momento e inserirò la lab che è works.

Io duplicherebbe questo questa voce per creare rapidamente anche l'altra contact.

Okay, salviamo ricarichiamo.

Ci siamo.

Dobbiamo solo applicare un po' di stili.

Cosa andiamo a fare? Innanzitutto, um proverei a rimuovere gli stili di default dell' Sting Come come vediamo il tag i tag e lì aggiungono dei piccoli dot al lato alle voci.

Io quindi comincerei a rimuoverle.

Torno sul C S s facciamo così per comodità provo ad affiancare, ad affiancare le due viste funzionalità molto utili di v s.

Okay, Quindi, um cosa faccio stile ro il mio menù appoggiando alla classe men punto menù ah, e alcuni li muoverò rimuoverò i punti con le tipe non salviamo rimossi.

Abbiamo rimosso i punti del nostro listato, dobbiamo allineare gli elementi.

Anche in questo caso sfrutteremo display flex che di default a la direction impostata a raw, per cui avremo l'allineamento orizzontale.

Io aggiungerei anche un po' di spazio tra i nostri tra i nostri item quindi aggiungerei una regola c s s per stilare i nostri lì e dargli un po' di un po' di margine un po' di margine laterale fermo un secondo.

Quanto gli ho dato? Ventiquattro h okay sì e dare ai nostri alimenti un po' di margine laterale direi che un margine ventiquattro pixel possa bastare.

Okay per allineare adesso il nostro luogo al menù mi appoggerò alla classe ed container che ho creato prima a cui assegnerò la proprietà display flex perfetto.

Adesso abbiamo l'allineamento che volevamo c'è ancora un po' di da fare i link sono un po' più grandi del previsto, quindi applichiamo una regola specifica anche per quelli direi che menù lì a in questo modo stiamo ghettizzando tutti i link all'interno dei del del nostro listato contenuto nel menù e daremo un fose di ventiquattro pixel salviamo bene resta un ultimo dettaglio di stanziare un attimo il logo dalla dal resto del del menù di navigazione, quindi potremo assegnare un margine di mi fermo un attimo punto margini gli diamo questo allora quanto gli diamo? Margine sessanta okay per distanziare il logo dal nos- dal resto del menù assegniamo al logo un margine margit di sessantaquattro pixel direi dovrebbe bastare salviamo okay, andiamo a controllare il design.

Manca un ultimo dettaglio aggiungere un gradiente al nostro al nostro er torno sempre sul tool che abbiamo visto prima.

Um gioco un po' coi parametri.

In questo caso mi basterebbe avere sempre quel quel blu scuro come sfondo e come secondo colore io aggiungerei invece un livello alfa, ovvero gioco con la trasparenza per cui avrò un un primo colore che sarà invece opaco e un secondo più trasparente che mi lascerà intravedere quello che c'è dietro, ovvero il blu della nostra, della nostra section della nostra section hiro.

Inverto anche volendo l'orientamento quindi vado inverto tutto di centottanta gradi e a quel punto avrò generato un nuovo gradiente che utilizzerò gioco con i parametri avrò il mio gradiente generato che andrò a incollare come sfondo del mio del mio ether.

Quindi background, salvo ricarico e abbiamo aggiunto il nostro gradiente e così si completa la navigazione.

Ora continueremo con la creazione delle altre reception e man mano che le creiamo arricchiremo i nostri link con gli u r l corretti.