Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Haciendo lo que hicimos en el aula

Referente al curso HTML y CSS: header, footer y variables CSS, en el capítulo Creando iconos clicables y actividad Haga lo que hicimos en aula

por Thais Violini
| 34.4k xp | 29 posts
Intérprete de servicios médicos 

@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 {
    background-color: #000000;
    color: #F6F6F6;
    height: 100vh;
    box-sizing: border-box;
}


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

.presentacion {
    display: flex;
    align-items: center;
    margin: 15% 10%;
    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: "Montserrat", 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;
}

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

.presentacion__enlaces__link:hover{
    background-color: #272727;
}
1 respuesta
por Brenda Souza
| 4883.2k xp | 17616 posts
Instructor Scuba

Hola Thais, espero que estés bien

¡Qué bueno que estás trabajando en tu proyecto personal! Vamos a ver cómo puedes agregar los enlaces a LinkedIn y Twitch junto con los íconos correspondientes. A continuación, te muestro cómo puedes hacerlo utilizando el fragmento de código HTML que ya tienes:

  1. Agregar los enlaces a LinkedIn y Twitch: Necesitarás añadir dos nuevos elementos <a> dentro del div con la clase presentacion__enlaces. Aquí tienes un ejemplo de cómo podrías hacerlo:
<div class="presentacion__enlaces">
    <h2 class="presentacion__enlaces__subtitulo">Accede a mis redes:</h2>
    
    <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://www.linkedin.com/">
        <img src="./assets/linkedin.png" alt="Icono de LinkedIn">
        LinkedIn
    </a>
    
    <a class="presentacion__enlaces__link" href="https://www.twitch.tv/">
        <img src="./assets/twitch.png" alt="Icono de Twitch">
        Twitch
    </a>
</div>

  1. Ajustar el CSS para los íconos y textos: Parece que ya has aplicado display: flex y justify-content: center a la clase .presentacion__enlaces__link, lo cual es perfecto para centrar los íconos y textos. Solo asegúrate de que el gap entre los íconos y los textos sea el correcto según el diseño que estás siguiendo. Si el gap es de 16px, ya lo tienes bien configurado.

  2. Efecto Hover: Para el efecto Hover, asegúrate de que la clase .presentacion__enlaces__link:hover tenga las siguientes propiedades:

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

Con estos ajustes, deberías poder ver los nuevos enlaces a LinkedIn y Twitch con sus respectivos íconos, y el efecto visual al pasar el mouse sobre ellos debería estar funcionando adecuadamente.

Espero que esto te ayude a avanzar con tu proyecto. ¡Bons estudos!