Desafío: personalizando el proyecto con hover

Redes Sociales

/* Estilos base para los enlaces / .social-link { text-decoration: none; / Elimina el subrayado por defecto / color: black; / Color inicial / font-size: 18px; / Tamaño base / padding: 5px 10px; / Espaciado interno / display: inline-block; / Necesario para transformaciones / transition: all 0.3s ease; / Transición suave para todos los cambios */ }

/* Personalización con :hover / .social-link:hover { color: #1E90FF; / Azul vibrante / font-size: 20px; / Aumenta el tamaño / background-color: #F0F0F0; / Fondo gris claro / border-radius: 8px; / Bordes redondeados / transform: translateY(-5px); / Se eleva 5px hacia arriba */ }

Hola Andres, espero que estés bien

¡Tu código se ve muy bien! Has aplicado correctamente el efecto :hover a los enlaces de tus redes sociales. Cuando el usuario pasa el cursor sobre los enlaces, estos cambian de color, tamaño, y se elevan ligeramente, lo que crea un efecto visual atractivo.

Si deseas experimentar más con el :hover, podrías intentar añadir otros efectos o personalizaciones, como cambiar el color de fondo de toda la sección o aplicar una sombra al texto. Aquí tienes un ejemplo de cómo podrías hacerlo:

.redes:hover {
    background-color: #E0E0E0; /* Cambia el fondo de toda la sección */
    transition: background-color 0.3s ease; /* Transición suave */
}

.social-link:hover {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Añade una sombra al texto */
}

Esto hará que toda la sección cambie de color de fondo cuando pasas el cursor sobre ella, y los enlaces tendrán una sombra adicional. Recuerda que puedes jugar con los valores y colores para encontrar la combinación que más te guste.

Espero haber ayudado y buenos estudios!