Skip to content

Latest commit

 

History

History

flexbox-layout

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 

Flexbox Layout

Modificando solamente css/style.css, hacer que el resultado del HTML se vea similar al ejemplo (movil, desktop) proporcionado.

Notas

  • No se pueden hacer modificaciones al HTML.
  • Colores de fondo:
    • Header: lightgoldenrodyellow
    • Articulos: lightcoral
    • Barra lateral: skyblue
    • Footer: lightgreen
  • El ancho del contenedor principal debe tener un ancho maximo de 1200px y centrado en toda la página.
  • Pueden escoger el breakpoint de movil a desktop (en las imagenes ejemplo es de min-width: 600px)

Bonus

  • Usar cualquier fuente de Google (https://fonts.google.com/) para todos los textos
    • ¿Tal vez una fuenta para headings y otra para el resto del texto?
  • Hacer que la barra lateral tenga borde redondeado.
  • Al pasar el mouse por encima de ellos, los enlaces del menu lateral deben tener un fondo negro y texto blanco.
  • Usar un color de fondo diferente para cada articulo impar (1, 3, 5, etc).

CodeSandbox: https://codesandbox.io/s/02-flexbox-layout-evyx8