Dopo aver costruito il menù, configurato il file CSS e creato un contenitore, inseriamo l’immagine principale. Ovviamente l’immagine deve essere responsive, cioè adattabile a tutti i dispositivi, ed anche qui ci sono differenti modi per trattare l’immagine.
Per molto tempo si è usato sempre una sola immagine, per poi tramite il CSS adattarla a tutti i dispositivi, rendendo l’immagine pesante e lenta nei piccoli monitor, per ovviare a questo, è stato introdotto un Tag “Picture” che richiama tre o quattro immagini di dimensioni diverse a seconda del dispositivo usato.
Per far questo ho preparato quattro tipi di immagini
Poi ho preparato il codice Html
In questo modo a seconda del dispositivo usato, viene pescata l’immagine più grande o più piccola, favorendo la velocità e la qualità.
Successivamente come da progetto ho impostato il codice sul foglio di stile, per la creazione dei tre blocchi, contenitori Div, dando tre differenti colori.
Quindi nella pagina HTML ho aggiunto i tre blocchi, riempendoli al momento con testo generato automaticamente tramite una risorsa online.
Questo il risultato