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

Landing Page para Negocio

Landing Page para Negocio

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 Esta es una landing page para el lanzamiento de un nuevo producto o servicio, construído con HTML y...

Una Landing Page Sencilla

Una Landing Page Sencilla

https://www.youtube.com/watch?v=AotDOfaKss0 Tabla de Contenidos Introducción Desafíos Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información Técnica Recursos Introducción Esta es una landing page para el lanzamiento de un...

Página Estilo One Page

Página Estilo One Page

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 es una página web estilo One Page, la cuál está maquetada con HTML y estilizada con CSS, este...