Assignment 1_3: Responsive Layouts with Tex, Lines and 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 information/sections
- Visually group information/sections
Restrictions and Rules
Same as in previous assignment (no color, just black, only 1 font (Proxima Nova). Shapes here are technically speaking background-color declarations in CSS. Styles will be applied to block elements such as divs, h1, h2, p etc. The backgrounds are "naturally" rectangular or square, no other kind of shape should be used at this point.
Since we'll be using black backgrounds you have the option to use white type on black.
CSS
Write the CSS rules witch background-color declarations. If necessary, add div elements to the HTML for additional boxes.
Background-color example:
CSS code:
h1 {<br>
background-color: black;<br>
}<br>
Task
Make 3 responsive compositions using text, lines and shape/background. You can either pick an existing composition and add shapes or create a new composition. Make sure you start new HTML and CSS files for each of the composition (in a new folder!). Just like in the previous assignment make Illustrator/PDF version of the layouts as well for reference (use the 3-size template again).
Upload PDFs and coded files to box.