Tenemos el encabezado básico de la galería en su lugar, pero faltan las personitas azules que Erica puso en la ilustración original. Habíamos hablado de ello con anticipación y decidimos que sería genial si cuando se cambiara el tamaño de la pantalla, la gente se quedara quieta mientras la pared de la galería se movía detrás de ellos, por lo que parece que están navegando por la galería con asombro.
Dado que los gráficos de personas son puramente ornemantales, usar marcado para ellos no es ideal. Afortunadamente hay dos de ellos y obtenemos dos pseudo elementos gratuitos en cada elemento ( ::beforey ::after). Los usamos para agregarlos.
En este video presentamos un concepto que seguirá siendo útil, el concepto de “consultas de medios reverso”. Estamos trabajando en gran medida desde el escritorio en este diseño, por lo que nuestras consultas de medios se basan principalmente en max-width. Pero si configuramos las mismas consultas de medios basadas en min-width, podemos orientar la pantalla solo cuando sea más grande que un cierto tamaño, no más pequeña.
En esta circunstancia, los gráficos de personas simplemente no caben en pantallas pequeñas. Entonces usamos una consulta de medios inversa para cargarlos, de esa manera los cargaremos en pantallas grandes en las que funcionan, pero no los cargaremos en pantallas pequeñas. Eso es mejor que cargarlos todo el tiempo y ocultarlos en pantallas pequeñas.