Temos o cabeçalho básico da galeria no lugar, mas estão faltando as pequenas pessoas azuis que Erica colocou na ilustração original. Havíamos conversado sobre isso com antecedência e decidimos que seria muito legal se, quando a tela fosse redimensionada, as pessoas ficassem paradas enquanto a parede da galeria se movia atrás delas, então parece que eles estão navegando na galeria com admiração.
Uma vez que os gráficos das pessoas são puramente orgânicos, usar marcação para eles não é o ideal. Felizmente, existem dois deles e temos dois pseudo-elementos gratuitos em cada elemento ( ::beforee ::after). Nós os usamos para adicioná-los.
Introduzimos um conceito neste vídeo que continuará a ser útil, o conceito de “reverso media queries”. Estamos trabalhando em grande parte com o desktop down neste design, portanto, nossas consultas de mídia são baseadas principalmente em max-width. Mas se configurarmos as mesmas consultas de mídia com base em min-width, podemos direcionar a tela apenas quando for maior do que um determinado tamanho, e não menor.
Nessa circunstância, os gráficos das pessoas simplesmente não cabem em telas pequenas. Então usamos uma consulta reverso de mídia para carregá-los, dessa forma vamos carregá-los em telas grandes em que eles trabalham, mas não carregá-los em telas pequenas. Isso é melhor do que carregá-los o tempo todo e ocultá-los em telas pequenas.