Sitio sencillo maquetado con HTML y CSS Grid

Este es un sitio maquetado con HTML y estilizado con CSS Grid. El proyecto 26 del reto personal #100sitioswebchallenge

Puedes visualizar el sitio en: E-Fashion

DESAFÍOS

Tenía bastante tiempo sin usar Grids en un proyecto. Me llevo un poco de tiempo darle una repasada de nuevo y entender los conceptos básicos de Grid. Sobre todo el contenedor donde llamo al display y posteriormente cómo lo separo por columnas y filas.

Para este proyecto pude haber usado flex, pero hay una sección en particular donde era necesario usar Grids.

Aquí pueden ver la imagen donde tuve que implementar grid

Es imagen en particular la uso en la clase box6, y ahí precisamente se pueden dar cuenta como le doy el efecto de tomar más columnas y filas que las demás imágenes.

Aquí puedes ver los estilos de este proyecto.

PROCESO

Paleta de colores y estilos

Paleta de colores: FFFFFF 4D4D4D E5B396

Tipografía:

• Montserrat de Google Fonts

Mockup (Bosquejo)

Este es el proceso del bosquejo hecho con Figma

HTML y CSS

Este es el proceso de la maquetación hecho con HTML primero, y posteriormente estilizarlo con CSS y Grid.

Sitio web responsivo

Y finalmente esta es la visualización del sitio adaptado a aparatos móviles.

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: E-Fashion

Información técnica

• Visual Studio Code
• HTML5 (Semántico)
• CSS (Grid)
• Sitio responsivo
• Github
• Netlify

Recursos

Fuente

• Theme Fiber

Icon

• Feather

Unsplash

• Freestocks
• DEVN
• Charles Deluvio
• Carlos Vaz
• Jesper Riknie
• Gio Barlett
• Sabrinna Ringquist
• Fotografierende
• Omid Armin
• Sabrina Ringquist

¿Qué te pareció el proyecto? ¿Cuál ha sido tu experiencia trabajando con Grid? Compárteme en los comentarios.