72 HRS - TC - iOS Member Program Challenge Listing Prototype

Challenge Introduction:

In this challenge, we want to build the HTML5 responvie prototype for the TopCoder iOS Program challenge list pages. The storyboard files (PSD format) and storyboard screenshots are provided as the input of this challenge. 

Please note that instead of writing pure HTML5 and CSS, you need to use Jade (i.e. a template language http://jade-lang.com/) and Sass (i.e. the CSS preprocessing script) in the challenge. We will provide the repo which we are working on as input, the repo contains the pages we already built with Jade, Sass and Coffee Script for the previous prototype challenge 48 HRS - TC - iOS Member Program Prototype part 1 and 48 HRS - TC - iOS Member Program Prototype part 2

Challenge Requirements:

• The prototype should be built using HTML5 with latest Bootstrap 3.3.4 (http://getbootstrap.com/) and AgularJS UI Bootstrap (http://angular-ui.github.io/bootstrap/)
• Use the bootstrap responsive layout for all the pages to make sure it displays and functions well under desktop, tablet and mobile devices.
• The prototype should NOT depend on jquery or Bootstrap JS. Instead, for any bootstrap components you wanna use, please use AgularJS UI Bootstrap (http://angular-ui.github.io/bootstrap/)
• Please use Jade instead of writing pure HTML5
• Please use Sass instead of pure CSS
• Please use Coffee Script instead of plain javascript. Jquery should not be used.
• Note that there are existing pages in folder app/landing, app/learn, app/login and app/reigster which you can refer to, it's a good start if you don't know how to use Jade, Sass and Coffee Script.
• The new jade files and coffee script should be put app/challenges, the repo already put placeholder files there with which you can directly start and put contents into.
• Below is the detail requirements on each page:

1) Challenge-Listing.jpg & Challenge-Listing-Non-Logged.jpg 

• Note that carousel should be implemented.
• Registrants and Submissions should be links.
• The grid view should be implemented as the landing pages, see folder app/landing. When viewing with the small devices, if the list view which contains too much infomration on one row does not fit, please switch to grid view automatically.
• The Non-Logged V.S. logged, the different is only the top navigation bar.
• Please note that the footer is different from the existing pages, please follow the given storyboard (i.e. use the new design)

2) Peer-Challenge-Listing.jpg & Peer-Challenge-Listing-Logged-IN.jpg

• Registrants and Submissions should be links.
• The grid view should be implemented as the landing pages, see folder app/landing. When viewing with the small devices, if the list view which contains too much infomration on one row does not fit, please switch to grid view automatically.
• The Non-Logged V.S. logged, the different is only the top navigation bar
• Please note that the footer is different from the existing pages, please follow the given storyboard (i.e. use the new design)

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:

Storyboard and Screenshots: https://drive.google.com/open?id=0B26oNqO7pFMFeDkzNnZTR1RiS2s&authuser=0

The prototype code base: avaiable in the challenge forum.

Final Submission Guidelines

• The whole repo with new files integrated in