JiffyBees / hot-grid-dle

Create a small layout using grids, hiding and showing units & position.

summary	time	deliverables
Create a small layout using grids, hiding and showing units & position.	1 hour	1 HTML file, 2 CSS files, images

Hot grid-dle

Overview

• Fork this repository.
• Match the layout found in the screenshots—notice how one of the grid units isn’t always visible.
• You’ll need a little bit of CSS inside your main.css to make the caption look right.
• Text can be found inside the content.txt file.
• Run it through Markbot and make sure it passes all the checks.

---

Details

• Typefaces: Roboto Slab
• Line-height: 1.3
• Measurements: 1rem, .5rem
• Caption max-width: 15em
• Expected class names: .img-flex
• Gridifier settings: defaults

---

Goal

Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.

• Final screenshots in the “screenshots” folder.
• Watch this video to see how it interacts.

---

Hand in

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