TC UX Refresh - New Header and Footer Prototype

Challenge Introduction:

In this challenge, we want to build a new unique responsive navigation header and footer for multiple topcoder sites. The storyboard design, design specification and design assets are provided as input for you to implement the prototype. See the following section for requirement details.

Challenge Requirements:

General Requirements

1. The prototype should be built using HTML5, CSS3 and plain javascript (no other framework should be used). For HTML5, please use JADE template engine (http://jade-lang.com/); for CSS, please use SCSS. 
   • ������Please see https://github.com/appirio-tech/topcoder-app/blob/dev/README.md on the code convention and how to structure your submission. As this prototype will be integrated into the topcoder-app (www.topcoder.com)
2. For responsiveness, make the default CSS for mobile and use @media queries for anything larger.
3. The navigation header and footer should be fluid and adapt to all widths.
4. The top bar should take 100% of the viewport width.
5. Main navigation elements should always be centered.
6. The logo should be anchored to the left, aligned with the main content.
7. The join/login/logout/user modules should be anchored to the right, aligned with the main content.
8. Alignment should be completely controllable by simple CSS changes (no JS calculated alignments).
9. Prefer use of .svg images to .png to allow images to naturally scale to different platform sizes rather than media queries for specific platforms.
10. With the exception of navigation to links/hrefs, behavior should not cause a page refresh (login, logout, etc should use AJAX calls to change state)

Detailed Requriements

1. Follow the specs in Specs folder of the provided input.
2. Use the assets (svg and png images) in the Assets folder of the provided input.
3. We only provide design screenshot of Hover effect of LEARN in navigation (Desktop HD Menu Hover with Icons.png), COMPETE and COMMUNITY should use the same hover effect, and for COMPETE and COMMUNITY, please provide placeholders like in Desktop HD Menu Hover.png.
4. Please note that the footer is also in the scope.
5. For type ahead feature in the search box, you can use javascript to simulate the function.
6. The mobile view is described in the screenshots prefix with "Mobile"
7. If there is any question regarding to user flow, please bring up questions in the challenge forum asap.

Browser Requirements:

• IE9+

• Latest Google Chrome (Windows & Mac OS)

• Latest Safari (Windows & Mac OS)

• Latest Firefox (Windows & Mac OS)

• All Mobile & Tablet browsers

Challenge Input:

Download in the challenge forum.

Final Submission Guidelines

• The whole implemented prototype packaged.