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:
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
Icon
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.
