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

index.html

<!DOCTYPE html>
<html lang="es-mx">
<head>
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
        <nav class="header__menu">
            <a class="header__menu__link" href="#">Home</a>
            <a class="header__menu__link" href="#">Sobre mí</a>
        </nav>
    </header>

    <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 Sheyla 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="Github">Github
                </a>
                <a class="presentacion__enlaces__link" href="https://linkedin.com/in/">
                    <img src="./assets/linkedin.png" alt="LinkedIn">LinkedIn
                </a>
                <a class="presentacion__enlaces__link" href="https://twitch.tv/">
                    <img src="./assets/twitch.png" alt="Twitch">Twitch
                </a>
            </div>
        </section>

        <img src="./assets/Imagen.png" alt="Foto de Sheyla García desarrollando un proyecto">
    </main>

    <footer class="footer">
        <p>Desarrollado por Jean Pool</p>
    </footer>
</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    /* height: 100vh; */  
    background-color: #000000;
    color: #F6F6F6;
}

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

.presentacion {
    padding: 8% 15%; 
    display: flex;
    align-items: center;
    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;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

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

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

.presentacion__enlaces__link:hover {
    background-color: #272727;
}


.footer {
    padding: 24px;
    color: #000000;
    background-color: #22D4FD;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 400;
}


.header__menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
}

.header__menu__link {
    font-size: 18px;
    color: #F6F6F6;
    margin: 0 10px;
    padding: 10px 15px; 
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    transition: color 0.3s ease;
}

.header__menu__link:hover {
    color: #22D4FD;
}

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

Hola, espero que estés muy bien.

¡Felicitaciones por tus avances en el aprendizaje!

Queremos comentarte que actualmente estamos priorizando el uso del foro para publicar dudas. De esa manera, podemos optimizar el tiempo de respuesta y asegurar que todos los estudiantes reciban apoyo efectivo.

Para compartir comentarios, experiencias, recomendaciones, desafíos u opiniones, te invitamos a participar activamente en nuestro canal de Discord.
Allí la interacción es inmediata, llega a más compañeros y favorece el intercambio constante entre la comunidad.

¡Tu participación hace la diferencia!

Un saludo.

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios