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
- Sebastian Unrau
- https://unsplash.com/@sebastian_unrau
- Michel Paz
- https://unsplash.com/@michelpaz
Deja tus comentarios y sugerencias acerca del sitio CSS Grid Panel.
