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 */ }