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

Adjunto código con modificaciones solicitadas :

HTML

<!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>Portafolio</title>
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <header class="header">
        <nav class="header__menu">
            <a class="header__menu__link">Home</a>
            <a class="header__menu__link">Sobre mí</a>
        </nav>
    </header>
    <main class="presentacion">
        <section class="presentacion__contenido">
            <h1 class="presentacion__contenido__titulo">
                Eleve tu negocio digital a otro nivel 
                <strong class="titulo-destaque">con un Front-end de calidad!
                </strong></h1>
                <p class="presentacion__contenido__texto">¡Hola! Soy Ana García, desarrolladora Front-end con
                    especialización en React, HTML y CSS. Ayudo a pequeños
                    negocios y diseñadores a llevar a cabo buenas ideas.
                    ¿Hablamos?

                </p>
                <div class="presentacion__enlaces">
                    <h2 class="presentacion__enlaces__subtitulo">Accede a mis redes</h2>
                    <a class="presentacion__enlaces__link" href="https://instagram.com/"><img src="./assets/instagram.png">Instagram</a>
                    <a class="presentacion__enlaces__link" href="https://github.com/"><img src="./assets/github.png">GitHub</a>
                    <a class="presentacion__enlaces__link" href="https://twitch.com/"><img src="./assets/twitch.png">Twitch</a>
                    <a class="presentacion__enlaces__link" href="https://linkedin.com/"><img src="./assets/linkedin.png">linkedin</a>
                </div>
               
        </section>
            <img src="./assets/Imagem.png" alt="Foto de Ana García desarrolando un proyecto">
    </main>
    <footer>
        <p class="footer">Desarrollado por Gino Luján</p>
    </footer>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');


* {
    padding: 0;
    margin:0;
}

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


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

.presentacion {
    margin: 10% 15%;
    display: flex;
    align-items: center;
    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;
    font-family: 'Montserrat', sans-serif;
}

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

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

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

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

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

¡Hola, Gino, espero que estés bien!

Gracias por compartir tu código. Parece que estás trabajando en la personalización de un sitio web con HTML y CSS. Vamos a revisar algunos puntos que pueden ayudarte a cumplir con los requisitos de la actividad:

Personalización del pie de página: Según las instrucciones, tu pie de página ya está bastante alineado con lo solicitado. Tienes el fondo azul claro (#22D4FD), el texto en negro (#000000), centrado, con la fuente 'Montserrat', tamaño 24px y peso 400, además del padding de 24px. ¡Buen trabajo!
Ajuste del espaciado interno de la presentación: Necesitas cambiar la propiedad margin por padding en la clase .presentacion. Actualmente tienes margin: 10% 15%;. Podrías empezar con padding: 5%; y ajustar según sea necesario para que el contenido no quede tan cerca de los bordes.
```
.presentacion {
    padding: 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
```
Eliminación de la altura para adaptar el diseño: No veo que hayas definido height: 100vh en tu CSS, lo cual es bueno, ya que eso podría causar problemas de ajuste en el diseño. Si en algún momento lo añades, recuerda comentarlo para ver cómo afecta al diseño.

Estilización del encabezado: Para estilizar el encabezado y los enlaces, puedes añadir algo como esto:

.header__menu {
    display: flex;
    justify-content: space-around;
    background-color: #272727;
    padding: 10px;
}

.header__menu__link {
    font-size: 18px;
    color: #F6F6F6;
    text-decoration: none;
    padding: 10px 20px;
}

.header__menu__link:hover {
    color: #22D4FD;
}

Ajuste del espaciado interno de los enlaces: Asegúrate de que los enlaces en el encabezado tengan suficiente padding para mejorar la estética y la legibilidad. El código anterior ya incluye un padding de 10px 20px para los enlaces, lo cual debería ayudar.

Espero que estas sugerencias te ayuden a completar tu proyecto con éxito. ¡Bons estudios!