Skip to content

Landing page informativa sobre vacunación (COVID-19), desarrollada con HTML, CSS y JavaScript puro.

Notifications You must be signed in to change notification settings

Imaforbes/pagina_vacunacion

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

  • About

    Landing page informativa sobre vacunación (COVID-19), desarrollada con HTML, CSS y JavaScript puro.

    Topics

    Resources

    Stars

    Watchers

    Forks

    Releases

    No releases published

    Packages

    No packages published