comparte el proyecto | HTML y CSS: ambientes de desarrollo, estructura de archivos y tags | 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</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
    <header class="header">
        <nav class="header_menu">
            <a class="header_menu_link" href="index.html">Home</a>
            <a class="header_menu_link" href="about.html">Sobre mi</a>
        </nav>
    </header>
    <main class="presentacion">
        <section class="presentacion_contenido">
        <h1 class="presentacion_contenido_titulo">Listo Para continuir <strong class="titulo-destaque">con un buen elemento!</strong></h1>
        <p class="presentacion_contenido_texto">Amplia experiencia en atención a usuario, base de datos, manejo de redes, análisis y levantamiento de
            Información para definir los requisitos funcionales de sistema de información.
            Persona carismática y con facilidad de aprendizaje.
        </p>
            <div class="presentacion_enlace">
                <h2 class="presentacion_enlace_subtitulos">Acceda a mis redes:</h2>
                <a class="presentacion_enlace_link" href="https://www.instagram.com/nijober88/">
                    <img src="./assets/instagram.png" alt="">
                    Instagram</a>
                <a class="presentacion_enlace_link" href="https://github.com/nijober88/">
                    <img src="./assets/github.png" alt="">
                    Github</a>
            </div>
           
        </section>
            <img src="./assets/luna2.png" alt="Es una imagen de Yohana Bermúdez">

    </main>
    <footer class="footer">
        <P>Desarrollado por Yohana</P>
    </footer>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');


:root {
    --color-primaria: #3c150d;
    --color-secundaria: #F6F6F6;
    --color-terciaria: #ff704d;
    --color-hover: #272727;

    --fuente-krona: 'Krona One', sans-serif;
    --fuente-montserrat: 'Montserrat', sans-serif;
}

* {
    padding: 0;
    margin:0;
}

body{
    box-sizing: border-box;
    background-color: var(--color-primaria);
    color: var(--color-secundaria);
}

.header{
    padding: 2% 0% 0% 15%;
}

.header_menu{
    display: flex;
    gap: 80px;
}
.header_menu_link{
    font-family: var(--fuente-montserrat);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-terciaria);
    text-decoration: none;

}



.presentacion {
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.presentacion_contenido{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}


.presentacion_contenido_titulo{
    font-size: 2rem;
    font-family: var(--fuente-krona);
}

.titulo-destaque {
    color: var(--color-terciaria); ;
}

.presentacion_contenido_texto{
    font-size: 1.5rem;
    font-family: var(--fuente-montserrat);
}

.presentacion_enlaces{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}
.presentacion_contenido_list{
    list-style: none;
    margin: 0;
    padding: 8px;
    display: inline-block;
    font-family: var(--fuente-montserrat);
}

.presentacion_enlace_subtitulo{
    font-family: var(--fuente-krona);
    font-weight: 400;
    font-size: 1.5rem;
}

.presentacion_enlace_link{
      display: flex;
      justify-content: center;
      gap: 16px;
      border: 2px solid var(--color-terciaria);
      width: 50%;
      text-align: center;
      border-radius: 8px;
      font-size: 1.5rem;
      font-weight: 600;
      padding: 21.5px 0;
      text-decoration: none;
      color: var(--color-secundaria);
      font-family: var(--fuente-montserrat);
}

.presentacion_enlace_link:hover{
    background-color: var(--color-hover);
}

.presentacion_imagen{
    width: 50%;
    
}
img{
    border-radius:50%;
}

.footer{
    color:var(--color-primaria);
    background-color: var(--color-terciaria);
    padding: 24px;
    text-align: center;
    font-family: var(--fuente-krona);
    font-size: 1.5rem;
    font-weight: 400;
}

@media (max-width: 1200px) {

    .header{
         padding: 10%;  
    }
    .header_menu{
        justify-content: center;
    }
    .presentacion{
        flex-direction: column-reverse;
        padding: 5%;

    }

    .presentacion_contenido{
        width: auto;
    }
    
}

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

Hola Nini, espero que estés muy bien.

Felicitaciones por tu aprendizaje. Estamos priorizando el foro para postear dudas, así optimizamos el tiempo de respuesta para ustedes.

Te recomiendo que puedes interactuar con el resto de nuestros compañeros por nuestro Discord.

En virtud de que en Discord el alcance es mayor, la interacción es inmediata y llega a más compañeros y el foro solo quedaría para esclarecer cualquier duda que puedas tener sobre el contenido de los cursos.

De esa manera si tienes algún comentario, opinión, recomendación o algún consejo, o para compartir los desafios sea por el Discord, con certeza por ahí llegará a más personas.

Un saludo.

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