Proyecto: Creación de un Sitio Web para una Cafetería

Instrucciones generales:

• El proyecto debe ser desarrollado utilizando HTML , CSS y JavaScript puro (sin frameworks).
• Deben estructurar su código de manera limpia y modular.
• Al finalizar, suban su proyecto a GitHub, GitHubPages y compartan el enlace.

Descripción del Proyecto

El objetivo es crear un sitio web para una cafetería ficticia llamada "Café & Co." que incluya las siguientes secciones:

1. Página de Inicio

Encabezado :

• Logo de la cafetería ("Café & Co.") en la parte superior.
• Menú de navegación con enlaces a las diferentes secciones del sitio (Menú, Reservaciones, Contacto).

Sección principal :

• Un banner llamativo con una imagen de fondo relacionada con café.
• Un título como "Bienvenido a Café & Co.".
• Una breve descripción sobre la cafetería (ej., "Disfruta de nuestros exquisitos cafés y pasteles artesanales en un ambiente acogedor").
• Un botón "Ver Menú" que redirija a la sección de menú.

2. Menú de Productos

Sección de menú :

• Muestra al menos 6 productos disponibles en la cafetería.
• Cada producto debe incluir:
• Nombre (ej., "Café americano", "Tarta de chocolate").
• Descripción breve (ej., "Un café suave con un toque de caramelo").
• Precio (ej., "$3.50").
• Una imagen representativa.
• Usa una cuadrícula o diseño de tarjetas para organizar los productos.

Funcionalidad interactiva :

• Agrega un botón "Añadir al carrito" en cada producto.
• Cuando el usuario haga clic en el botón, muestra un mensaje emergente indicando que el producto ha sido añadido al carrito.

3. Reservaciones

Formulario de reservación :

Permite a los visitantes reservar una mesa, con los siguientes campos:

• Nombre.
• Correo electrónico.
• Fecha y hora de la reservación.
• Número de personas.
• Agrega validaciones básicas usando JavaScript :
• Verifica que todos los campos estén llenos.
• Valida que el correo electrónico tenga un formato correcto.
• Al enviar el formulario, muestra un mensaje de confirmación (ej., "Tu reserva ha sido registrada").

4. Galería de Fotos

Sección de galería :

• Muestra al menos 6 imágenes relacionadas con la cafetería (ej., interior del local, tazas de café, pasteles, etc.).
• Organiza las imágenes en una cuadrícula o diseño responsivo.
• Agrega un efecto hover (ej., zoom o cambio de opacidad) cuando el usuario pase el cursor sobre una imagen.

5. Sección de Contacto

Información de contacto :

• Muestra la dirección física de la cafetería .
• Incluye el mapa interactivo del código.
• Agrega un número de teléfono y un enlace al correo electrónico.

Formulario de contacto :

Un formulario que permita a los visitantes enviarte un mensaje con los siguiente campos:

• Nombre.
• Correo electrónico.
• Mensaje.
• Agrega validaciones básicas usando JavaScript .
• Al enviar el formulario, muestra un mensaje de confirmación.

6. Estilos Personalizados

• Usa CSS para darle un diseño único y profesional al sitio.
• Asegúrate de que el sitio sea responsivo (se vea bien en dispositivos móviles y escritorio).
• Usa transiciones, sombras, bordes redondeados y otros efectos visuales para mejorar la experiencia del usuario.

7. Interactividad con JavaScript

• Implementa al menos una funcionalidad interactiva adicional como :
• Un carrusel de imágenes en la página de inicio.
• Un contador de visitas que muestre cuántas personas han visto la página.
• Un botón "Modo oscuro" que cambie el tema del sitio entre claro y oscuro.

Requisitos técnicos

HTML :

• Estructura clara y semántica del contenido.
• Uso adecuado de etiquetas como <header>, <section>, <footer>, <form>, etc.

CSS :

• Estilización completa del sitio.
• Diseño responsivo (usa media queries si es necesario).
• Organización del código en un archivo separado (ej., styles.css).

JavaScript :

• Validación de formularios.
• Funcionalidad interactiva (añadir productos al carrito, mostrar mensajes emergentes, etc.).
• Código organizado en un archivo separado (ej., script.js).

Sube el proyecto a GitHub y GitHub Pages y comparte los enlaces como comentario en el presente blog