Este es un sitio sencillo con CSS Flex, que simula una tienda sencilla. El sitio número 31 parte del reto #100sitioswebchallenge
Puedes visualizar el sitio en: Hair Care
DESAFÍOS
Las celdas de este sitio las acomodé con CSS Flex. Puedo ver cómo empezando a hacer sitios desde HTML y CSS puro y poco a poco ir trabajando con el pre-procesador SASS es más fácil ir estructurando el sitio. Y ahora con Flex puedo ver que fácil es poder tener el control a la hora de pasarlo en vista móvil sólo usando flex-direction: column.
PROCESO
Paleta de colores y estilos
Paleta de colores: EDC382 AA3B45 colours.cafe
Tipografía: Roboto de Google Fonts
Mockup (Bosquejo)
Empiezo el concepto del sitio en Figma, de esta manera me ahorro mucho tiempo a la hora de maquetar el sitio.
HTML y CSS
Con el bosquejo a un lado empiezo a hacer la maquetación del sitio. En este caso usando el pre-procesador SASS y CSS Flex
Hasta tener el sitio final
Sitio web responsivo
Y por último por medio de media querie tengo el sitio responsivo.
Publicación del sitio
Consulta el código del sitio en Github
Puedes visualizar el sitio en: Hair Care
Información técnica
- Figma
- Visual Studio Code
- HTML5 (Semántico)
- CSS (SASS, Flex)
- Sitio responsivo
- Github
- Netlify
Recursos
Unsplash
Este es un sitio sencillo con CSS Flex, que simula una tienda sencilla. Inspirado en el sitio Kiss&Makeup Store
