ACME Corp

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. <main>) set margin-left and margin-right to auto and set a width. You can set the width to a percentage too. Try also playing with max-width.
• 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 <header>, <main>, and <footer> elements to organize your content. Use the right tags and avoid using classes or IDs.
• Use a <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, float: left or float: right respectively.