ejercicio | HTML y CSS: header, footer y variables CSS | Alura Latam

<!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>
    <style>
        /* Estilos generales */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }

        main {
            padding: 20px;
            text-align: center;
        }

        .presentacion__contenido__titulo {
            font-size: 24px;
            margin-bottom: 10px;
        }

        .titulo-destaque {
            color: #007BFF;
        }

        .presentacion__contenido__texto {
            font-size: 16px;
            margin-bottom: 20px;
        }

        .presentacion__enlaces {
            margin-top: 20px;
        }

        .presentacion__enlaces__subtitulo {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .presentacion__enlaces__link {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
            text-decoration: none;
            color: #333;
            margin: 5px;
            padding: 10px;
            border-radius: 5px;
            transition: all 0.3s ease;
        }

        .presentacion__enlaces__link img {
            width: 24px;
            height: 24px;
        }

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

        footer {
            margin-top: 20px;
            padding: 10px;
            background-color: #333;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
    <main class="presentacion">
        <section class="presentacion__contenido">
            <h1 class="presentacion__contenido__titulo">
                Eleva 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>

</body>
</html>