Haga lo que hicimos en el aula

Hola Ariel, espero que estés bien

Para replicar lo que hicimos en el aula, parece que ya tienes una buena estructura en tu código HTML y CSS. Vamos a asegurarnos de que todo esté configurado correctamente para que el diseño con Flexbox funcione como esperas.

1. HTML: Tu estructura HTML parece estar bien. Tienes un <main> con la clase presentacion que es el contenedor principal donde aplicarás Flexbox.

2. CSS: Veo que ya estás usando Flexbox en la clase .presentacion. Aquí hay algunas sugerencias para mejorar o ajustar el diseño:

   • Asegúrate de que los elementos dentro de .presentacion estén distribuidos como deseas. Puedes usar propiedades como justify-content para alinear los elementos horizontalmente.

   • Si quieres que el texto y la imagen estén uno al lado del otro, asegúrate de que el contenedor .presentacion tenga suficiente espacio o que los elementos hijos tengan un ancho adecuado.

   • Aquí tienes un ejemplo de cómo podrías ajustar el CSS:

     .presentacion {
         display: flex;
         align-items: center;
         justify-content: space-between; /* Espacio entre los elementos */
         padding: 20px;
     }
     
     .presentacion img {
         max-width: 40%; /* Ajusta el tamaño de la imagen */
         border-radius: 10px; /* Bordes redondeados */
     }
     
     .presentacion h1, .presentacion p {
         max-width: 50%; /* Ajusta el tamaño del texto */
     }
     

3. Verificación: Asegúrate de que el archivo CSS esté correctamente vinculado en el HTML, y que no haya errores de sintaxis que puedan afectar el diseño.

Espero que estos consejos te ayuden a replicar lo que hicimos en clase. ¡Bons estudios!