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 hicimos en aula

@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{
    background-color: #000000;
    color: #F6F6F6;
    box-sizing: border-box;
}

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

.header__menu{
    display: flex;
    gap: 80px;
}

.header__menu__link{
    font-family: 'Monserrat',sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #22D4FD;
    text-decoration: none;
}

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

.presentacion {
    display: flex;
    align-items: center;
    padding: 6% 15%;
    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-family: "Montserrat", sans-serif;
    font-size: 24px;
}

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

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

.presentacion__enlaces__subtitulo{
    font-family: "Krone One",sans-serif;
    font-size: 24px;
    font-weight: 400;

}

.presentacion_enlace_link:hover{

    background-color: #272727;
    cursor: pointer;
}

.presentacion__enlaces__subtitulo:hover{
    opacity: 0;
}

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sobre mi</title>
    <link rel="stylesheet" href="./style/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 mí</a>
        </nav>
    </header>
    <main class="presentacion">
        <section class="presentacion_contenido">
            <h1 class="presentacion_contenido_titulo">Sobre mi</h1>
            <p class="presentacion_contenido_texto">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore veniam optio illo exercitationem et, voluptas delectus assumenda nostrum nobis corrupti modi accusantium officiis temporibus sit expedita quod quaerat culpa.</p>
            <p class="presentacion_contenido_texto">Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum provident accusamus id sed, ea eligendi adipisci voluptate dolorum numquam quisquam nam necessitatibus? Illo optio laborum veniam ratione debitis itaque architecto.</p>
        </section>
        <img src="Imagenes/Imagem.png" alt="Foto de Ana García desarrolando un proyecto">

    </main>

    <footer>
        <p class="footer">Desarrollado por Kevin V.L</p>
    </footer>
</body>
</html>
1 respuesta

Hola, Kevin,

Gracias por compartir tu experiencia con nosotros. Recuerda que estamos aquí para ayudarte. Si necesitas más 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!