{"action":"closed","issue":{"url":"https://api.github.com/repos/ATMartin/TIY-Homework/issues/1","labels_url":"https://api.github.com/repos/ATMartin/TIY-Homework/issues/1/labels{/name}","comments_url":"https://api.github.com/repos/ATMartin/TIY-Homework/issues/1/comments","events_url":"https://api.github.com/repos/ATMartin/TIY-Homework/issues/1/events","html_url":"https://github.com/ATMartin/TIY-Homework/issues/1","id":54083719,"number":1,"title":"01-12-2015","user":{"login":"jacobthemyth","id":1620230,"avatar_url":"https://avatars.githubusercontent.com/u/1620230?v=3","gravatar_id":"","url":"https://api.github.com/users/jacobthemyth","html_url":"https://github.com/jacobthemyth","followers_url":"https://api.github.com/users/jacobthemyth/followers","following_url":"https://api.github.com/users/jacobthemyth/following{/other_user}","gists_url":"https://api.github.com/users/jacobthemyth/gists{/gist_id}","starred_url":"https://api.github.com/users/jacobthemyth/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jacobthemyth/subscriptions","organizations_url":"https://api.github.com/users/jacobthemyth/orgs","repos_url":"https://api.github.com/users/jacobthemyth/repos","events_url":"https://api.github.com/users/jacobthemyth/events{/privacy}","received_events_url":"https://api.github.com/users/jacobthemyth/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-01-12T17:43:55Z","updated_at":"2015-01-12T18:13:49Z","closed_at":"2015-01-12T18:13:49Z","body":"# Surf and Paddle\n\n## Description\nCreate a pixel perfect recreation of the design and layout of the Surf and\nPaddle Photoshop comp (found in Additional Resources below).\n\n## Objectives\n\n### Learning Objectives\n\nAfter completing this assignment, you should...\n\n* Understand how to layout a two column web page\n* Know the difference between a float and inline-block layout\n\n### Performance Objectives\n\nAfter completing this assignment, you be able to effectively...\n\n## Details\n\n### Deliverables\n\n* A git repository containing, at least:\n  * `index.html`\n  * `main.css`\n\n### Requirements\n\n* Your site, when loaded in a browser that is exactly the same width as the\n  image, should line up with the picture to pixel precision. I will be\n  overlaying the image over your site to check if it's a perfect match.\n\n## Normal Mode\nUnder normal circumstances, you should also complete the following:\n\n- All anchor and image hover effects should use the `transition` property to\n  change from a blue overlay to transparent.\n- All of the elements should be centered on the page so that, if the browser is\n  larger than the comp, the site content will be centered rather than anchored\n  to the left. The header and footer should expand to fill the browser.\n\n## Hard Mode\nIf you're looking for an extra challenge:\n\n- Using media queries and keeping in mind best practices for CSS (like using\n  max-width to allow block elements to shrink), use the responsive Surf and\n  Paddle mockup (found in Additional Resources) to create a site that works on\n  desktop or mobile.\n\n## Notes\n\nYou can use any images that you would like, keeping in mind that they should be\nappropriate for your potential employers to see.\n\n## Additional Resources\n\n- [Surf and Paddle\n  comp](https://gist.github.com/jacobthemyth/b03824afbc437ad04b51/raw/176d97bb2dcb932ab8c3c9da1ffca7fefbf503a8/surf-and-paddle.png)\n- [Surf and Paddle\n  responsive](https://gist.github.com/jacobthemyth/b03824afbc437ad04b51/raw/b2d97273c82dae7c3ef4eb17da9383717173bd4b/surf-and-paddle-responsive.pdf)\n\n### Tools\n- You can use the screenshot tool (CMD + Shift + 4) to measure how many pixels\n  wide something is.\n- You can use [Sip.app](https://itunes.apple.com/us/app/sip/id507257563?mt=12) for picking colors.\n- You can use the [PerfectPixel Chrome extension](http://www.welldonecode.com/perfectpixel/) for checking pixel precision.\n\n### Fonts\nThese aren't *exactly* the same as the Photoshop comp, but you should be able to\nadjust the weight and size of the fonts to get it pretty close.\n\n- Header font: https://www.google.com/fonts#UsePlace:use/Collection:Oswald\n- Body font: https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans\n\n### Placeholder images\n- http://www.fillmurray.com/\n- http://placekitten.com/"}}