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
Unsplash
Este es el sitio web Foto Blog CSS Grid. Deja tus comentarios y sugerencias
