Código HTML

Eleve tu negocio digital a otro nivel con un Front-end de calidad!

¡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?

Accede a mis redes:

            <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://linkedin.com/">
                <img src="./assets/linkedin.png" alt="Icono de LinkedIn">
                LinkedIn
            </a>
            
            <a class="presentacion__enlaces__link" href="https://twitch.tv/">
                <img src="./assets/twitch.png" alt="Icono de Twitch">
                Twitch
            </a>
        </div>
    </section>
    <img src="assets/Imagem.png" alt="Foto de Ana García desarrolando un proyecto">
</main>
<footer class="footer">
    <p>Desarrollado por Alura Latam</p>
</footer>

Código CSS
/* Estilos existentes de tu CSS */

.presentacion__enlaces__link {
/* Centrado de íconos y textos con Flexbox /
display: flex;
justify-content: center;
align-items: center; / Esto es una buena práctica para el centrado vertical */

/* Espaciado entre el ícono y el texto */
gap: 16px; 

/* Personalización del botón */
width: 280px;
text-align: center;
border-radius: 8px;
font-size: 24px;
font-weight: 600;
padding: 21.5px 0;
text-decoration: none;
color: #F6F6F6;
border: 2px solid #22D4FD; /* Borde inicial */

}

/* Efecto hover personalizado /
.presentacion__enlaces__link:hover {
/ Cambiar el cursor a una mano */
cursor: pointer;

/* Cambiar el color de fondo */
background-color: #272727;

/* Cambiar el color del borde a azul */
border-color: #0000FF;

}

/* Otros estilos de tu CSS */