Responsive - TopCoder - CloudSpokes UI Prototype Contest - HTML5

Welcome to TopCoder - CloudSpokes - HTML5 Prototype Contest.  We are building a NEW website from scratch and we now need you to convert the provided storyboard  designs to UI Prototype using HTML5 and CSS3.

We want to leverage HTML5/CSS3 but we still need to support some older browsers. Feel free to use the HTML5 Shiv fix for Internet Explorer.

On next phase, we will convert this UI prototype to a wordpress theme.

General Rules :

• Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly. Make sure you test on tablets and mobile phones too.
• Ensure you submission clear of HTML and CSS Validation error and warning.
• Watch word typos in every place including the source code. Make sure they have correct meaning
• Layout (background) should be fluid, depend on browser width
• Please provide animated mouse hover  (with transition effect) for each clickable icons/buttons
• Please provide animated Glowing link for clickable text
• Please use Mobile view is for portrait orientation of tablet device (include iPad) ,and it should be fluid based on browser width
• Switching the orientation (from landscape to portrait or vice versa) will also switch layout to correct layout directly, without reloading page.  Example : http://www.cloudspokes.com/, http://bradfrostweb.com/demo/mobile-first/ and http://www.studiopress.com/responsive/
• Please provide dummy JSON files (use .json as extension) as source, but your JSON structure should follow http://dev.topcoder.com/ . we’ll replace them  later
• Please follow existing  (community.topcoder.com/tc) naming class for handle color, ie.”coderTextYellow” for yellow handle color
   

1. Home Page 
   storyboard : [ 01_home.png.png] (use the sections colors in the PSD source)
   see [Wireframe-outlines.png] for the sections

• Please provide navigation for guest and logged in member
• Please provide animated dropdown menus for top navigations [03_home_Log In View.png, 04_home_My Account.png]
• Provide some dummy items for banner carousel and banner will be autoplay, and clicking the buttons will also through users to related content
• Carousel content should support “only text” ,” image+text”,or “image only”. So please provide various types. Reviewers will try to add the carousel items
• Content 1 and Content 2 should support two or three columns. Reviewers will simulate the changes
• Icons on Content 2 should be as img instead of background, because they are not static. we'll change them periodically

2. Home Page Mobile view
   storyboard : [ 08_Home_Mobile.png]

• Banner should be autoplay should support swipe input
• Resizing browser to mobile browser size will also resizing images, see how http://www.cloudspokes.com/ works

3. Challenges Page
   Storyboard : [ 05_Challenges_List.png & 06_Challenges_Grid.png]

• Active Contests Data should be loaded via AJAX
• Contest titles should be clickable to dead link (#)
• Please provide an  animated ‘loading’ image while content is being loaded
• Switching layout from grid to list view will be handled by JS, instead of reload page
• Pagination will be handled by JS (AJAX), so please provide a lot of dummy content 
   

4. Challenge Page Mobile view
   Storyboard : [ 09_Challenges_Mobile.png]
    
5. Community Page
   Storyboard : [ 07_Community.png]

• Top 10 filter will be : Algorithm, Algorithm School,Country,etc. Please follow existing interaction and filter on http://community.topcoder.com/tc.   Altering to another filter will be handled by JS instead of reload page
• handle names should beclickable to dead link (#). Please provide various handle color
• Featured Challenge, News, and Community Highlights sections should have simple carousel WITHOUT autoplay.

6. Community Page Mobile view
   storyboard : [ 10_Community_Mobile.png]

• Featured Challenge, News, and Community Highlights sections should have simple carousel WITHOUT autoplay.
• Carousels should NOT be autoplay and they should support touchwipe  

Specific HTML/CSS/JavaScript Requirements

• You MUST use HTML5 and CSS/CSS3
• Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
• No inline CSS styles - all styles must be placed in an external stylesheet.
• Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent).
• Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
• Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
• Current website code has some inline CSS, please move them to external CSS file.

JavaScript Libraries/Plugins

JavaScript libraries already used in the current site can be used in this contest too. New ones need to be proved by client first.

Browser Requirements

• IE 7+
• FF 7+
• Safari 5+
• Chrome Latest
• Chrome / Safari on tablets / phones

Submission Guidelines

Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review Tool.