Shoe Shop Grid CSS

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

Font Awesome License

Unsplash

Deja tus comentarios y sugerencias para el sitio web Shoe Shop Grid CSS.

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado

Landing Page para Negocio

Landing Page para Negocio

Tabla de Contenidos Introducción Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información Técnica Recursos Introducción Esta es una landing page para el lanzamiento de un nuevo producto o servicio, construído con HTML y...

Una Landing Page Sencilla

Una Landing Page Sencilla

https://www.youtube.com/watch?v=AotDOfaKss0 Tabla de Contenidos Introducción Desafíos Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información Técnica Recursos Introducción Esta es una landing page para el lanzamiento de un...

Página Estilo One Page

Página Estilo One Page

Tabla de Contenidos Introducción Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información Técnica Recursos Introducción Este es una página web estilo One Page, la cuál está maquetada con HTML y estilizada con CSS, este...