Skip to content

Create a grid-based, responsive layout using the Gridifier tool.

Notifications You must be signed in to change notification settings

ltw-webdev-2/grid-layout

Repository files navigation

summary time deliverables
Create a grid-based, responsive layout using the Gridifier tool.
1 hour
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.


Hand in

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

About

Create a grid-based, responsive layout using the Gridifier tool.

Resources

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published