Footer con tres columnas de links, iconos de redes sociales y pie de copyright. Sin dependencias.
Descripción
El Footer simple es el bloque que cierra la página, abajo de todo. Muestra información del sitio, links secundarios y datos de contacto o redes sociales.
Es como el "espejo" del header: cierra el diseño de forma prolija y le deja al usuario todas las opciones para seguir navegando o contactarse.
Tiene tres partes bien separadas: arriba el logo y una frase corta (tagline), en el medio columnas de links agrupados por tema, y abajo el copyright junto con los íconos de redes sociales.
Esta separación en tres franjas hace que sea más fácil de leer: el usuario entiende rápido dónde está cada cosa.
Las columnas de links usan CSS Grid (un sistema para armar diseños en filas y columnas). Por defecto son tres columnas iguales. Si querés agregar o sacar una columna, solo cambiás ese número o agregás un bloque `.footer-col` en el HTML.
Cada columna tiene un título en mayúsculas que funciona como categoría (por ejemplo "Producto" o "Legal"), y abajo los links de esa categoría. El título se ve un poco más separado entre letras para diferenciarse de los links, sin necesidad de hacerlo gigante.
Los links de cada columna se ven en un color más apagado (gris claro) por defecto, y cuando pasás el mouse por encima (hover) cambian a un color más fuerte. El cambio tarda 0.15 segundos, lo justo para que se note pero no moleste.
Arriba del todo se muestra el logo del sitio, con la misma tipografía que usa el header, para que todo se vea igual en toda la página. Debajo del logo va el tagline: una frase corta que resume qué hace tu sitio o marca.
Abajo de todo, a la izquierda va el texto de copyright y a la derecha los links de redes sociales. En pantallas anchas quedan cada uno en su punta; en celular se acomodan uno debajo del otro.
Todos los colores están guardados en variables CSS (valores que definís una vez y reutilizás en todo el archivo). Cambiando esas variables podés ajustar el fondo, el texto, el color apagado, el borde y el color de acento sin tocar el resto del código.
Las líneas que separan las tres partes del footer son casi transparentes (opacidad bajita), para marcar la división sin que se note demasiado. Funcionan bien tanto en fondo oscuro como en fondo claro.
En pantallas de hasta 640 píxeles de ancho, las columnas pasan de tres a dos, y copyright/redes sociales se acomodan en columna. En pantallas muy chiquitas (hasta 400 píxeles) las columnas quedan en una sola, para que nada se vea apretado.
Este footer no necesita JavaScript ni ninguna librería externa. Es HTML con la etiqueta `footer` y CSS puro usando flexbox y grid. Por eso funciona en cualquier proyecto sin configuración extra.
Funciona muy bien para cerrar landings, portfolios y sitios institucionales. Como tiene tres columnas flexibles, sirve tanto para sitios con mucho contenido como para proyectos chicos con pocos links — solo ajustás cuántas columnas usás y qué va en cada una.
Para usar este módulo, pegá el HTML abajo de todo el contenido de tu página y el CSS dentro de tu archivo de estilos (o en un <style> en el head). También necesitás tener `base.css`, `fonts.css` y `layout.css` del proyecto para que se vea bien.
<footer class="footer">
<div class="footer-inner">
<div class="footer-top">
<a href="/" class="footer-logo">MiSitio</a>
<p class="footer-tagline">Construido con criterio.</p>
</div>
<div class="footer-cols">
<div class="footer-col">
<h4>Producto</h4>
<a href="#">Características</a>
<a href="#">Precios</a>
<a href="#">Novedades</a>
</div>
<div class="footer-col">
<h4>Compañía</h4>
<a href="#">Sobre nosotros</a>
<a href="#">Blog</a>
<a href="#">Contacto</a>
</div>
<div class="footer-col">
<h4>Legal</h4>
<a href="#">Privacidad</a>
<a href="#">Términos</a>
<a href="#">Licencias</a>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 MiSitio. Todos los derechos reservados.</span>
<div class="footer-socials">
<a href="#">𝕏</a>
<a href="#">GitHub</a>
<a href="#">LinkedIn</a>
</div>
</div>
</div>
</footer>
/*
|--------------------------------------------------------------------------
| Footer Simple — Kodeval Pages
|--------------------------------------------------------------------------
| Footer con logo, columnas de links, redes sociales y copyright.
| Completamente responsive. Sin JavaScript ni dependencias externas.
|--------------------------------------------------------------------------
*/
/* =====================
VARIABLES
===================== */
.footer {
--footer-bg: #0f172a;
--footer-text: #f8fafc;
--footer-muted: #94a3b8;
--footer-border: rgba(255,255,255,0.08);
--footer-accent: #5865f2;
}
/* =====================
ESTRUCTURA PRINCIPAL
===================== */
.footer {
background: var(--footer-bg);
color: var(--footer-text);
padding: 4rem 2rem 2rem;
}
.footer-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 3rem;
}
/* =====================
PARTE SUPERIOR — logo y tagline
===================== */
.footer-top {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.footer-logo {
font-size: 1.1rem;
font-weight: 700;
color: var(--footer-accent);
text-decoration: none;
letter-spacing: -0.02em;
}
.footer-tagline {
font-size: 0.85rem;
color: var(--footer-muted);
line-height: 1.6;
}
/* =====================
COLUMNAS DE LINKS
grid-template-columns se puede ajustar:
repeat(3, 1fr) → 3 columnas iguales
repeat(4, 1fr) → 4 columnas iguales
===================== */
.footer-cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--footer-border);
}
.footer-col {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* =====================
TÍTULO DE CADA COLUMNA
===================== */
.footer-col h4 {
font-size: 0.82rem;
font-weight: 600;
color: var(--footer-text);
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 0.25rem;
}
/* =====================
LINKS
===================== */
.footer-col a {
font-size: 0.9rem;
color: var(--footer-muted);
text-decoration: none;
transition: color 0.15s;
width: fit-content;
}
.footer-col a:hover { color: var(--footer-text); }
/* =====================
PARTE INFERIOR — copyright y redes
===================== */
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 2rem;
border-top: 1px solid var(--footer-border);
flex-wrap: wrap;
gap: 1rem;
}
.footer-bottom span {
font-size: 0.82rem;
color: var(--footer-muted);
}
/* =====================
REDES SOCIALES
===================== */
.footer-socials {
display: flex;
gap: 1.25rem;
}
.footer-socials a {
font-size: 0.85rem;
color: var(--footer-muted);
text-decoration: none;
transition: color 0.15s;
}
.footer-socials a:hover { color: var(--footer-text); }
/* =====================
RESPONSIVE
En móvil: columnas apiladas, footer-bottom en columna.
===================== */
@media (max-width: 640px) {
.footer-cols { grid-template-columns: repeat(2, 1fr); }
.footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 400px) {
.footer-cols { grid-template-columns: 1fr; }
}