Haga lo que hicimos en aula

Les comparto mi solución a este desafío

He agregado los íconos de LinkedIn y Twitch junto al de GitHub en la sección de enlaces de redes sociales. Además, he implementado mejoras en la alineación y el espaciado utilizando flexbox.

1. Agregar los nuevos enlaces a LinkedIn y Twitch:

En el HTML, añadí los nuevos enlaces dentro de la sección .presentacion_enlaces:

<div class="presentacion_enlaces">
    <h2 class="presentacion_enlaces_subtitulo">Accede a mis redes:</h2>
    <a class="presentacion_enlaces_link" href="https://github.com/">
        <img src="./assets/github.png" alt="Icono de GitHub"> GitHub
    </a>
    <a class="presentacion_enlaces_link" href="https://www.linkedin.com/">
        <img src="./assets/linkedin.png" alt="Icono de LinkedIn"> LinkedIn
    </a>
    <a class="presentacion_enlaces_link" href="https://www.twitch.tv/">
        <img src="./assets/twitch.png" alt="Icono de Twitch"> Twitch
    </a>
</div>

2. Centrar los íconos y los textos en los botones:

En el CSS, agregué display: flex, justify-content: center y gap: 16px a .presentacion_enlaces_link para alinear correctamente los íconos con los textos:

.presentacion_enlaces_link {
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #F6F6F6F6;
    border: 2px dotted #22D4FD;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

3. Personalizar el efecto hover:

Para hacer los botones más atractivos, agregué un degradado, un ligero aumento de tamaño y una sombra al pasar el cursor sobre ellos:

.presentacion_enlaces_link:hover {
    background: linear-gradient(90deg, #22D4FD, #272727);
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(34, 212, 253, 0.7);
    border: 2px solid #0000FF; /* Borde azul */
    cursor: pointer;
}

Comparto las capturas de pantalla de evidencia de la implementación de los íconos de LinkedIn y Twitch, así como la correcta alineación, espaciado y efectos visuales aplicados a los botones de redes sociales.

Conclusión:

Con estos cambios, los botones de redes sociales ahora están bien alineados, con el espaciado adecuado entre los íconos y el texto. Además, el efecto hover agrega una interacción más atractiva para los usuarios.

¿Qué les parece esta solución? ¡Estoy abierta a sugerencias y mejoras!