Moobox

https://moobox.herokuapp.com/

Landing responsive mobile first con 5 resoluciones de ancho por media queries: 360p, 414p, 720p, 1024p, 1280p. Sin bibliotecas, frameworks o compiladores (Parallax, Slide, jQuery, SCSS), simplemente puro JS/CSS.

Diferencias más notables.

360p

• General: display en columna.
• Nav: botón burger para el menú.
• Empresas: grid 2x2.
• Sección 2: imagen teléfono estática.
• Testimonios: imágenes de las diapositivas ocultas.
• Footer: logo, datos y menú en columna.

414p

• Header: cambios en las imágenes del header.

720p

• Testimonios: imágenes de las diapositivas ocupan todo el ancho del viewport.

1024p

• General: display en fila.
• Header: imágenes del header fuera del box.
• Sección 2: animación de la imagen del teléfono.
• Testimonios: carrusel con márgenes.

1280p

• General: definidos anchos máximos de diversos divs.
• Nav: menú de navegación y botón activos.
• Header: imágenes en fila y con más importancia.
• Precios: cards de mayor tamaño.
• Footer: display en fila.