/responsive-photo-gallery

Combine together grids, modular type & CSS components to make a responsive photo gallery.

Primary LanguageCSS

summary time deliverables
Combine together grids, modular type & CSS components to make a responsive photo gallery.
1 hour
1 HTML file, 4 CSS files, images

Responsive photo gallery

Overview

  • Fork this repository.
  • Use modules.css, grid.css and type.css to create the layout matching the screenshots.
  • You only have to write generate the 3 CSS files, write the HTML, and add the appropriate classes.
  • The index.html file has some starter code in it.
  • DO NOT change the main.css file—it’s completely done.
  • Run it through Markbot and make sure it passes all the checks.

Details

  • Gridifier settings: defaults
  • Typografier settings: defaults
  • Modulifier settings: select all

Goal

Visually match the images in the “screenshots” folder.

  • Final screenshots in the “screenshots” folder.

Hand in

Drop this folder into your Markbot application. Make sure to fix all the errors. And submit to Canvas using Markbot.