Pie de página y toques finales · Programa con Martin

Termina el aspecto de tu sitio web: un pie de página, pequeños detalles que causan gran impresión y una revisión final.

Te lo muestro: un pie de página

Un pie de página cierra la página. Suele ser más oscuro, tranquilo, y quedarse abajo:

footer {
  background-color: #1f2937;   /* dark gray */
  color: white;
  text-align: center;          /* center the text */
  padding: 24px 16px;
  margin-top: 48px;            /* space away from the content */
}

footer a {
  color: #93c5fd;              /* links in a dark footer need to be light */
}

Un pie de página debería incluir: quién hizo el sitio web, el año y datos de contacto (puedes inventarlos o usar los del colegio – nunca pongas tu dirección de casa ni tu teléfono en un sitio web).

Te lo muestro: pequeños detalles que te hacen parecer un profesional

Tres cositas que casi nadie conoce, pero marcan una gran diferencia:

/* 1. Smooth scrolling when clicking a link within the page */
html {
  scroll-behavior: smooth;
}

/* 2. Images zoom in slightly when hovered */
.card img:hover,
.gallery img:hover {
  transform: scale(1.03);
}

/* 3. ...and make that zoom smooth, not instant */
img {
  transition: transform 0.2s ease;
}

transform: scale(1.03) agranda un elemento al 103% de su tamaño, y transition dice: «Haz los cambios suavemente en 0,2 segundos.» Pasa el ratón sobre una foto – ¿ves ese suave levantamiento? Eso es exactamente lo que hacen los sitios web modernos.

Ahora tú 💪

Estiliza tu pie de página siguiendo el ejemplo (puedes hacer coincidir el color con tu cabecera) y comprueba que incluye: quién hizo el sitio web + el año.
Añade los tres detalles pro del ejemplo.
Una gran revisión de todo tu sitio web. Repasa esta lista:
- El menú funciona desde cada página a cada página.
- Todas las imágenes se ven y tienen alt rellenado.
- Reduce la ventana al ancho de un móvil – todo encaja, nada se sale por los lados.
- El pie de página no tiene dirección de casa, teléfono ni datos completos del colegio/clase (¡seguridad!).
- El <title> tiene sentido en cada página.

Solución completa del pie de página (ajusta los colores)

HTML (igual en todas las páginas):

<footer>
  <p>Made by Jake in 2026 · built with my own two hands and HTML</p>
  <p><a href="index.html">Home</a></p>
</footer>

CSS:

footer {
  background-color: #1f2937;
  color: white;
  text-align: center;
  padding: 24px 16px;
  margin-top: 48px;
}

footer a {
  color: #93c5fd;
}

html {
  scroll-behavior: smooth;
}

img {
  transition: transform 0.2s ease;
}

.card img:hover,
.gallery img:hover {
  transform: scale(1.03);
}

⚠️

La seguridad primero: en la próxima lección, tu sitio web va a internet de verdad, donde cualquiera puede verlo. Así que nunca debe incluir: tu dirección exacta de casa, teléfono, email, nombre completo del colegio con clase, ni fotos de las que tú o las personas que salen en ellas no estaríais cómodos. Repasa el sitio web con un adulto y comprobadlo juntos.

✅

Compruébalo tú: Tu sitio web tiene una cabecera con menú, contenido en una columna bonita, tarjetas, fotos, un pie de página – y las cosas se mueven suavemente al pasar el ratón. Parece un sitio web de verdad. ¡Porque lo es! Solo queda un paso: enseñárselo al mundo.

Lo que te llevas de esta lección

Un pie de página: fondo oscuro, texto claro, text-align: center, margin-top.
transition + transform = microanimaciones suaves, como en sitios web pro.
Revisa siempre tu contenido con ojos de adulto antes de publicar – la información personal no pertenece a internet.