Proyecto de Repaso de HTML y CSS para Desarrollo Frontend

Descripción del Proyecto

Este repositorio contiene los archivos necesarios para el proyecto de repaso de HTML y CSS, diseñado para prepararse para el filtro de desarrollo frontend en CampusLands. El objetivo principal del proyecto es la creación de una página tipo Landing Page para promocionar los productos y servicios de una empresa especializada en la producción y distribución de comidas rápidas, con la hamburguesa como su producto insignia.

Tecnologías Utilizadas

• HTML
• CSS (Exclusivamente con Flexbox)
• JavaScript (para animar el menú desplegable en versiones móviles)
• Boxicons (para los íconos de los menús)

Estructura del Repositorio

El proyecto se divide en 7 secciones principales, cada una correspondiente a una parte específica de la página web. El avance del proyecto se refleja en los commits realizados, permitiendo un seguimiento claro de la evolución del desarrollo.

Secciones del Proyecto

1. Encabezado con Menú de Navegación:

​ Barra de navegación para acceder fácilmente a las distintas secciones del sitio.

2. Sección Menú del Día:

​ Incluye un título, una frase promocional, un botón de llamada a la acción y una imagen representativa.

3. Sección About Us:

​ Contiene información sobre la empresa, con un título, una frase descriptiva, un botón de exploración y una imagen ilustrativa.

4. Sección Menú de Comidas:

​ Presenta un título, una frase atractiva y un botón para explorar más. Además, incluye una animación para los productos estrella que consiste en íconos de estrella, imágenes, nombres de productos y precios.

5. Sección Services:

​ Muestra tres servicios ofrecidos por la empresa, cada uno con una imagen representativa, el nombre del servicio y una breve descripción. ​ Sección Banner Learn More:

6. Banner:

   Con un llamado a la acción "Learn More" para invitar a los visitantes a obtener más información.

7. Footer:

​ Incluye enlaces e iconos de redes sociales para facilitar la conexión y navegación del usuario.

Funcionalidades Adicionales

Menú Desplegable en Versiones Móviles:

• Utilización de JavaScript para animar el menú hamburguesa y mejorar la experiencia de usuario en dispositivos móviles. Barra de Progreso con @keyframes:

• Empleo de @keyframes en CSS para crear una barra de progreso que se actualiza a medida que el usuario realiza scroll a través de las secciones. Flexbox y Media Query:

• Todo el diseño y maquetación del proyecto se realizó exclusivamente con Flexbox. Se implementó un media query para mejorar la presentación en pantallas con una resolución inferior a 992px.

Demos

Demostración para resolución >992px (.gift)

https://raw.githubusercontent.com/EdwingDuvanHernandezHerrera/proyectoHtmlCss/main/storage/demoPC.gif

Demostración para resolución <992px (.gift)

https://github.com/EdwingDuvanHernandezHerrera/proyectoHtmlCss/blob/main/storage/demoMovil.gif