Sitio sencillo hecho con CSS (SASS y Flex)

Este es un sitio sencillo hecho con Flex y el pre-procesador SASS. Parte del reto personal #100sitioswebchallenge

Puedes visualizar el sitio en: Flex Search

DESAFÍOS

Con una cabecera poco convencional, quise hacer este sitio muy sencillo, con un solo botón como navegador que es el botón de home, dando prioridad a los botones para las redes sociales.

PROCESO

Paleta de colores y estilos

Paleta de colores: AEDDDB 5B5640

Tipografía: Roboto de Google Fonts

Mockup (Bosquejo)

El bosquejo es aproximadamente el 40% del trabajo total, porque a partir de ahí la maquetación del sitio es más rápido y sencillo, al seguir una guía.

HTML y CSS

Con el bosquejo a la mano empiezo a maquetar el sitio con mi editor VS Code. Que también usar este editor me ahorra mucho tiempo por sus atajos.

Sitio web responsivo

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

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: Flex Search

Información técnica

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

Recursos

Font Awesome License

Unsplash

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