Assignment 1_3: Responsive Layouts with Tex, Lines and Shape
Due for review (beginning of class) Thurday, Oct 1 (design) and Thursday, Oct 8 (coding).
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 information/sections
- Visually group information/sections
Restrictions and Rules
Same as in previous assignment (no color, just black and white, 1 font (Proxima Nova). 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. The background-color declarations can be applied to elements such as h1, h3, h3, p, span, div etc.
CSS
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):
Task
As a start, pick one composition from 1_2 and create three responsive compositions using text, lines and shape/background. It's fine to make adjustments to the existing compositions (take elements such as lines out or add new ones). Start with the Illustrator designs and code afterwards. I'd like to collect both, Illustrator/PDF and coded files on Box.
Make sure you start a new HTML and CSS file for the composition (in a new folder!). Only one of the layouts needs to be coded.
Upload/update you site folder containing PDFs and coded files in Box.
