Scannable Text
Your task is to fix this text, so that it is:
- cut by half
- formatted for the screen
- easy to scan
- has headers and subheaders
- has lists.
You can edit the text down as much as you'd like. Keep in mind all the points we talked about in the lecture.
Before you go on to the next exercise, which is adding web fonts to the type, you will want to put the content in readable column width.
How to set in a readable column width
There's already a <div> tag around the content, with an id="box", so you just need to make the CSS. In the <head> part of the document, look for the <style></style> tag.
Inside that style tag, add:
#box {width: 650px;margin: 0 auto;}
You may want to play with that ID. What if you add a border? How about adding some padding? Maybe change from a pixel-based design to a percentage-based one? What problems does that cause?
You may also want to play with background images and colors. Now that you have the box ID, you have, essentially, two layers to play with -- the body for the bottom picture and the box for the next layer up.
Once you're done making the text scannable, you're ready to on to the next exercise, which is adding typography.