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 clases : Preparando el layaout del proyecto

Adjunto código con modificaciones :

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></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 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__subtitulos">
                    <h2 class="presentacion__enlaces">Accede a mis redes:</h2>
                    <a class="presentacion__enlaces__link" href="https://instagram.com/">Instagram</a>
                    <a class="presentacion__enlaces__link" href="https://github.com/">GitHub</a>
                </div>
               
        </section>
            <img src="Imagem.png" alt="Foto de Ana García desarrolando un proyecto">
    </main>
    <footer></footer>
</body>
</html>

CSS

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


* {
    padding: 0;
    margin:0;
}

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


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

.presentacion {
    margin: 10% 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;
    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;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #f6f6f6;
    font-family: 'Montserrat', sans-serif;
    border: 2px solid #22D4FD;
}
1 respuesta

¡Hola Gino, espero que estés bien!

Gracias por compartir tu código. Parece que estás trabajando en un proyecto de portafolio y has realizado algunas modificaciones en el HTML y CSS. Según el contexto de la actividad, parece que ya has implementado la mayoría de los cambios solicitados, pero permíteme revisar algunos puntos clave para asegurarnos de que todo esté en orden:

  1. Subtítulo "Accede a mis redes:": Veo que ya has agregado el subtítulo dentro de la <div> que contiene los enlaces. Está correctamente envuelto en una etiqueta <h2> y tiene la clase presentacion__enlaces__subtitulos.

  2. Disposición de los elementos con Flexbox: Has cambiado la dirección del Flexbox a columna (flex-direction: column;) en la clase .presentacion__enlaces, lo cual alinea los elementos verticalmente.

  3. Alineación y espaciado: También has añadido align-items: center; y gap: 32px; en la clase .presentacion__enlaces, lo que debería centrar los elementos y añadir el espaciado adecuado entre ellos.

  4. Estilización del subtítulo: La clase .presentacion__enlaces__subtitulos está configurada con la fuente 'Krona One', tamaño de fuente de 24px y peso de fuente de 400, lo cual debería dar el estilo deseado al subtítulo.

  5. Estilo de los botones: Los enlaces tienen la clase .presentacion__enlaces__link con los estilos solicitados: texto blanco, borde cian de 2px, ancho de 378px y esquinas redondeadas con un radio de 8px.

Parece que has seguido correctamente las instrucciones de la actividad. Si encuentras algún problema específico o algo no está funcionando como esperabas, no dudes en dar más detalles para que pueda ayudarte mejor.

Espero que esto te sea de ayuda y te deseo mucho éxito en tu proyecto. ¡Bons estudios!