Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Haga lo que hicimos en aula

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

        <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>
1 respuesta

¡Hola Estudiante, espero que estés bien!

Parece que estás trabajando en un proyecto donde necesitas organizar íconos de redes sociales y aplicar estilos con CSS. Según el contexto de la actividad, ya has agregado los enlaces a GitHub, LinkedIn y Twitch, lo cual está bien. Ahora, para completar las tareas de la actividad, te sugiero que sigas estos pasos:

  1. Centrar íconos y textos en los botones: En tu archivo style.css, busca la clase .presentacion__enlaces__link y asegúrate de incluir las siguientes propiedades para centrar los íconos y textos usando Flexbox:

    .presentacion__enlaces__link {
        display: flex;
        justify-content: center;
        align-items: center; /* Esto asegura que el contenido esté centrado verticalmente */
        gap: 16px; /* Ajusta el espaciado entre el ícono y el texto */
    }
    
  2. Efecto Hover: Para añadir un efecto visual al pasar el mouse sobre los botones, agrega el siguiente código CSS para cambiar el borde y el fondo del botón:

    .presentacion__enlaces__link:hover {
        border: 1px solid #0000FF; /* Cambia el borde a azul */
        background-color: #272727; /* Cambia el fondo a un tono más claro de negro */
        cursor: pointer; /* Cambia el cursor a un puntero */
    }
    

Estos cambios deberían ayudarte a lograr el efecto deseado en tu proyecto. Recuerda siempre revisar el diseño en Figma o cualquier otra referencia visual que tengas para asegurarte de que los estilos coincidan con lo que se espera.

Espero ter ayudado y bons estudos!