Sitio Shoe Shop Grid CSS, un sitio sencillo que simula un catálogo de calzado, este es el sitio número 20 del reto personal #100sitioswebchallenge.
Basado en la plantilla StellaShop
Puedes visualizar el sitio en: Shoe Shop Grid CSS
DESAFÍOS
Este sitio lo cree usando CSS Grid para dar la forma de mosaico donde se muestran cada uno de los calzados. Jugando con la altura y ancho de cada imagen hasta lograr el efecto que deseaba.
Sin duda he podido ver el poder del grid en CSS al jugar con la composición de un sitio web.
PROCESO
Estilos
Elegí la tipografía Montserrat de Google Fonts y Font Awesome para los íconos de compartir usados en el detalle de cada calzado.
Mockup (Bosquejo)
Este es el bosquejo de todo el sitio hecho en Figma. Siempre bosquejar primero y maquetar después me ahorra mucho tiempo en el proceso final.
HTML y CSS
Ahora trabajo con la maquetación del sitio, asegurándome seguir el bosquejo hecho.
Hasta tener el sitio final
Sitio web responsivo
Y así se ve el sitio a partir de que la pantalla sea menor de 768px de ancho.
Publicación del sitio
Consulta el código del sitio en Github
Puedes visualizar el sitio en: Shoe Shop Grid CSS
Información técnica
- Figma
- Visual Studio Code
- HTML5 (Semántico)
- CSS (Grid)
- Sitio responsivo
- Github
- Netlify
Recursos
Unsplash
Deja tus comentarios y sugerencias para el sitio web Shoe Shop Grid CSS.
