Haga lo que hicimos en el aula

A continuación, comparto la solución implementada para cada una de las actividades del desafío:

• Ajuste del diseño para pantallas más pequeñasPara evitar que la imagen quede pegada al texto en la clase .presentacion, agregué la propiedad gap en CSS:

  .presentacion {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6% 15%;
      gap: 82px;
  }
  

  Esto asegura un espaciado adecuado entre los elementos.

• Implementación de media queries para cambios en el diseñoPara cambiar la disposición de los elementos en pantallas menores a 1023px, usé una media query con flex-direction: column;:

  @media (max-width: 1023px) {
      .presentacion {
          flex-direction: column;
      }
  }
  

  De esta forma, la imagen se posiciona sobre el texto.

• Refinamiento del diseño responsivoPara asegurar que la imagen aparezca sobre el texto cuando el ancho de pantalla sea menor a 1200px, utilicé flex-direction: column-reverse;:

  @media (max-width: 1200px) {
      .presentacion {
          flex-direction: column-reverse;
      }
  }
  

  Con esto, el orden de los elementos sigue el diseño en Figma.

• Ajuste del encabezado para pantallas más pequeñasPara centrar el encabezado y corregir el desbordamiento, ajusté el padding de la clase .header:

  @media (max-width: 1200px) {
      .header {
          padding: 10%;
      }
  }
  

• Centrado de elementos del menú en pantallas más pequeñasPara centrar los elementos "Inicio" y "Sobre mí", agregué justify-content: center; en .header_menu:

  @media (max-width: 1200px) {
      .header_menu {
          justify-content: center;
      }
  }
  

• Refinamiento del diseño responsivo del encabezadoFinalmente, verifiqué los valores de padding y ajusté las propiedades de flexbox en .header y .header_menu para que el diseño del encabezado se vea alineado con el diseño de Figma.

Captura de pantalla de evidencia:Atentamente,

Laura Isabella Moreno Herrera