Landing Page de Vacunación con HTML y CSS
Este proyecto es una landing page informativa y completamente responsiva sobre la vacunación, construida desde cero utilizando únicamente HTML5 y CSS3. El objetivo era crear una interfaz limpia, moderna y fácil de usar para informar sobre los beneficios de la vacunación.
Sugerencia: Graba un GIF corto o toma una captura de pantalla de tu proyecto y súbela a tu repositorio para mostrar el resultado final.
✨ Características Principales Diseño Totalmente Responsivo: La interfaz se adapta fluidamente a cualquier tamaño de pantalla, desde dispositivos móviles pequeños hasta monitores de escritorio grandes.
Maquetación Moderna con Grid y Flexbox: Se utilizan técnicas modernas de CSS como Grid para las secciones principales y Flexbox para alinear componentes, asegurando un layout robusto y flexible.
Componentes Interactivos: Incluye elementos como una barra para agendar citas y una sección de "preparativos" con un diseño de acordeón interactivo.
Accesibilidad en Formularios: El formulario de citas fue construido con etiquetas correctamente asociadas a sus input para garantizar la accesibilidad con lectores de pantalla y mejorar la usabilidad.
Código Limpio y Organizado: El proyecto sigue una estructura semántica en HTML y una metodología de clases tipo BEM en CSS (ej. hero__title) para un código más legible y mantenible.
🛠️ Tecnologías Utilizadas HTML5
CSS3
Variables (Custom Properties)
CSS Grid
Flexbox
Media Queries para Diseño Responsivo
Google Material Symbols para la iconografía.
🔧 Proceso de Refactorización y Mejora Este proyecto pasó por un proceso de refactorización significativo para mejorar la calidad del código original. Los cambios clave incluyen:
De IDs a Clases: Se reemplazó el uso de IDs para estilizar por clases, haciendo el CSS más modular y reutilizable.
Layouts Robustos: Se eliminaron los posicionamientos frágiles (ej. transform: translate()) y se reconstruyeron los layouts con Grid y Flexbox.
Corrección de HTML Semántico: Se corrigieron etiquetas incorrectas ( a
Implementación de Responsividad: Se añadió la lógica de @media queries desde cero para que el sitio sea completamente funcional en móviles.
📂 Cómo Ver el Proyecto Localmente Clona el repositorio:
git clone [https://github.com/Imaforbes/pagina_vacunacion.git]
Navega a la carpeta del proyecto:
cd [Pagina-Vacunacion]
Abre el archivo index.html en tu navegador.