¡Mi último proyecto de maquetación web está listo! 🚀

¿Qué logré?

1. Flexbox para el Layout Global
En el contenedor principal (.container): Se usa Flexbox para organizar el layout global de la página, con una dirección de columna (flex-direction: column) para que los elementos del header, main y footer se alineen verticalmente. Esto asegura que la estructura se vea bien en pantallas grandes y pequeñas.

2. CSS Grid para la Sección de Características
En .grid-container: Se utiliza CSS Grid para dividir las características del proyecto en columnas responsivas. Usamos grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)), lo que crea un número dinámico de columnas que se ajustan al ancho disponible. Esto garantiza que las características se distribuyan en varias columnas cuando haya espacio suficiente y se apilen en una sola columna en pantallas pequeñas.

3. Diseño Responsivo
Con las media queries: En pantallas pequeñas (por debajo de 768px), el diseño cambia para adaptarse mejor a dispositivos móviles. La lista de características se reordena a una sola columna, y los elementos se ajustan para ser más fáciles de leer y navegar.

¡Estoy bastante contento con el resultado! 😎 Es increíble ver cómo una idea se convierte en algo tangible. Como desarrollador web, este tipo de proyectos me siguen motivando a seguir aprendiendo y a mejorar cada día.

¿Qué opinan? ¡Espero que les guste tanto como a mí!