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

<!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">
    <script src="https://kit.fontawesome.com/ed0cc57b9d.js" crossorigin="anonymous"></script>

</head>
<body>
    <header>
        <nav>
            <a href="#" class="header_nav_menu">Home</a>
            <a href="#" class="header_nav_menu">Sobre mi</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__subtitulo">Accede a mis redes</h2>
                    <a class="presentacion__enlaces__link" href="https://instagram.com/"><i class="fa-brands fa-github"></i>  GitHub</a>
                    <a class="presentacion__enlaces__link" href="https://github.com/"><i class="fa-brands fa-linkedin"></i> Linkedin</a>
                    <a class="presentacion__enlaces__link" href="https://github.com/"><i class="fa-brands fa-instagram"></i> Instagram</a>
                </div>
               
        </section>
            <img src="Imagem.png" alt="Foto de Ana García desarrolando un proyecto">
    </main>
    <footer></footer>
</body>
</html>

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


* {
    padding: 0;
    margin:0;
}

body{
    height: 100vh;
    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;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.presentacion__enlaces__link{
    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;
    border: 2px solid #22D4FD ;
}

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

.header_nav_menu{
    font-size: 24px;
    color: #22D4FD;
    font-weight:2px;
}

Hola, Estudiante, espero que estés bien

¡Gracias por compartir tu código! Parece que estás trabajando en un portafolio personal y estás aplicando lo que has aprendido sobre HTML, CSS y el uso de display: flex para posicionar elementos. Aquí hay algunos puntos que podrían ayudarte a alinear tus conocimientos con la actividad:

Flexbox para Posicionamiento: Veo que estás utilizando display: flex en varias partes de tu CSS, como en la clase .presentacion y .presentacion__enlaces. Esto es excelente para alinear y distribuir el espacio entre los elementos de manera eficiente. Por ejemplo, en .presentacion, estás usando justify-content: space-between;, lo que ayuda a distribuir el contenido de manera uniforme entre los elementos hijos.
Estilización de Botones: En tu código, los enlaces de redes sociales están estilizados como botones con la clase .presentacion__enlaces__link. Has aplicado un borde, un color de texto y un fondo que se ajusta al diseño que probablemente hayas creado en Figma.
Actualización de Diseño: Si estás actualizando el diseño de un proyecto en Figma, asegúrate de que los estilos CSS reflejen los cambios de diseño que has realizado. Por ejemplo, si has cambiado el color de un botón en Figma, asegúrate de actualizar el color en tu CSS también.

Si estás buscando mejorar o ajustar algo específico en tu diseño o código, sería útil saber más sobre qué parte del ejercicio te gustaría optimizar o si hay algún problema específico que estás enfrentando.

Espero que esto te ayude y te inspire a seguir adelante con tu proyecto. ¡Bons estudios!