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

2
respuestas

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

| 26.8k xp | 29 posts

<main class="presentacion">
    <section class="presentacion__contenido">
        <h1 class="presentacion__contenido__titulo">
            Eleve tu negocio digital a otro nivel
            <strong class="titulo-destaque">con un Front-end de calidad!</strong>
        </h1>
        <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/">
                <img src="./assets/github.png" alt="Icono de Github">
                GitHub
            </a>
            <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>
        </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>

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

2 respuestas

por Micaela Gonzalez

| 26.8k xp | 29 posts

hace 2 semanas

.presentacion__enlaces__link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    color: #F6F6F6;
    border: 2px solid #22D4FD;
    width: 378px;
    border-radius: 8px;
    background-color: transparent;
    text-align: center;
    padding: 16px 0;
    text-decoration: none;
    font-size: 24px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s ease;
}

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

por Brenda Souza

| 4883.2k xp | 17616 posts

Instructor Scuba

hace 2 semanas

¡Hola, Micaela, espero que estés bien!

Parece que estás trabajando en un proyecto donde necesitas organizar y estilizar los enlaces a redes sociales. Vamos a revisar lo que puedes hacer para seguir los pasos de la actividad:

Organización de íconos: Ya tienes los enlaces a GitHub, LinkedIn y Twitch en tu HTML. Asegúrate de que las imágenes de los íconos estén correctamente ubicadas en la carpeta assets.
Centrado de íconos y textos: En tu archivo CSS, busca la clase .presentacion__enlaces__link y asegúrate de que tenga las siguientes propiedades para centrar los íconos y textos:
```
.presentacion__enlaces__link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px; /* Ajusta el valor según el diseño */
}
```

Efecto Hover: Para agregar el efecto hover, puedes añadir lo siguiente a tu CSS:

.presentacion__enlaces__link:hover {
    border: 2px solid #0000FF; /* Borde azul */
    background-color: #272727; /* Fondo negro más claro */
    cursor: pointer; /* Cambia el cursor a pointer */
}

Con estos ajustes, deberías poder replicar lo que se hizo en la clase. Asegúrate de que tu archivo CSS esté correctamente vinculado al HTML para que los estilos se apliquen.

Espero haber ayudado y buenos estudios!