Preparando el layout del proyecto: Haga lo que hicimos en el aula | HTML y CSS: header, footer y variables CSS | Alura Latam

HTML:

<!DOCTYPE html>
<html lang="es-cl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main class="presentación">
        <section class="presentación__contenido">
        <h1 class="presentación__contenido__título">Eleve tu negocio digital a otro nivel <strong class="título-destaque">con un Front-end de calidad!</strong></h1>
        <p class="presentación__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="presentación_enlaces">
            <h2 class="presentación_enlaces_sub">Accede a mis redes:</h2>
            <a class="presentación_enlaces_link" href="https://www.instagram.com">Instagram</a>
            <a class="presentación_enlaces_link" href="https://www.github.com">Github</a>
        </div>
        </section>
        <img src="Imagem.png" alt="Imagen de Ana García trabajando">
    </main>
    <footer>
        
    </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');

body{
    background-color: #000000;
    color: #F6F6F6;
    height: 60vh;
    box-sizing: border-box;

}

.título-destaque{
    color: #22D4FD;
}

.presentación{
    display: flex;
    align-items: center;
    margin: 3% 10%;
    justify-content: space-between;
}

.presentación__contenido{
    width: 915px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.presentación__contenido__título{

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

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

.presentación_enlaces{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 16px;;
}

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

.presentación_enlaces_link {
    width: 378px;
    text-align: center;
    padding: 21.5px 0;
    border-radius: 1px;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
    color: #F6F6F6;
    border: 2px solid #22D4FD;
}

Resultado:

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Hola Anderson, espero que estés bien

Parece que estás siguiendo bien las instrucciones del ejercicio. Vamos a revisar cada paso para asegurarnos de que todo esté correcto:

Agregar el subtítulo: Ya has añadido el subtítulo "Accede a mis redes:" dentro de la <div> donde están los enlaces, usando la etiqueta <h2>. Esto está bien.
Disposición de los elementos con Flexbox: Has cambiado la propiedad flex-direction a column en la clase .presentación_enlaces, lo cual es correcto para alinear los elementos verticalmente.
Alineación y espaciado: Has añadido align-items: center y gap: 32px en la clase .presentación_enlaces, lo que centra los elementos y añade espacio entre ellos.
Clase para el subtítulo: Has creado la clase presentación_enlaces_sub y aplicado el estilo correctamente con la fuente 'Krona One', tamaño 24px y peso 400.
Estilo de los botones: Has ajustado el estilo de los botones con un borde cian, texto blanco y esquinas menos redondeadas, lo cual parece estar bien reflejado en el diseño.

Si el resultado visual coincide con lo que esperabas, entonces todo está bien configurado. Si hay algo más específico que no está funcionando como esperabas, por favor, házmelo saber.

Espero haber ayudado y ¡buenos estudios!