Project 2_3: Responsive Grid Layout: Adding Shape

We'll be adding shapes/background color to the compositions. Shapes shouldn't be simply used for the purpose of decoration.

Shapes/backgrounds should rather be used to:

• Enforce/enhance visual hierarchy (combined with headlines, for example)
• Separate or highlight information/sections
• Visually group information/sections

One of your variations will be used for part 2_4. Please see here for examples of shape / line / contrast.

**2_3 — Due Thursday September 26 — 11a**

Below is 2_3 — focus on text and lines only:

Restrictions and Rules:

Same as in previous assignment:

• Variations of black can be used as a whole background color! Do not use gradients.
• Only 1 font (Inter)
• Shapes here are technically speaking background-color declarations in CSS. The backgrounds are "naturally" rectangular or square
• No other kind of shape should be used at this point (rounded corners etc)!
• The background-color declarations can be applied to elements such as h1, h3, h3, p, span, div etc.

CSS Styles for 2_3:

Write the CSS rules witch background-color declarations. If necessary, add div elements to the HTML for additional spacing options.

Background-color example (each of the value examples result in a black color, there are just different ways to define a color in CSS):

See the Pen Untitled by Oliver Roeger (@uic-des) on CodePen.

Task:

As a start pick one of the previous compositions. Then create at least three responsive compositions with added lines. Before you start coding, make sure you start new HTML and CSS files for each of the composition. Avoid overwriting previous assignments or variations. Keep each result of each phase.

Tips:

• Don’t mix up too many different sizes and weights
• Avoid centering elements
• Combine different proportions
• Create contrast (big/small, thin/bold, tight/open, narrow/wide..)
• Group chunks of information and look for relations between those groups (sizes, spaces, alignments)