Foto Blog CSS Grid

Este es un sitio web estilo Foto Blog CSS grid. El proyecto número 16 del reto personal #100sitioswebchallenge.

Puedes visualizar el sitio en: Foto Blog

DESAFÍOS

A diferencia de los sitios anteriores hecho con CSS grid, este proyecto se centra en tener la misma altura en cada una de sus filas, en lugar de las columnas.

En este caso usé una clase wrapper para cada fila, para así darle diferentes porcentajes al ancho de cada columna. Como lo pueden ver a continuación.

.wrapper-1 {

  display: grid;

  grid-template-columns: 17% 30% 20% 27%;

  grid-gap: 1em;

  margin-top: 20px;

}

En total fueron 4 clases llamadas wrapper, con la diferencia que las dimensiones de su gri-template-columns es distinta para así visualizar las fotografías en el blog de ancho distinto.

PROCESO

Paleta de colores y estilos

Paleta de colores: FFFFFF 000000

Tipografía: Montserrat de Google Fonts

Íconos: Font Awesome

Mockup (Bosquejo)

Como siempre uso Figma para el primer bosquejo del sitio, para después darle más detalles y tenerlo listo para iniciar su maquetación en HTML y CSS.

HTML y CSS

Usando Visual Studio Code empiezo a maquetar el sitio, siempre teniendo el bosquejo hecho anteriormente a un lado.

Sitio web responsivo

Si arrastras el ancho del sitio puedes ver cómo se visualizaría.

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: Foto Blog

Información técnica

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

Recursos

Font Awesome License

Unsplash

Este es el sitio web Foto Blog CSS Grid. Deja tus comentarios y sugerencias

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado

Landing Page para Negocio

Landing Page para Negocio

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 Esta es una landing page para el lanzamiento de un nuevo producto o servicio, construído con HTML y...

Una Landing Page Sencilla

Una Landing Page Sencilla

https://www.youtube.com/watch?v=AotDOfaKss0 Tabla de Contenidos Introducción Desafíos Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información Técnica Recursos Introducción Esta es una landing page para el lanzamiento de un...

Página Estilo One Page

Página Estilo One Page

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 una página web estilo One Page, la cuál está maquetada con HTML y estilizada con CSS, este...