96 hrs Reponsive TopCoder-CloudSpokes My TopCoder Part 1 - UI Prototype

Welcome to 96 hrs Responsive TopCoder - CloudSpokes – My TopCoder Pages (part 1) UI Prototype Contest. 
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 this  phase, we will build an UI Prototype from provided storyboard

General Rules :

• Update Provided Prototype
• Storyboard and baseline UI Prototype is attached in forum
• 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.
• Create new CSS and JS files, don't edit any existing files (ie:style-mytc-account.css)
• 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, 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/ and provided Prototype
• Please follow existing  (community.topcoder.com/tc) naming class for handle color, ie.”coderTextYellow” for yellow handle color
• Scope of this contest is only My TopCoder and My Account pages include their mobile view
   

My TopCoder Landing Page

• Build as designed
• Data of "Challenge Open to Me" shouild be loaded via AJAX include pagination, see how existing view-challenges.html works
• Change Sofware to Develop, and Algorithm to Data
• Scrollbar of "Available Prize, Contest Submitted, Checkpoint feedback, and Unread feedback" overlay widgets should match to storyboard. please provide 5 items for each overlay widgets
• Please reuse functionality of community.html for News, Events, and Community, Top 10 widgets
• Latest Survey should work fine, clicking on Vote buttons will send data via AJAX to your own dummy JSON file. please also send vote_id or something like that 

 

My Account Pages

• Build as designed 
• All *MyAccount_*.png screens (from name_contact to social_connection) should be implemented, include mobile view
• Please add "Social Connections Managemen"  menu to dropdown item since mobile view storyboard does not have it, see [09 MyAccount Mobile_Name and Contact_Submenu.png]  

 

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