Sitio web estilo CSS grid llamado Studio, el sitio número once del reto personal #100sitioswebchallenge.
Puedes visualizar el sitio en: Studio
DESAFÍOS
Este sitio lo construí con CSS grid. Aunque aún me estoy acostumbrando a este estilo de visualización del contenido aún me toma tiempo establecer las columnas y filas del grid. Pero una vez construido el sitio tiene más flexibilidad comparado con el estilo float de CSS.
Esta es la clase que usé para la formación del grid en la página de inicio.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
grid-gap: 1em;
justify-items: stretch;
align-items: stretch;
}
/* Row 1 */
.box1 {
grid-column: 1;
grid-row: 1/3;
}
.box2 {
grid-column: 2/4;
grid-row: 1/3;
}
.box3 {
grid-column: 4/4;
grid-row: 1/3;
}
PROCESO
Paleta de colores y estilos
Me decidí hacer un sitio más minimalista.
Paleta de colores: 4D4D4D C4C4C4 EDEDED F9F9F9
Tipografía: Montserrat de Google Fonts
Mockup (Bosquejo)
Como siempre la idea me inspiro en otros sitios web que puedo encontrar en wrapboostrap, para posteriormente trabajarlo en mi cuaderno y de ahí pasarlo a Figma.
HTML y CSS
Una vez que el bosquejo con figma está listo, paso todo el sitio a HTML asignando clases e identificadores, para posteriormente trabajar con CSS.
Sitio hecho solo con HTML
Sitio terminado con CSS grid
Sitio web responsivo
Por último uso querie media para que el sitio sea responsivo a diferentes aparatos móviles.
Publicación del sitio
Consulta el código del sitio en Github
Puedes visualizar el sitio en: Studio
Información técnica
- Figma
- Visual Studio Code
- HTML5 (Semántico)
- CSS (Grid)
- Sitio responsivo
- Github
- Netlify
Recursos
Unsplash
- Jonathan Kemper
- Harprit Bola
- Tomi Vadász
- Mike Marquez
- Michael Oxendine
- Content Pixie
- Inside Weather
- Manny Pantoja
- Jacalyn Beales
- Jean-Philippe Delberghe
Este es un sitio web estilo CSS grid llamado Studio. Deja tus comentarios y sugerencias.
