¡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:
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 */
}
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!