Haga lo que hicimos en aula | HTML y CSS: header, footer y variables CSS | Alura Latam

Haga lo que hicimos en aula

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad @import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

{ padding: 0; margin:0; }

body{ height: 100vh; box-sizing: border-box; background-color: #000000; color: #F6F6F6; }

.titulo-destaque { color: #22D4FD;}

.titulo-destaque:hover{ background-color:#d9dbf1; }

.presentacion { display: flex; align-items: center; margin: 10% 15%; justify-content: space-between; }

.presentacion__contenido { width: 615px; display:flex; flex-direction: column; gap: 40px; }

.presentacion__contenido__titulo { font-size: 36px; font-family: "Krona One", sans-serif; }

.presentacion__contenido__texto { font-size: 24px; font-family: "Monserrat", sans-serif; }

.presentacion__enlaces{ display: flex; justify-content:space-between ; flex-direction: column; align-items: center; gap: 32px; }

.presentacion__enlaces__subtitulo{ font-family:"krona One", sans-serif; font-size: 24px; font-weight: 400; gap:15px;

}

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

.presentacion__enlaces__link:hover{ cursor:pointer; background-color: #272727; }

¡Hola Estudiante, espero que estés bien!

Parece que estás trabajando en un proyecto para organizar íconos de redes sociales y aplicar estilos con CSS. Vamos a revisar lo que necesitas hacer para completar la tarea:

Agregar íconos de LinkedIn y Twitch:
- Añade los enlaces e íconos de LinkedIn y Twitch en el HTML, similar a cómo está el de GitHub.

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

Alinear íconos y textos:
- Asegúrate de que la clase .presentacion__enlaces__link tenga las propiedades display: flex, justify-content: center, y gap: 16px para centrar los íconos y textos.
Efecto hover:
- Ya tienes el efecto hover para cambiar el color de fondo. Si quieres que el borde cambie a azul, ajusta la propiedad border en el hover.

.presentacion__enlaces__link:hover {
    cursor: pointer;
    background-color: #272727;
    border-color: #0000FF;
}

Con estos pasos, deberías poder completar la tarea de organizar y estilizar los íconos de redes sociales. Espero que esto te ayude y ¡buenos estudios!