The designers of ACME Anvil Corporation have just come up with a fresh new look for the company website. It's up to you to implement their designs. Their designers know a little bit about the web, so they've prepared for you a few resources to help you get started:
- A screenshot of the finished design (see below, click for full resolution)
- A ZIP file including the logo image and the textured background image
A list of colors to use throughout the design:
- Header background color: #c4c4c4
- Button background color: #2A4CB2
- The font-family: "Lucida Grande"
- Layout commentary: The header should run completely from the left edge of the browser window to the right edge. The content, including the footer, should be centered horizontally and consume approximately 80% of the width of the browser (not to exceed a width of 800px).
Here are some tips:
- It is entirely possible to implement this design without classes or IDs. You're welcome to use classes or IDs but it's probably unnecessary.
Remember that to center a block container (e.g.
autoand set a
width. You can set the width to a percentage too. Try also playing with
- Use the "Digital Color Meter" under Utilities on your Mac to figure match the colors. When you have your mouse over the color you want, use cmd + shift + C to copy the color to your clipboard.
- The buttons and links don't have to work.
Take advantage the
<footer>elements to organize your content. Use the right tags and avoid using classes or IDs.
<button>element for the "Sign up" button. That will let you style it like a button, differently than the other links in the header.
When it comes to getting the logo and nav side by side, ask yourself: “which element should determine the height of the header?” It shouldn’t matter too much but try both and see what happens. Once you decide,