P4 CSS Layout Simple Marketing Page

Learning Competencies

• Edit presentation layer to achieve a new layout
• Change basic CSS appearance: colors, widths, padding, margin
• Communicate state changes via CSS (ex: error state vs correct state)

Summary

Demonstrate use of box model, positioning and other css styles to format the layout of a page.

Releases

Release 0: Set your targets

For this challenge, your task is to modify the main.css file to style the page so that the [end result][video] looks like the video below.

Video

<iframe src="http://player.vimeo.com/video/69663952" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

CSS styling demo from Dev Bootcamp on Vimeo.

Image

Release 1: Implement to a visual display

• Write clean, concise CSS code.
• Do NOT change the markup in index.html to achieve the result.

You know you're done when:

• Your page looks exactly like the video/image
• You can easily explain each CSS rule that you used
• Your CSS does not contain extra rules (ones that are overridden by other code).

Useful Notes / Tidbits

• For your yellow color, you can use the HTML color code #ff0.
• The two "grey" colors used are #333 and #555.

Optimize Your Learning

None

Resources

None