Landing Page con Estilo Grid – Green

Esta es una landing page sencilla maquetada con HTML con estilos CSS Grid. El proyecto número 22 del reto personal #100sitioswebchallenge

Puedes visualizar el sitio en: Grid Landing Green

DESAFÍOS

Esta landing page está basado en el template de Phantom, y luego quise agregarle un poco los fonts de Font Awesome. Vi esta imagen en Font Awesome y quise recrear um poco el estilo jugando um poco con CSS grid.

PROCESO

Paleta de colores y estilos

Paleta de colores: DA8D9B 8BC0E8 75ABA2 BF78A0 B39ACD 585858

Tipografía:

Source Sans Pro de Google Fonts

Mockup (Bosquejo)

Este es el bosquejo maquetado com Figma

HTML y CSS

Una vez que el bosquejo está listo, entonces empiezo por la maquetación. Aquí se puede ver el proceso, el cual es primero con HTML y después trabajo con los estilos CSS con el uso de Grid.

Sitio web responsivo

Y por último el sitio queda de manera responsiva

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: Grid Landing Green

Información técnica

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

Recursos

Resource

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