Sitio web estilo CSS Grid – Studio

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

Font Awesome License

Unsplash

Este es un sitio web estilo CSS grid llamado Studio. 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...