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

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio - Ana García</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <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://github.com/" target="_blank">
                    <img src="./assets/github.png" alt="Icono de Github">
                    GitHub
                </a>

                <a class="presentacion__enlaces__link" href="https://www.linkedin.com/" target="_blank">
                    <img src="./assets/linkedin.png" alt="Icono de LinkedIn">
                    LinkedIn
                </a>

                <a class="presentacion__enlaces__link" href="https://www.twitch.tv/" target="_blank">
                    <img src="./assets/twitch.png" alt="Icono de Twitch">
                    Twitch
                </a>
            </div>
        </section>

        <img src="assets/Imagem.png" alt="Foto de Ana García desarrollando un proyecto">
    </main>

    <footer class="footer">
        <p>Desarrollado por Alura Latam</p>
    </footer>
</body>
</html>

CSS

/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

.presentacion {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 20px;
}

.presentacion__contenido {
    max-width: 600px;
}

.presentacion__contenido__titulo {
    font-size: 24px;
    font-weight: bold;
}

.titulo-destaque {
    color: #ff6600;
}

.presentacion__contenido__texto {
    font-size: 16px;
    color: #333;
}

.presentacion__enlaces {
    margin-top: 20px;
}

.presentacion__enlaces__subtitulo {
    font-size: 18px;
    margin-bottom: 10px;
}

/* Estilos de los botones de redes sociales */
.presentacion__enlaces__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;  /* Espaciado entre icono y texto */
    text-decoration: none;
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
    width: 180px;
    margin: 10px auto;
}

.presentacion__enlaces__link img {
    width: 24px;
    height: 24px;
}

/* Efecto hover */
.presentacion__enlaces__link:hover {
    border: 2px solid #0000FF; /* Borde azul al pasar el mouse */
    background-color: #272727; /* Cambio de color de fondo */
    cursor: pointer; /* Cambiar el cursor a pointer */
}

/* Estilos del footer */
.footer {
    text-align: center;
    margin-top: 30px;
    padding: 10px;
    background-color: #222;
    color: #fff;
}

Explicación de los cambios realizados

Añadí los enlaces de LinkedIn y Twitch con los íconos correspondientes, siguiendo la estructura original.
Usé Flexbox en .presentacion__enlaces__link para centrar el icono y el texto dentro de los botones.
Ajusté el gap: 16px; entre el icono y el texto dentro de los botones.
Implementé el efecto hover para que el borde se vuelva azul y el fondo cambie a un tono negro más claro.
Modifiqué el cursor: pointer; en el hover para que los botones sean más interactivos.

¡Hola Estudiante, espero que estés bien!

Parece que ya has hecho un excelente trabajo siguiendo las instrucciones de la actividad. Has añadido correctamente los enlaces de LinkedIn y Twitch, y has aplicado estilos con Flexbox para centrar los íconos y textos.

También has implementado el efecto hover para cambiar el borde y el fondo de los botones, lo cual es genial.

Aquí hay un breve resumen de lo que hiciste y cómo se relaciona con las instrucciones de la actividad:

Añadir enlaces de redes sociales: Has añadido los enlaces de LinkedIn y Twitch siguiendo la estructura proporcionada, lo cual era el primer paso de la actividad.
Centrar íconos y textos con Flexbox: Has utilizado display: flex, align-items: center, justify-content: center y gap: 16px en la clase .presentacion__enlaces__link, lo cual cumple con el segundo y tercer paso de la actividad.
Efecto hover y cursor: Has implementado el efecto hover para cambiar el borde a azul y el fondo a un tono más claro de negro, además de cambiar el cursor a pointer, lo cual cubre los pasos cuatro y cinco de la actividad.

Todo parece estar en orden según las instrucciones de la actividad. Si estás experimentando algún problema específico o si algo no está funcionando como esperabas, asegúrate de revisar que los archivos de imagen estén en la ubicación correcta y que las rutas sean precisas. También verifica que no haya errores tipográficos en el código.

Espero que esto te haya ayudado y te deseo buenos estudios. ¡Sigue así!