Repost - Responsive TopCoder-CloudSpokes Content Pages UI Prototype

Welcome to 72hrs 96hrs TopCoder - CloudSpokes – Content Pages 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 that will be used as Wordpress Theme on next phase.

General Rules :

• Update Provided Prototype
• 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, 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
• About Us, Contact Us is out of Scope, we're building them via BugR in parallel
   

Baseline Layout
Since header and footer will be same/similar for previous, this and upcoming prototype, please create new base.css file to handle header, footer include their mobile view.
You can extract it from provided prototype. Keep in your mind we will call this base.css for upcoming prototype / template.
 

General Page Template (include mobile view) 
storyboard : [{D} 01 ~ Overview (S1).png, {M} 01 ~ Overview (S1).png]

• Build as designed

 

Another Single page Template (include mobile view)
Storyboard : [{D} 05 ~ Resources (S1).png , {M} 05 ~ Resources (S1).png]
Reference : http://www.cloudspokes.com/resources

• Build as designed

Case Studies Front Page template (include mobile view)
Storyboard : [{D} 02 ~ Case Studies (S0).png, {D} 03A ~ Case Studies - Details (S0).png,  {M} 02 ~ Case Studies (S0).png, {M} 03A ~ Case Studies - Details (S0).png]
This site will be similar to http://www.topcoder.com/case-studies

• Please provide fancy mouse hover state (not provided in storyboard)
• Clicking the logo will display introduction box with animation (transition). introduction box will shift down all the icon below

Case Studies Single Page (include mobile view)
Storyboard : [{D} 03B ~ Case Studies - More Details (S0).png, {M} 03B ~ Case Studies - More Details (S0).png]

• Sidebar Content is relative, sometime we will add hyperlink image/banner there, OR maybe add two youtube players OR maybe just add video thumbnai OR another add HTML content.
• logo is as image instead of background
• Video Player is only an illustration in order to show you that admin can embed video youtube/vimeo there, so player should NOT match to storyboard.

Press Release (include mobile view)
Storyboard : {D} 04 ~ Press Release (S0).png and {M} 04 ~ Press Release (S0).png]

Stories List Page (include mobile view)
Storyboard : [{D} 06 ~ Stories List (S0).png, {M} 06 ~ Story List (S0).png]
Reference : http://www.topcoder.com/archive/blog/stories-blog/

 

Story Detail Page (include mobile view)
Storyboard : [{D} 07 ~ Story (S2).png, {M} 07 ~ Story (S2).png]

• Clicking “Show More” will load remaining 7 items.

 

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.