CSS Grid Panel

Este es un sitio estilo CSS Grid Panel, donde se simula un panel de seguimiento de salud. El sitio número 19 del proyecto #100sitioswebchallenge

Inspirado en el video de Brad Traversy CSS Grid Layout With Image Span y el estilo Multiple.

Puedes visualizar el sitio en: CSS Grid Panel

DESAFÍOS

Para lograr el efecto de que una imagen se vea separada por diferentes paneles es al usar la propiedad CSS.

background-attachment: fixed;

Y por cada uno de los cuadros que se ven en el sitio, unos están contenidos dentro de dos imágenes distintas

.bg1 {

  background: url('../img/bk1.jpg');

}




.bg2 {

  background: url('../img/bk2.jpg');

  color: #333;

}

PROCESO

En este proyecto brinqué directamente a HTML y CSS para experimentar con la propiedad de CSS. Uno puede ver cómo con una sola línea, el proyecto puede cambiar completamente de manera visual.

Usé la tipografía Roboto y Font Awesome para los íconos.

HTML y CSS

Aquí se puede observar cómo las dos imágenes de fondo puedes visualizarse completamente diferentes sin el uso y con el uso de la propiedad CSS

background-attachment: fixed;

Esta propiedad es la que cambia completamente la vista de la imagen que se muestra a continuación a la vista del sitio final mostrado en el video.

Sitio web responsivo

Esta es una vista de cómo el sitio se mostraría en modelos de celular y/o tablet.

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: CSS Grid Panel

Información técnica

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

Recursos

Font Awesome License

https://fontawesome.com/license/free

Unsplash

Deja tus comentarios y sugerencias acerca del sitio CSS Grid Panel.

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado