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

HTML

<div class="pfdsgn__links">
     <h2 class="pfdsgn__links_sbtl" >My links</h2>
     <a class="pfdsgn__links_md" href="https://github.com/">
         <img src="./icons/github.png">
         Github</a>
     <a class="pfdsgn__links_md" href="https://linkedin.com/">
         <img src="./icons/linkedin.png">
         LinkedIn</a>
     <a class="pfdsgn__links_md" href="https://x.com/">
         <img src="./icons/x.png">
         TwitterX</a>
</div>

CSS

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

.pfdsgn__links_md {
    width: 280px;
    text-align: center;
    padding: 21.5px 0 ;
    border-radius: 10px;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 650;
    text-decoration: none;
    color: #d0d8dd;
    border: 2px solid #96c9eb;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.pfdsgn__links_md:hover {
    background-color: #0a2850;
    cursor: pointer;
}

.pfdsgn__links_sbtl {
    font-family: 'Krona One', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #35a1df;
}

Hover Gif

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio de Ana García</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <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://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>
        </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>
</body>
</html>

.presentacion__enlaces__link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px; /* Espaciado ajustado según el Figma */
    text-decoration: none;
    color: #000; /* Asegúrate de que el color de texto sea el deseado */
    font-size: 16px; /* Ajusta el tamaño de la fuente según tu diseño */
    padding: 8px 16px; /* Ajusta el padding según tu diseño */
    border: 1px solid #ddd; /* Añade un borde si es necesario */
    border-radius: 4px; /* Añade esquinas redondeadas si es necesario */
    transition: background-color 0.3s; /* Transición suave para el hover */
    cursor: pointer; /* Cambia el cursor al estilo 'pointer' */
}

.presentacion__enlaces__link img {
    width: 24px; /* Ajusta el tamaño del ícono según tu diseño */
    height: 24px; /* Ajusta el tamaño del ícono según tu diseño */
}

/* Añade un efecto hover para mejorar la usabilidad */
.presentacion__enlaces__link:hover {
    background-color: #272727; /* Cambia el color de fondo al pasar el mouse */
}

/* Añade estilos adicionales según sea necesario */
.presentacion__contenido {
    text-align: center; /* Centra el texto en la sección de contenido */
    margin: 0 auto;
    max-width: 800px; /* Ajusta el ancho máximo de la sección */
}

.presentacion__contenido__titulo {
    font-size: 2rem; /* Ajusta el tamaño del título */
    margin-bottom: 1rem; /* Espacio debajo del título */
}

.presentacion__contenido__texto {
    font-size: 1.2rem; /* Ajusta el tamaño del texto */
    margin-bottom: 2rem; /* Espacio debajo del texto */
}

.presentacion__enlaces__subtitulo {
    font-size: 1.5rem; /* Ajusta el tamaño del subtítulo */
    margin-bottom: 1rem; /* Espacio debajo del subtítulo */
}

.footer {
    text-align: center; /* Centra el texto en el pie de página */
    padding: 1rem; /* Ajusta el padding del pie de página */
    background-color: #f0f0f0; /* Ajusta el color de fondo del pie de página */
}