1. Estilizando el encabezado con CSS (style.css)
   /* Reset básico */

• { box-sizing: border-box; }
  body { margin: 0; font-family: 'Montserrat', system-ui, Arial, sans-serif; }

/* Encabezado /
.cabecera {
background: #111; / color de fondo del header /
padding: 12px 5%; / espaciado interno (coherente con el contenido) */
}

.menu {
display: flex; /* enlaces en fila /
gap: 16px; / separación entre enlaces */
align-items: center;
}

.menu__link {
text-decoration: none; /* sin subrayado en el header /
color: #F6F6F6;
font-size: 16px;
padding: 10px 14px; / área clickeable */
border-radius: 6px;
transition: color .2s ease, background .2s ease, transform .2s ease;
}

.menu__link:hover {
color: #22D4FD;
background: #272727;
transform: translateY(-1px);
}

Si aún no importaste la fuente, recuerda en

1. Ajustando el espaciado del contenido para alinearlo con el header

Alinea el contenido con el mismo “marco” (5%) que usamos en la cabecera:

/* Contenido principal /
.presentacion, / si ya la tienes /
main { / o aplica a main genérico /
padding: 5%;
max-width: 1100px; / opcional: limitar ancho de lectura /
margin: 0 auto; / centrar en pantallas grandes */
}

1. Crear y navegar a la página Sobre mí
   index.html (menú con enlace) Home Sobre mí

about.html (nueva página)

Sobre mí

Aquí puedes contar tu historia, habilidades y objetivos.

© 2025 Tu Nombre

Comprueba que al hacer clic en “Sobre mí” desde index.html abre about.html, y que “Home” te regresa.

1. Arreglar estilos tras mover styles.css a /styles y quitar subrayado en el header
   index.html (ruta del CSS actualizada)

styles/styles.css (quitar subrayado en enlaces del header)

Ya quedó cubierto en el bloque del punto 1:

.menu__link { text-decoration: none; }

1. Estructurar about.html con header y footer de index

Ya lo hicimos arriba: copiamos el

1. Importar y corregir la ruta del CSS en about.html

También está aplicado arriba:

Guarda y recarga la página para confirmar que los estilos se aplican.

(Opcional) Pie de página estilizado

Si aún no lo tienes, puedes añadir este estilo:

.footer {
background: #22D4FD; /* azul claro /
color: #000000; / texto negro */
text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 24px;
padding: 24px;
}