summary: 'Create a grid-based, responsive layout using the Gridifier tool.' time: '1 hour' deliverables: '1 HTML file, 1 CSS file, images'

Grid layout

Overview

• Fork this repository.
• Use Gridifier to create the responsive, grid-based layout.
• Your main.css file should only have the responsive website defaults, and Open Sans in html—nothing else. Don’t change font-size, margin, padding—anything. Except removing the margin from body.
• Text can be found inside the content.txt file.
• Run it through Markbot and make sure it passes all the checks.

Details

• Typefaces: Open Sans (include “regular 400”, “regular 400 italic” & “bold 700” from Google Fonts)
• Text sizes: unchanged
• Margins & paddings: unchanged, except for the body
• Expected class names: .img-flex, .grid, .unit, grid sizing classes
• 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 to Canvas using Markbot.