Sitio One Page con CSS Flex

Este es un Sitio One Page con CSS Flex. Parte del proyecto personal #100sitioswebchallenge.

Puedes visualizar el sitio en: Ghibli

DESAFÍOS

Soy fan de Estudio Ghibli así que no podia no hacer un sitio sencillo como este. Me gusta que Flex es “flexible” en el concepto de lidear con bloques de información en una sola fila, y con un simple justify-content: space-around puedo estilizar los espacios entre cada contenido.

Este sitio es muy sencillo me basé en el sitio  Studio Ghibli AU, quería hacer mi propia mini versión con un poco de toque de Netflix.

PROCESO

Paleta de colores y estilos

Paleta de colores: 027FBF 000000 FFFFFF

Tipografía: Montserrat de Google Fonts

Mockup (Bosquejo)

El bosquejo está hecho en Figma lo que me da mucha flexibilidad en tiempo y uso de herramientas para hacer conceptualizar la idea de manera visual y que me sirva de guía.

HTML y CSS

Una vez el bosquejo está listo lo empiezo a trabajar con HTML para posteriormente terminar SASS para los estilos.

Sitio web responsivo

Para terminar es así como se puede ver en móviles.

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: Ghibli

Información técnica

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

Este es un Sitio One Page con CSS Flex, 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...