Landing Page de tres columnas con Grid

Esta es una landing page de tres columnas con Grid. El sitio número 30 parte del reto personal #100sitioswebchallenge

Puedes visualizar el sitio en: Remote Work

DESAFÍOS

Se me hizo interesante hacer un sitio que rompa un poco más las convenciones “normales” de un sitio sencillo web. Esta landing page tiene tres secciones y lo maqueté de tal manera que la cabecera realmente está en la primera columna del lado izquierdo, y el cuerpo en el otro extremo derecho.

PROCESO

Paleta de colores y estilos

Paleta de colores: FFA735 000000 FFFFFF colours.cafe

Tipografía: Poppins de Google Fonts

Mockup (Bosquejo)

El bosquejo lo hago en Figma, sin duda muy fácil de usar y una vez que lo dominas te ahorra mucho tiempo.

HTML y CSS

Una vez terminado el bosquejo paso a maquetar el sitio en HTML y CSS.

Sitio web responsivo

Y por último dentro de un querie hago que el sitio pueda ser responsivo a otras pantallas móviles.

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: Remote Work

Información técnica

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

Recursos

Unsplash

 

Esta es una landing page de tres columnas con Grid.  Deja tus comentarios y dudas.

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