[Proyecto] Espaciado y margenes | Alura Latam

Espaciado y márgenes con Flexbox

.presentacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px; 
  margin: 10%; 
  max-width: 1200px; 
}

Definiendo el tamaño de la sección de texto: Lo primero es verificar de que cuente con el atributo clase, luego de validarlo se le aplica el estilo CSS definiendo el ancho de la seccion del texto usando un width basado en el diseño

Ajustando tamaños de títulos y textos: similar al punto anterior debemos verificar que tanto el titulo como el parrafo cuenten con los atributos de clase, ya luego de esto usamos font-size para ajustar los tamaños de las fuentes teniendo en cuenta el figma.

**Importando y aplicando fuentes de Google Fonts: **

para importar las fuentes buscamos en google fonts ambas, luego de esto copiamos el código que inicia con @import y agregamos el link al inicio de nuestro archivo styles.css ejemplo: @import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;700&display=swap');

Personalizando fuentes de títulos y textos: En este punto es importante tener claridad y seguridad de haber agregado las importaciones necesarias a nuestro archivo CSS, ya después de tener esas claridades solo resta agregar la personalización a nuestros estilos para que sigan el formato del diseño en figma

¡Hola Clever, espero que estés bien!

Sugerencia: compartir tu actividad (caso no tiene duda) en el servidor ONE / Alura Latam en Discord ;)

Parece que estás trabajando en un proyecto donde estás utilizando Flexbox para manejar el espaciado y márgenes de tus elementos. Vamos a ver cómo puedes ajustar eso de manera efectiva.

Espaciado con Flexbox:
- Ya estás utilizando gap: 40px;, lo cual es genial para controlar el espacio entre los elementos hijos del contenedor .presentacion. Esto es muy útil porque te permite mantener un espaciado consistente sin tener que añadir márgenes individuales a cada elemento.
Márgenes del contenedor:
- Has aplicado margin: 10%; al contenedor .presentacion. Esto añadirá un margen del 10% alrededor de todo el contenedor, basado en el tamaño de su elemento padre. Si deseas un control más preciso, podrías considerar usar márgenes específicos como margin: 10% auto; para centrar el contenedor horizontalmente mientras mantienes el margen superior e inferior.
Ancho máximo:
- Establecer max-width: 1200px; es una buena práctica para asegurar que el contenido no se extienda demasiado en pantallas grandes, lo que puede mejorar la legibilidad.
Definiendo el tamaño de la sección de texto:
- Si necesitas definir un ancho específico para una sección de texto dentro del contenedor, puedes usar width o flex-basis en el elemento específico. Por ejemplo, si tienes un elemento con la clase .texto, podrías hacer algo como:
```
.texto {
  flex-basis: 60%;
}
```
Esto asignaría el 60% del ancho del contenedor a esa sección de texto.
Ajustando tamaños de títulos y textos:
- Asegúrate de que cada elemento tenga las clases correctas aplicadas. Luego, puedes usar font-size para ajustar los tamaños según lo necesites. Por ejemplo:
```
.titulo {
  font-size: 2rem;
}
.parrafo {
  font-size: 1rem;
}
```
Importando y aplicando fuentes de Google Fonts:
- Parece que ya has importado las fuentes correctamente. Asegúrate de aplicarlas a los elementos adecuados:
```
body {
  font-family: 'Montserrat', sans-serif;
}
.titulo {
  font-family: 'Krona One', sans-serif;
}
```

Espero que estas sugerencias te sean útiles para ajustar el espaciado y los márgenes en tu proyecto. ¡Bons estudios!