Layout Exercise #6

This exercise uses the following: classes, positioned background image, flexbox.

In class, create the page shown below in HTML and and apply CSS styles as appropriate. When you are done, publish it to the web server and show it to me online for credit.

See below to download several files you will need to complete the exercise.

Images (Right click over each and save to your /images folder)

Image #1

Image #2

Image #3

Image #4

Image #5

Image #6

Background Image

Step 3: Mark up content

Note: I am giving you partial HTML and CSS files below.

Right-click to download ex6.html to your /exercises folder and ex6-style.css to your exercises/css folder.

Remember that when you open Brackets, your exercises folder should be the local root folder.

Please note the following:

1. All text is provided to you in sally.txt. Right-click to download into /nonweb.
2. Size your text in ems.
3. All text is Google font Roboto. Visit the Roboto page on Google Fonts for appropriate code.
4. Use only classes. No ids.
5. Set images to display: block
6. .wrapper is 800px wide with a solid 15px border #000 top and bottom only.
7. Navigation is a list.
8. header contains div with class logos and div for the mug image (class mug)
9. div.logos contains both logo images. Apply a class to each image to style it, eg. logo-top and .logo-bottom. Set display: flex; in header to set div.logos next to div.mug, and set appropriate widths.
10. Top logo image should have enough top and bottom padding to make everything line up vertically.
11. Bottom logo image should have the correct background color and enough left padding to move it into place.
12. .content contains nav, main and aside. Set display: flex in .content.
13. Guitar is background of .content.
14. Create appropriate alt text for the images.
15. Create an appropriate document title.