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

Eleve tu negocio digital a otro nivel con un Front-end de calidad!

¡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>
        <a href="https://instagram.com/">Instagram</a>
        <a href="https://github.com/">GitHub</a>
    </sections>
        <img src="Imagem.png" alt="Foto de Ana García desarrolando un proyecto">
</main>
<footer></footer>

@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; height: 100vh; box-sizing: border-box; }

strong{ color: #22D4FD; }

.titulo-destaque{

color: #22D4FD;

}

.presentacion{ display: flex; /* or inline-flex */ align-items: center; margin: 10%; justify-content: space-between;

}

.presentacion_contenido{ width: 615px; }

.presentacion__contenido__titulo{

font-size: 36px;
font-family: "Krona One", sans-serif;

}

.presentacion__contenido_texto{ font-size: 24px; font-family: "Montserrat", sans-serif; }

1 respuesta

Hola Oliver, espero que estés bien

Parece que estás trabajando en un proyecto donde necesitas ajustar el espaciado y el tamaño de las secciones de texto e imagen usando Flexbox, así como aplicar fuentes de Google Fonts. Vamos a revisar algunos puntos que pueden ayudarte:

  1. Espaciado y márgenes con Flexbox:

    • Ya has aplicado justify-content: space-between; en la clase .presentacion, lo cual es correcto para espaciar los elementos. Asegúrate de que el contenedor .presentacion tenga suficiente espacio en su contenedor padre para que el espaciado sea efectivo.
  2. Definiendo el tamaño de la sección de texto:

    • Has aplicado un ancho de 615px a .presentacion_contenido, lo cual parece estar alineado con el ejercicio. Asegúrate de que este valor coincide con las especificaciones del diseño en Figma.
  3. Ajustando tamaños de títulos y textos:

    • Los tamaños de fuente para los títulos y textos parecen estar correctamente definidos. Verifica que los valores de font-size coincidan con los del diseño en Figma.
  4. Importando y aplicando fuentes de Google Fonts:

    • Has importado correctamente las fuentes "Krona One" y "Montserrat". Asegúrate de que las estás aplicando a los elementos correctos utilizando font-family.
  5. Errores menores en el HTML:

    • Noté que tienes un pequeño error en tu HTML: la etiqueta <section> está escrita como <sections>. Deberías corregirlo a <section> para que sea válido.

Aquí tienes un ejemplo de cómo debería verse la estructura corregida:

<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>
        <a href="https://instagram.com/">Instagram</a>
        <a href="https://github.com/">GitHub</a>
    </section>
    <img src="Imagem.png" alt="Foto de Ana García desarrolando un proyecto">
</main>

Espero que estas sugerencias te ayuden a avanzar con tu proyecto. ¡Bons estudios!