Proyecto MiniMarket - Sitio Web de una Sola Página

Desarrolla un sitio web de una sola página para el Home de una empresa de ventas de productos, con las siguientes especificaciones de diseño y funcionalidad:

1. Estructura y Diseño Fijo

• Coloca el logo de la empresa en la esquina superior izquierda, que permanezca fijo mientras se desplaza la página.
• A la derecha del logo, coloca un campo de búsqueda de productos que también debe quedar fijo al desplazarse.

2. Menú y Promociones

• Incluye un menú con 9 opciones de categorías de productos, fijo durante el desplazamiento.
• A la derecha de este menú, se coloca un botón de Promociones que también debe mantenerse fijo.

3. Galería de Productos

• Debajo del menú, diseña un área con 3 filas de 6 imágenes cada una. Cada imagen representa un producto.
• Cada tarjeta de producto debe tener un botón "Agregar al carrito".
• Añade una imagen de ancho completo debajo de las filas de productos, ajustada al ancho de la pantalla.

4. Footer e Iconos Sociales

• Incluye un footer con íconos de redes sociales (Facebook, Instagram y Twitter), los cuales abren en una nueva página al hacer clic.
• Agrega un ícono de WhatsApp en el lado derecho de la pantalla que abre una nueva pestaña al hacer clic y permanece fijo al desplazarse.

5. Estilo y Colores

• Usa HTML y CSS exclusivamente, y crea un archivo externo de estilo llamado styles.css.
• Utiliza máximo 5 colores en todo el sitio, aplicando colores mediante distintos métodos (códigos hexadecimales, rgb(), hsl()).
• Usa variables de CSS para definir y reutilizar al menos 5 variables de color y estilo.

6. Distribución y Diseño de Layout

• Emplea flexbox o grid para la disposición de los elementos de la página.
• Diseña el área de productos en tarjetas o cards.
• Implementa media queries para asegurar que el diseño sea completamente responsivo, adaptándose a por lo menos dos rangos de tamaño de pantalla.

7. Etiquetas y Buenas Prácticas

• Utiliza etiquetas semánticas para la estructura principal: <header>, <nav>, <main>, <section>, <article>, y <footer>.
• Implementa selectores de clase, creando y utilizando al menos 5 clases distintas para el estilo.
• Asegúrate de que todos los hipervínculos y enlaces estén correctamente formateados y funcionen usando la etiqueta <a>.

Recursos

• Todas las imágenes (logo, productos, footer) estarán en una carpeta llamada images.