Desafío 1 (remix)

Deberás implementar una galería de fotos, utilizando solamente HTML y CSS.

Condiciones del desafío

⛔ No se puede utilizar JavaScript.

⛔ No se puede utilizar ningún framework de CSS.

✅ Debe tener un título, separado de las imágenes por un margen.

✅ Resetear los estilos del margin, padding y box-sizing.

✅ La galería de fotos debe estar centrada horizontal y verticalmente dentro de su contenedor y tener un ancho de 900px.

✅ La galería debe tener al menos 10 imágenes y al menos 2 deben ser de diferentes tamaños (ancho/alto).

✅ Para resoluciones mobile (max: 500px) las fotos deben visualizarse una debajo de la otra, en 1 columna.

✅ Las imágenes deben tener borde y estar separadas por un margen.

✅ Las imágenes deben tener un 25% de transparencia por default y volverse totalmente opacas al hacerles hover.

✅ Las imágenes deben adaptarse responsivamente al tamaño del contenedor si este se achica, pero no superar su tamaño máximo si este se agranda.

✅ Usar Flexbox (no Grids).

✅ Debe soportar fotos horizontales y verticales.

✅ Debe poder ampliar una foto a su tamaño original o a un máximo determinado al hacerle un click.

✅ Usar el GitHub Flow.

✅ Realizar el deploy en Vercel.

✨ Serás libre de implementar la estética y funcionalidad que quieras, siempre y cuando se cumplan las condiciones esenciales del desafío.

📚 Herramientas de consulta

Podrás utilizar cualquier herramienta de búsqueda que necesites (amamos buscar en Google y leer Stack Overflow <3).

📸 ¿De dónde saco fotos?

¡Este repositorio incluye algunas fotos de ejemplo! Están en la carpeta fotos:

También podés buscar fotos en Lorem Picsum u otras que te gusten.

🤔 ¿Cómo presento mi código?

Si tenés una cuenta en GitHub

Haciendo un fork de este repo.