Footers

El footer (pie de página) es lo último que ve el visitante, pero trabaja mucho: da confianza (datos legales, contacto), ayuda a navegar cuando alguien llegó al final sin encontrar lo que buscaba y es un gran lugar para captar suscriptores. Aquí tienes tres variantes listas para copiar, de la más sencilla a la más completa.

Cómo usar estos demos

Cambia de vista con los botones 📱 💻 🖥️ para ver cómo se adapta cada footer. Copia sólo el CSS, el HTML o el archivo completo, o ábrelo en el Playground para editarlo en vivo.

Footer simple centrado

Cuándo usarlo: landing pages, portafolios y sitios de una sola página donde basta con el logo, unos cuantos enlaces, redes sociales y el copyright.

Footer simple

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Cambia --acento en :root para el color del logo y del hover de los iconos sociales.
• Los iconos son SVG en línea: para otra red, reemplaza el path (puedes sacarlos de sitios como Simple Icons) y actualiza su aria-label.
• El año se escribe solo con JavaScript; si no quieres JS, deja el número fijo en el span#anio.
• Para un footer oscuro basta con cambiar --fondo, --texto y --borde.

Footer con columnas

Cuándo usarlo: sitios corporativos, tiendas y productos SaaS con muchas páginas. Las columnas agrupan enlaces por tema (Producto, Empresa, Recursos, Legal) y funcionan como un mapa del sitio.

Footer con columnas

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• La cuadrícula se define en grid-template-columns: 1.5fr repeat(4, 1fr): cambia el 4 si tienes más o menos columnas.
• Cada columna es un <nav> con aria-labelledby que apunta a su título; si agregas columnas, usa un id nuevo para cada h2.
• Los puntos de quiebre (800px y 460px) controlan cuándo pasa a 2 columnas y luego a 1. Ajústalos a tu diseño.
• Cambia el texto de .footer__base por tu razón social, dirección o un selector de idioma.

Footer oscuro con newsletter

Cuándo usarlo: blogs, cursos, tiendas y cualquier sitio que quiera construir una lista de correos. El formulario destaca dentro de una caja y valida el email antes de enviarlo.

Footer con newsletter

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Colores en :root: --fondo y --tarjeta para el modo oscuro, --acento para el botón y el mensaje de éxito.
• En el submit está marcado dónde conectar tu servicio real (Mailchimp, Brevo, tu propio backend) con fetch().
• El mensaje usa role="status" y aria-live="polite" para que los lectores de pantalla lo anuncien: mantenlo al cambiar los textos.
• El label está oculto visualmente con .sr-only, pero sigue existiendo para accesibilidad. No lo borres aunque uses placeholder.

Error común

Poner sólo placeholder sin label. El placeholder desaparece al escribir y muchos lectores de pantalla no lo leen como etiqueta. Usa siempre un <label> (visible u oculto con .sr-only).

Resumen

• Simple para sitios pequeños, con columnas para sitios con muchas páginas y con newsletter para captar correos.
• Usa <footer> y <nav aria-label="..."> para que el pie sea semántico.
• Todos los colores se cambian desde las variables de :root.