Deberás implementar una galería de fotos, utilizando solamente HTML y CSS.
⛔ 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.
Podrás utilizar cualquier herramienta de búsqueda que necesites (amamos buscar en Google y leer Stack Overflow <3).
¡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.
Haciendo un fork de este repo.