Abbiamo installato l'intestazione della galleria di base, ma mancano le piccole persone blu che Erica ha inserito nell'illustrazione originale. Ne avevamo parlato in anticipo e abbiamo deciso che sarebbe stato interessante se, quando lo schermo fosse stato ridimensionato, le persone rimanessero ferme mentre il muro della galleria si spostava dietro di loro, quindi sembra che stiano sfogliando la galleria in soggezione.
Poiché la grafica delle persone è puramente ornamentale, usare il markup per loro non è l'ideale. Fortunatamente ce ne sono due e otteniamo due pseudo elementi liberi su ogni elemento ( ::beforee ::after). Usiamo quelli per aggiungerli.
Introduciamo un concetto in questo video che continuerà ad essere utile, il concetto di "reverso media queries". Stiamo lavorando in gran parte desktop-down in questo design, quindi le nostre query multimediali si basano principalmente su max-width. Ma se impostiamo le stesse media query basate su min-width, possiamo indirizzare lo schermo solo quando è più grande di una certa dimensione, non più piccolo.
In questa circostanza, la grafica delle persone semplicemente non si adatta ai piccoli schermi. Quindi usiamo una media query reverso per caricarli, in questo modo li caricheremo su schermi di grandi dimensioni su cui funzionano, ma non li caricheremo su schermi piccoli. È meglio che caricarli tutto il tempo e nasconderli su piccoli schermi.