Wolf: Sitio con CSS Grid y Flex

Con nombre Wolf sitio con CSS Grid y Flex, el proyecto número 18 del proyecto personal #100sitioswebchallenge.

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

Puedes visualizar el sitio en: CSS Grid Wolf

DESAFÍOS

He estado jugando con la propiedad de CSS:

background-attachment: fixed;

La cual hace posible que una imagen se pueda dividir en diferentes panales de grid, dependiendo de cómo los quiera manipular.

Estuve investigando un poco más de este efecto y veía como en el pasado algunos diseñadores tenían que cortar imagen por imagen para lograr este efecto.

El efecto de ver una sola imagen en secciones.

No mentiré que aún sigo experimentando con esta propiedad, me asombra cómo un a sola línea puede modificar y darle forma a tu proyecto.

PROCESO

Este proyecto en esta versión fue muy sencilla, por lo que no hice la maquetación en Figma. Brinqué directamente a VS Code.

Usé la tipografía Roboto de Google Fonts y el ícono del lobo desde IconFinder.

HTML y CSS

Empezando la maquetación con HTML, la imagen sólo se mostraría como una imagen de fondo. Pero al usar la propiedad CSS:

background-attachment: fixed;

Es cuando la verdadera magia sucede, porque inmediatamente la imagen del lobo se reacomoda a través de todas las ventas del grid.

Aquí puedes ver el sitio antes y después de usar la propiedad que menciono.

Así se ve el sitio final, con un poco de efectos al pasar el cursor.

Sitio web responsivo

Y aquí el sitio de manera responsiva para que se pueda observar en diferentes aparatos móviles.

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: CSS Grid Wolf

Información técnica

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

Recursos

Unsplash

Deja tus comentarios y sugerencias para el proyecto Wolf sitio con CSS Grid y Flex

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