Responsive Slack

Introducción

Clonaremos la landing page de Slack implementando su comportamiento flexible

Ejercicio

El código de partida se encuentra en la carpeta starter_code. Todas las imágenes aparecen en la carpeta images.

El HTML ya tiene todo el texto necesario. Solamente enfócate en los estilos

Iteración 1 | Extra Small Screen (width < 768px)

Diseña siempre__ mobile first__

Clona la parte móvil. Obtendrás algo similar a esto:

Iteración 2 | Small Screen (961px > width > 767px)

Comienza a hacer crecer la pantalla. Las pantallas pequeñas engloban a iPads, tablets o smartphones más grandes.

Los cambios a introducir son:

1. Los botones y los inputs ya no ocupan el 100%.

2. Ahora aparecen dos logos de empresa por fila.

3. El subfooter va de las 2 columnas, a mostrarse en 4 columnas en la misma fila.

4. El footer se muestra en una única fila que muestra información a la izquierda y a la derecha.

Iteración 3 | Medium Screen (1024px > width > 960px)

El cambio más fácil. Se muestran 3 logos por fila...

Iteración 4 | Large Screen (width > 1200px)

Por último

1. El nav-bar muestra todos los elementos del menú, eliminamos el icono y añadimos la lista.

2. En la parte superior de la página aparece la imagen alineada con el texto "Where work happens". Si usas flex-box esta parte será fácil.