Mini Proyecto con Grid – Mexico City

Este es un mini proyecto donde seguimos con la práctica de CSS Grid, el proyecto número 26 parte del reto personal #100sitioswebchallenge

Puedes visualizar el sitio en: Grid Mexico City

DESAFÍOS

Como pueden darse en la creación del bosquejo la idea de este proyecto era sólo crear la galería de las imágenes con los estilos grid, pero después quise agregarle una portada jugando un poco con el ancho para posicionar el texto a la mitad de la portada y la otra mitad con la imagen de la chica.

PROCESO

Paleta de colores y estilos

Paleta de colores: DF293F FFFFFF

Tipografía:

Montserrat de Google Fonts

Mockup (Bosquejo)

Este es el bosquejo inicial del proyecto.

HTML y CSS

Este es el proceso de la creación del sitio, donde primero creo la maquetación del sitio con HTML y posteriormente trabajo con los estilos.

Sitio web responsivo

Por último esta es la vista del sitio de manera responsiva.

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: Grid Mexico City

Información técnica

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

Recursos

Unsplash

Freepik

Flat pattern vector created by freepik – www.freepik.com

Pexels

Deja tus comentarios y sugerencias.

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado

Sitio web One Page con navegación fija

Sitio web One Page con navegación fija

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 es un sitio web estilo One Page maquetado con HTML y estilizado con CSS con una navegación fija....