Footer compuesto con CSS Grid

Footer multisección construido desde Figma con HTML semántico, CSS Grid y convención BEM. Un ejercicio preciso para aplicar estructura visual, áreas explícitas y adaptación responsive sin frameworks.

Resumen general

Este proyecto consiste en construir un footer multisección tomando como referencia un diseño de Figma. Cada bloque tiene su propia semántica, color de fondo, título, icono, enlaces y, en un caso, un call to action (CTA) completo.

Se aplica una estructura clara con HTML semántico, convención BEM y maquetación detallada usando CSS Grid con grid-template-areas.

Tecnologías utilizadas:

• HTML5 semántico
• CSS3 moderno (CSS Grid, unidades relativas, media queries)

Conceptos aplicados

HTML semántico y estructura de secciones

El footer se organiza con cinco section, cada una con un propósito diferente (búsqueda, servicios, redes sociales, etc.). Se evita el uso de article por tratarse de contenido auxiliar, no principal.

Convención BEM

Todas las clases siguen BEM, incluyendo modificadores para secciones oscuras (.title--dark, .link--dark) y nombres expresivos para cada bloque.

CSS Grid con grid-template-areas

Se define el layout usando áreas nombradas para alinear visual y conceptualmente las secciones. Esta técnica permite adaptar el diseño fácilmente en distintos breakpoints.

Precisión visual

Se trasladan medidas y colores exactos desde Figma. Se usan unidades como rem, px y ch para ajustar paddings, márgenes y anchos con precisión quirúrgica.

Puntos de atención

Responsive design

Se implementan media queries para reorganizar las secciones en layouts de 3 columnas, 2 columnas y 1 columna según el ancho del viewport. La adaptación se realiza redefiniendo las grid-template-areas.

Separación visual y espaciado

Cada sección tiene sus propios paddings y márgenes definidos por tipo y posición. Se presta atención al margin-bottom entre enlaces y a la jerarquía visual interna.

Elementos especiales

• El bloque de CTA incluye h3, p y un botón estilizado.
• Se ajusta el ancho del texto descriptivo (width: 40ch) para mantener una longitud de línea legible.

Uso de overflow: hidden

Se aplica overflow: hidden en el footer para que los bordes redondeados no se vean afectados por el contenido interno con fondo.

Mejoras sugeridas

Container Queries

Aunque se usan media queries convencionales, el layout sería aún más escalable si se migrara a container queries reales.

Optimización de clases

Mantener consistencia total en los nombres y asegurar que cada clase tenga una única responsabilidad visual o estructural.

Animaciones sutiles

Podrían añadirse transiciones suaves al pasar el cursor por enlaces o botones, elevando la experiencia sin afectar la estructura.