El restaurante Webfood nos ha encargado algunos cambios para su aplicación Web de entrega de comidas. Nos ha pedido crear una media query

En WebFood siguieron un desarollo desktop-first; pero ahora se dan cuenta que con el augue del uso de dispositivos móviles para pedir comida; deben adaptar su aplicación Web a móviles.

Puedes ver como debería verse la Web una vez aplicados los cambios en este enlace.

1. Crea una media query para que aplique los siguientes estilos cuando el ancho del dispositivo sea de 48 rem

2. El tamaño de la letra es demasiado grande para el título h1 de la página. Redúcelo a 2rem.

3. Los items de menú "Browse Meals" y "My Orders"; deben verse cuando vemos la página en modo escritorio; PERO el icono de menú hamburguer debe desaparecer.

4. Cuando estamos en modo móvil, debe pasar lo contrario: el icono 'hamburguer' debe aparecer y los items de menú "Browse Meals" y "My Orders" deben desaparecer

5. Queremos además que para tamaños de pantalla de 48rem o menos las comidas aparezcan en columna, y no una al lado de la otra. BONUS: ¿Puedes utilizar alguna propiedad de 'flex' para separar los elementos del contenedor flexibles para que no esten pegados?

6. El color del título de los platos debe cambiar a un azul; pero elige un azul que se puede leer bien con el fondo color "rosa claro" que ya existe. ¿Cómo sabemos que colores contrastan bien?

REESTRICCIÓN: NO se puede modificar el archivo index.html.

1. Queremos que al pasar el ratón por encima, en modo escritorio, la imagen sufra una pequeña animación; tal y como muestra en la Web de solución. Si es necesario, en este caso si puedes modificar el index.html.

2. Hay unos elementos de esta aplicación Web que no tienen un contraste óptimo. ¿Puedes identificarlos?

3. A pesar de que no se pueda modificar el HTML, ¿qué nombres de clases (class) habrías puestos a los elementos HTML que no tienen el atributo class? Copia el index.html y modifícalo con tu respuesta.