Lo que aprendimos | HTML y CSS: header, footer y variables CSS | Alura Latam

about.html

<!DOCTYPE html>
<html lang="es-mx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sobre Mi</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
    <header class="header">
        <nav class="header__menu">
            <a class="header__menu__link" href="./index.html">Home</a>
            <a class="header__menu__link" href="./about.html">Sobre mi</a>
        </nav>
    </header>

    <main class="presentacion">
        <section class="presentacion__contenido">
            <h1 class="presentacion__contenido__titulo">Sobre mí</h1>
            <p class="presentacion__contenido__texto">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
                 atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt 
                 mollitia animi, id est laborum et dolorum fuga. </p>
            <p class="presentacion__contenido__texto">Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi 
                optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus 
                autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. 
                Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores
                ipsum delis forum birol parela maxime infena. Excepteur sint occaecat cupidatat non.</p>
        </section>
            <img src="./assets/Imagem.png" alt="Foto de Ana García estudiando">
    </main>
 
    <footer class="footer">
        <p>Desarrollado por Thais Violini</p>
    </footer>
    
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
* {
    padding: 0;
    margin: 0;
}


body {
    background-color: #000000;
    color: #F6F6F6;
    box-sizing: border-box;
}

.header {
    padding: 2% 0% 0% 10%;

}

.header__menu {
    display: flex;
    gap: 80px;
}

.header__menu__link {
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #22d4fd;
    text-decoration: none;
}

.presentacion {
    display: flex;
    align-items: center;
    padding: 6% 10%;
    justify-content: space-between;
}

.presentacion__contenido {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.presentacion__contenido__titulo {
    font-size: 36px;
    font-family: "Krona One", sans-serif;
}

.titulo-destaque {
    color: #22d4fd;
}

.presentacion__contenido__texto {
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
}

.presentacion__enlaces {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.presentacion__enlaces__subtitulo {
    font-family: "Krona One", sans-serif;
    font-size: 24px;
    font-weight: 400;
}

.presentacion__enlaces__link {
    width: 378px;
    text-align: center;
    padding: 21.5px 0;
    border-radius: 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
    color: #F6F6F6;
    border: 2px solid #22d4fd;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.presentacion__enlaces__link:hover{
    background-color: #272727;
}

.footer {
    background-color: #22d4fd;
    padding: 24px;
    color: #000000;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
}

Hola Thais, espero que estés bien

¡Espero que estés disfrutando del curso! He revisado el código HTML y CSS que compartiste, y parece que estás en el camino correcto para estilizar el encabezado de tu portafolio y crear la página "Sobre mí". Aquí hay algunas cosas que podrías verificar para asegurarte de que todo esté funcionando correctamente:

Verifica las rutas de los archivos: Asegúrate de que las rutas a tus archivos CSS y de imagen sean correctas. Por ejemplo, verifica que ./styles/style.css y ./assets/Imagem.png estén en las ubicaciones correctas dentro de tu estructura de carpetas.
Navegación entre páginas: Veo que has creado enlaces de navegación en el encabezado para "Home" y "Sobre mí". Asegúrate de que el archivo index.html exista en la misma carpeta que about.html para que los enlaces funcionen correctamente.
Estilización del encabezado: Tu CSS para el encabezado parece estar bien configurado. Si quieres ver más cambios visuales, podrías experimentar con diferentes colores o tamaños de fuente.
Prueba en diferentes navegadores: A veces, los estilos pueden verse diferentes en distintos navegadores. Prueba tu página en varios navegadores para asegurarte de que se vea como esperas.

Si estás experimentando algún problema específico, como que los estilos no se apliquen o los enlaces no funcionen, házmelo saber para que pueda ayudarte más detalladamente.

Espero haber ayudado y buenos estudios!