Surf and Paddle

Description

Create a pixel perfect recreation of the design and layout of the Surf and Paddle Photoshop comp (found in Additional Resources below).

After completing this assignment, you should...

Understand how to layout a two column web page
Know the difference between a float and inline-block layout
Performance Objectives

After completing this assignment, you be able to effectively...

A git repository containing, at least:
- index.html
- main.css
  Requirements
Your site, when loaded in a browser that is exactly the same width as the image, should line up with the picture to pixel precision. I will be overlaying the image over your site to check if it's a perfect match.
Normal Mode

Under normal circumstances, you should also complete the following:

All anchor and image hover effects should use the transition property to change from a blue overlay to transparent.
All of the elements should be centered on the page so that, if the browser is larger than the comp, the site content will be centered rather than anchored to the left. The header and footer should expand to fill the browser.
Hard Mode

If you're looking for an extra challenge:

Using media queries and keeping in mind best practices for CSS (like using max-width to allow block elements to shrink), use the responsive Surf and Paddle mockup (found in Additional Resources) to create a site that works on desktop or mobile.
Notes

You can use any images that you would like, keeping in mind that they should be appropriate for your potential employers to see.

Surf and Paddle comp
Surf and Paddle responsive
Tools
You can use the screenshot tool (CMD + Shift + 4) to measure how many pixels wide something is.
You can use Sip.app for picking colors.
You can use the PerfectPixel Chrome extension for checking pixel precision.
Fonts

These aren't exactly the same as the Photoshop comp, but you should be able to adjust the weight and size of the fonts to get it pretty close.