Sitio web sencillo de nutrición (Flex, SASS)

Sitio web sencillo de nutrición (Flex, SASS). Parte del reto personal #100sitioswebchallenge este es el sitio número 40.

Puedes visualizar el sitio en: Nutri Portfolio

DESAFÍOS

De los últimos 10 proyectos este es el último practicando Flex y SASS. Como podrán ver el inicio del sitio es un poco convencional comparado con el resto del sitio, ya que jugué un poco con el posicionamiento del menú. Esto me permitió seguir practicando el uso de Flex para cuando quiero acomodar bloques de contenido de manera horizontal o vertical.

PROCESO

Paleta de colores y estilos

Paleta de colores: 44D8B7 FFC038 F9F9F9

Tipografía: Roboto de Google Fonts

Mockup (Bosquejo)

Este es sólo el bosquejo de la idea de cómo quería que se viera.

HTML y CSS

Una vez que el bosquejo está listo, ahora procedo a materializarlo en HTML y CSS (SASS).

Sitio web responsivo

Y por último el sitio queda listo para ser visto en aparatos móviles.

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: Nutri Portfolio

Información técnica

  • Figma
  • Visual Studio Code
  • HTML5 (Semántico)
  • CSS (SASS, Flex)
  • Sitio responsivo
  • Github
  • Netlify

Recursos

Font Awesome License

Pexels

Deja tus comentarios y sugerencias

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