Sitio sencillo con CSS Flex

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

 

Sincerely Media

Apothecary 87

 

Gabrielle Henderson

Deanna Alys

ONNE Beauty

Anis M

Matheus Ferrero

Rodney Gainous

Natasha Kendall

Este es un sitio sencillo con CSS Flex, que simula una tienda sencilla. Inspirado en el sitio Kiss&Makeup Store 

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado

Sitio Web de Boda – Dark Mode

Sitio Web de Boda – Dark Mode

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 sitio estilo One Page está maquetado con HTML y estilizado con CSS, así como el uso de flexbox...

Sitio Web de Boda

Sitio Web de Boda

Tabla de contenidos Introducción Proceso Paleta de colores y estilos Bosquejo HTML y CSS Sitio web responsivo Publicación del sitio Información técnica Recursos Introducción Este sitio estilo One Page está maquetado con HTML y estilizado con CSS, así como el uso de...

Sitio de Vestido de Novias – Pink

Sitio de Vestido de Novias – Pink

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 sitio estilo One Page está maquetado con HTML y estilizado con CSS, así como el uso de flexbox...