pagina_vacunacion

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 ) y no estándar ( 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.