Welcome to CSFV Dynamakr Landing Page UI Prototype UI Prototype Challenge!

The goal of this contest is to convert the provided Storyboard page into clickable HTML/CSS/Javascript UI prototype.

Challenge Requirements

You will implement the following in this challenge :

• Screenshots :

  • 00-Dynamakr-Home.jpg

  • The notification screenshots are out of scope. These are currently being implemented in F2F challenge (Join there if you are interested!)

• All buttons and links are dead links.

• Header :

  • Implement a dropdown logo menu as implemented in verigames.com. the logo menu is provided in challenge forums.

  • The 4 social network icons are clickable icons. Dead links for now.

• Menu :

  • Also a clickable items but dead links.

• Username widget :

  • Username in widget header is clickable (deadlink).

  • User photo is clickable.

  • Latest Badges and Latest Awards will have same content, show multiple variations when there are Badges/Awards and when there are not.

    • Hovering over the badge will show tooltip with name and date “{badge name} earned in {date}”.

• Like button :

  • You will use the facebook like button.https://developers.facebook.com/docs/plugins/like-button

• Player Of The Month :

  • This will be a slider same as done in this page http://circuitbot.verigames.com/home

  • User photo, username are clickable.

• Twitter widget :

  • You will prototype it to be exactly as shown in the PSD.

  • We will use twitter widget to apply the skinning to it during development same as done in this page and this page

• Top Stories widget :

  • The red text are clickable.

• About the game widget :

  • The videos will be youtube.

  • The videos and screenshots sections are sliders

    • user can manually navigate between items.

    • When clicking on a video or a screenshot it will open up a window modal with (left/right arrow) to display video/screenshot with ability to navigate between items as done in this page.

• Leaderboard and Recent User Activity

  • The username and photo are clickable.

  • Remove down arrow in Leaderboard widget, it’s not needed.

• Footer

  • We will implement it same as done in verigames.com

  • Add validation to the text field

    • subscribe button should be disabled by default if field is empty (empty string also should be considered as empty).

    • it should be valid email.

  • All links are dead links.

General Notes

• Use as minimal css and js script as possible. we want this a lightweight page that loads very fast.

• AngularJS is not allowed.

• JS libraries should be used wisely, if you need JS library for specific functionality you need to make sure you are using the minimal version of it.

HTML Requirements

• Your HTML code must be XHTML 1.0 Transitional compliant

• 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.

Javascript Requirements

All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.

You are allowed to use third-party javascript libraries. Please document what libraries you have used and where in the prototype.

Browser Requirements

• IE9+

• Latest FireFox on Mac & PC

• Latest Safari on Mac & PC

• Latest Chrome on Mac & PC

Documentation Provided

Storyboard and Screenshots are provided in forums

Final Submission Guidelines

Deliverable

A zip file include the following :

• Single HTML page with css/js/images that address the above requirements.

• Text file with notes to reviewer.