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

1 - Espaciado y Márgenes con Flexbox Para ajustar el espacio entre la sección de texto y la imagen y crear una apariencia similar al diseño en Figma, debes usar la propiedad justify-content: space-between y añadir márgenes para evitar que los elementos queden pegados a los bordes de la pantalla:

css Copiar código .presentacion { display: flex; align-items: center; justify-content: space-between; margin: 10%; } justify-content: space-between;: Distribuye los elementos hijos con el máximo espacio posible entre ellos. margin: 10%;: Agrega un margen del 10% alrededor del contenedor para evitar que los elementos queden pegados a los bordes. 2 - Definiendo el Tamaño de la Sección de Texto Para ajustar el tamaño de una sección de texto conforme a las especificaciones de Figma, sigue estos pasos:

En HTML, agrega una clase a la etiqueta

:

html Copiar código

En CSS, define el ancho de esta sección:

css Copiar código .presentacion__contenido { width: [valor extraído de Figma]; } Reemplaza [valor extraído de Figma] con el ancho específico (por ejemplo, 50%, 300px, etc.).

3 - Ajustando Tamaños de Títulos y Textos Para modificar el tamaño de los textos de títulos y párrafos:

En HTML, agrega clases específicas para el título y el texto:

html Copiar código

Título

Texto del párrafo.

En CSS, define los tamaños de fuente:

css Copiar código .presentacion__contenido__titulo { font-size: [tamaño del título extraído de Figma]; }

.presentacion__contenido__texto { font-size: [tamaño del texto extraído de Figma]; } Reemplaza [tamaño del título extraído de Figma] y [tamaño del texto extraído de Figma] con los valores específicos.

4 - Importando y Aplicando Fuentes de Google Fonts Para importar y aplicar las fuentes "Krona One" y "Montserrat":

Ve a Google Fonts y busca "Krona One" y "Montserrat".

Usa la opción @import para incluir las fuentes en tu archivo CSS:

css Copiar código @import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;700&display=swap'); Aplica las fuentes a los elementos deseados:

css Copiar código h1, .presentacion__contenido__titulo { font-family: 'Krona One', sans-serif; }

p, .presentacion__contenido__texto { font-family: 'Montserrat', sans-serif; } 5 - Personalizando Fuentes de Títulos y Textos Para asegurar que el estilo visual de la página esté alineado con el diseño en Figma:

Asegúrate de que las clases presentacion__contenido__titulo y presentacion__contenido__texto estén aplicadas en HTML (como en el paso 3).

En CSS, personaliza las fuentes:

css Copiar código .presentacion__contenido__titulo { font-family: 'Krona One', sans-serif; /* Otros estilos según Figma */ }

.presentacion__contenido__texto { font-family: 'Montserrat', sans-serif; /* Otros estilos según Figma */ }

1 respuesta

¡Hola! ¿Cómo estás?

Gracias por tu aporte en el foro. Su contribución es esencial para el crecimiento de nuestra comunidad en Alura.

Sigue así y no dudes en volver al foro si tienes alguna pregunta o dificultad.

Abrazos y buenos estudios!

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