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

html 'about'

<!DOCTYPE html>
<html lang="es-mx">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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>
        <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 mi
            </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/Rectangle 47.png" alt="Imagen de Ana Garcia trabajando.">
    </main>
    <footer class="footer">
        <p>Desarollado por Jhon Garcia</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;
    /* height: 100vh; */
    box-sizing: border-box;
}

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

.header__menu{
    display: flex;
    gap: 80px;
    /*justify-content: center;
    align-items: center;*/
}

.header__menu__link{
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #22d4fd;
    /*margin: 0 10px;
    padding: 10px 15px;*/
    text-decoration: none;
}

.header__menu__link:hover{
    color: #007bff;
    cursor: pointer;
}

.presentacion{
    display: flex;
    align-items: center;
    padding: 6% 15%;
    justify-content: space-between;
    gap: 20px;
}

.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;
    font-family: "Montserrat", sans-serif;
}

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

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

.presentacion__enlaces__subtitulos{
    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{
    cursor: pointer;
    background-color: #272727;
}

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