Magazine CSS Grid

Este es el sitio web llamado Magazine CSS Grid, el proyecto número quince del reto personal #100sitioswebchallenge.

Puedes visualizar el sitio en: Magazine Grid

DESAFÍOS

Este proyecto tiene en cada elemento dos títulos y una imagen lo que hace sus alturas irregulares.

En el siguiente fragmento de CSS puedes observar cómo cada artículo en la sección de inicio está representado por una caja, enumerado del 1 al 9. Y podrás ver que representa las medidas específicas de el grid para que tenga una cierta posición de manera vertical representado por la columna, y cierta posición de manera horizontal representado por la fila.

PROCESO

Paleta de colores y estilos

Paleta de colores: 000000 FFFFFF

Tipografía: Libre Baskerville, Muli

Íconos: Font Awesome

Mockup (Bosquejo)

El bosquejo lo hice con Figma, lo cual me ahorra mucho tiempo. Porque me permite establecer el sistema de estilos de manera automática, también me permite mover elementos de manera muy práctica.

También uso unsplash para las fotos, las cuales tienen su crédito al final de esta entrada.

HTML y CSS

Una vez que el bosquejo está listo es más sencillo basarnos en un diseño al lado que estar imaginando cómo puede ir quedando. Al menos para mi es más sencillo tener una guía para irla maquetando y convertirla en código.

Sitio web responsivo

Aquí puedes observar cómo se ve el sitio en aparatos móviles.

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: Magazine Grid

Información técnica

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

Recursos

Font Awesome License

Unsplash

Deja tus comentarios y sugerencias, este fue el sitio web Magazine CSS Grid.

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...