Haga lo que hicimos en aula | HTML y CSS: header, footer y variables CSS | Alura Latam

rear una página web no es solo escribir código, es construir una experiencia. Aprender a estructurar y estilizar con HTML y CSS me hizo entender cómo cada detalle visual impacta la navegación del usuario.

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

    <main class="presentacion">
        <section class="presentacion_contenido">
            <h1 class="presentacion_contenido_titulo">Sobre mí</h1>
            <p class="presentacion_contenido_texto">
                Mi nombre es Bryan Mejía. Soy una persona que estudia y trabaja, buscando siempre aprender algo nuevo cada día. No tengo todas las respuestas, pero tengo muchas ganas de seguir creciendo.
            </p>
            <p class="presentacion_contenido_texto">
                Me gusta mantener las cosas simples y claras. Creo que la humildad y el esfuerzo constante son claves para avanzar. Este sitio es parte de mi proceso de aprendizaje en desarrollo web.
            </p>
            <p class="presentacion_contenido_texto">
                Algunas habilidades que estoy desarrollando incluyen HTML, CSS y la organización de proyectos web. Poco a poco voy entendiendo cómo construir sitios funcionales y bien estructurados.
            </p>
        </section>

        <img src="Imagenes/Imagem.png" alt="Imagen representativa del proyecto de Bryan Mejía">
    </main>

    <footer>
        <p class="footer">Desarrollado por Bryan Mejía</p>
    </footer>
</body>
</html>

@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;
    box-sizing: border-box;
}

body {
    background-color: #000000;
    color: #F6F6F6;
    font-family: 'Montserrat', sans-serif;
}

.header {
    padding: 2% 0% 0% 15%;
}

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

.header__menu__link {
    font-size: 24px;
    font-weight: 600;
    color: #22D4FD;
    text-decoration: none;
}

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

.presentacion {
    display: flex;
    align-items: center;
    padding: 6% 15%;
    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;
}

.presentacion_contenido_texto {
    font-size: 24px;
}

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

.presentacion_enlace_link {
    width: 378px;
    color: #F6F6F6;
    text-align: center;
    padding: 21.5px 0;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid #22D4FD;
    display: flex;
    justify-content: center;
    gap: 10px;
}

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

.presentacion_enlace_link:hover {
    background-color: #272727;
    cursor: pointer;
}

.presentacion__enlaces__subtitulo:hover {
    opacity: 0;
}

.footer {
    background-color: #22D4FD;
    padding: 24px;
    color: #000000;
    text-align: center;
    font-weight: 400;
    font-size: 24px;
}

Hola, Bryan, espero que estés bien

Parece que estás trabajando en un proyecto personal de sitio web y has compartido una parte de tu código HTML y CSS. Me alegra ver tu entusiasmo por aprender a estructurar y estilizar páginas web. Con base en el contexto de las actividades que estás realizando, aquí hay algunos puntos que podrías revisar para asegurarte de que tu proyecto esté alineado con los objetivos de la tarea:

Verifica la Ruta del Archivo CSS: Asegúrate de que la ruta del archivo CSS en tu archivo HTML esté correcta. Según el contexto, el archivo de estilos se movió a una carpeta llamada "styles". Por lo tanto, la ruta debería ser href="./styles/styles.css" en tu archivo HTML.
Eliminar Subrayado de Enlaces: En tu archivo CSS, ya has aplicado text-decoration: none; a los enlaces del encabezado, lo cual es correcto para eliminar el subrayado.
Navegación entre Páginas: Asegúrate de que los enlaces de navegación en tu encabezado funcionen correctamente. Ya tienes enlaces a "Inicio" y "Sobre mí", así que verifica que ambos archivos HTML (index.html y about.html) estén en el lugar correcto y que los enlaces redirijan adecuadamente.
Estructura de la Página "Sobre mí": Según la actividad, deberías haber copiado el <header> y <footer> de tu archivo index.html a about.html. Asegúrate de que esto esté hecho y de que la estructura de tu página "Sobre mí" sea la correcta, con un <main> entre el <header> y el <footer>.
Verificación en el Navegador: Después de hacer estos ajustes, guarda los cambios y recarga la página en tu navegador para verificar si todo se ve y funciona como esperas.

Espero que estos consejos te ayuden a avanzar en tu proyecto. ¡Bons estudios y sigue adelante con tu aprendizaje en desarrollo web!