Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Haga lo que hícimos en el aula

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio Silene Gonzalez</title>
    <link rel="stylesheet" href="stile.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">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 Silene González, 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_subtitulos">Accede a mis redes:</h2>
                <a class="presentacion_enlaces_link" href="https://www.instagram.com/"> <img src="./images/instagram.png" alt="">Instagram</a>
                <a class="presentacion_enlaces_link" href="https://www.github.com/"><img src="./images/github.png" alt="">Git Hub</a>    
                <a class="presentacion_enlaces_link" href="https://www.linkedin.com/"><img src="./images/linkedin.png" alt="">LinkedIn</a>     
            </div>
        </section>
        <img src="./images/silene.jpg" alt="Imagen de Silene González trabajando">
    </main>
    <footer class="footer">
        <p>Desarrollado por Silene González Quiroz</p>
    </footer>
    </body>
</html>

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

*{
    padding: 0;
    margin: 0;
}

body{
    /*height: 100vh */
    background-color: #000000;
    color: white;
    box-sizing: border-box;
}

.titulo-destaque{
    color: #22D4FD;
    font-size: 36px;
}

.presentacion{
    display: flex;
    align-items: center;
    padding: 2% 20%;
    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_titulo:hover{
    color: bisque;
}
.presentacion_contenido_texto{
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
}

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

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

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

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

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

.header{
    display: flex;
    align-items: center;
    padding: 2% 10%;
    justify-content: space-between;
    
}

.header_menu{
    display: flex;
    justify-content: space-between;
    gap: 50px;
}

.header_menu_link{
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: bold;    
    text-align: center;
    color: #22D4FD;
    text-decoration: none;
    display: flex;
    justify-content: center;
    gap: 10px;

}

.header_menu_link:hover{
    color: bisque;
}
1 respuesta

Hola, Silene ,

Gracias por compartir tu código con nosotros. Recuerda que estamos aquí para ayudarte. Si necesitas ayuda, no dudes en buscarnos en el foro.

¡Gracias nuevamente!

Saludos,

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