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

HTML:

<!DOCTYPE html>
<html lang="es-cl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main class="presentación">
        <section class="presentación__contenido">
        <h1 class="presentación__contenido__título">Eleve tu negocio digital a otro nivel <strong class="título-destaque">con un Front-end de calidad!</strong></h1>
        <p class="presentación__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="presentación_enlaces">
            <h2 class="presentación_enlaces_sub">Accede a mis redes:</h2>
            <a class="presentación_enlaces_link" href="https://www.instagram.com">
                <img src="./assets/instagram.png">
                Instagram</a>
            <a class="presentación_enlaces_link" href="https://www.github.com">
                <img src="./assets/github.png">
                Github</a>
            <a class="presentación_enlaces_link" href="https://www.linkedin.com">
                <img src="./assets/linkedin.png">
                LinkedIn</a>
            <a class="presentación_enlaces_link" href="www.twitch.com">
                <img src="./assets/twitch.png">
                Twitch</a>        
            
        </div>
        </section>
        <img src="./assets/Imagem.png" alt="Imagen de Ana García trabajando">
    </main>
    <footer>
        
    </footer>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

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

}

.título-destaque{
    color: #22D4FD;
}

.presentación{
    display: flex;
    align-items: center;
    margin: 1% 5%;
    justify-content: space-between;
}

.presentación__contenido{
    width: 815px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.presentación__contenido__título{

    font-size: 33px;
    font-family: "Krona One", sans-serif;
}

.presentación__contenido__texto{
    font-size: 20px;
    font-family: "Montserrat", sans-serif;
}

.presentación_enlaces{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 16px;;
}

.presentación_enlaces_sub {
    font-family: 'Krona One', sans-serif;
    font-size: 24px;
    font-weight: 400;
}

.presentación_enlaces_link {
    width: 378px;
    text-align: center;
    padding: 21.5px 0;
    border-radius: 1px;
    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;
}

.presentación_enlaces_link:hover {
    background-color: #272727;
    cursor: pointer;
}

Resultado con pantalla normal:

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

Resultado con efecto holder:

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

NOTA: Al tomar el pantallazo con el pc, se borra el cursor, pero en el código de CSS se puede "apreciar".

Hola Anderson, espero que estés bien

Parece que estás trabajando en la creación de íconos clicables para tus enlaces de redes sociales. Aquí tienes algunos consejos para asegurarte de que todo funcione correctamente:

Verifica las URLs de los enlaces: Asegúrate de que todas las URLs sean correctas. Por ejemplo, la URL de Twitch debería incluir https:// al inicio para asegurarse de que sea un enlace válido.
Asegúrate de que las imágenes existan: Verifica que las imágenes de los íconos estén en la carpeta correcta (./assets/) y que los nombres de archivo sean exactos.
Centrado de íconos y texto: Ya tienes el display: flex y justify-content: center en .presentación_enlaces_link, lo cual es correcto. El gap: 10px; debería ser suficiente para espaciar los íconos y el texto.
Efecto hover: Ya has implementado un cambio de fondo y cursor en el efecto hover. Si deseas cambiar el color del borde al pasar el mouse, puedes agregar esta línea a .presentación_enlaces_link:hover:
```
border-color: #0000FF;
```
Altura del body: Cambia height: 1vh; en el body a height: 100vh; o elimínalo si no es necesario. Esto asegura que el contenido se muestre correctamente en toda la pantalla.

Espero que estas sugerencias te ayuden a mejorar tu proyecto. ¡Bons estudos!