Farmers Digital Journey

CHALLENGE SUMMARY
Welcome to the “Farmed Digital Journey UI Prototype Challenge”. In this challenge we are looking to create a single responsive page (Desktop, Tablet and Mobile) to make their current infographic more interactive. This HTML Prototype should work on any device. Storyboards for each breakpoint are attached on the document forum post.

Let us know if you have any questions!

Final Submission Guidelines

Background information
This challenge is focused on creating the Responsive experience (Desktop, Tablet and Phone) for the "Farmed Digital Journey" infographic. We want customers to be inspired and enjoy the (simple) experience understanding this graphic.

Competition Task Overview
The main task of this competition is to develop Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.

Key Requirements

- Clicking on any "Flag" with title, should open a modal view with detailed content.
- Dragging a car to each section will also cause the modal to appear. We want to be able to show the car being dragged between sections, so it's more interactive.
- All text should be loaded from a config or XML file. So if we need to make text changes, we can just change it in that file.
- Replicate the design of the approved Storyboards (PSD Files) for all required pages.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Test in all the required browsers.

Required Screens
- This challenge will be focused on the “Farmed Digital Journey” infographic. We are looking to create this screen as Responsive (Desktop/Tablet/Mobile). Please follow the storyboards provided on document section.
- You can take the content for each flag from the "Digital Capabilities Model v2.pptx" power point file. (Attached on drive folder)
- Please note that Mobile Screen is a little bit different, due the complexity of the infographic, mobile view  has been redesigned to work well on a mobile device:
- You can check the mobile demo here: https://marvelapp.com/65geb7e

Image Requirements
- Images should be properly compressed while still having good visual quality. 
- Please use best practice repetition usage of background based image. 
- Please use sprites when using icons for your submission. 
- Test in all the required browsers. 

Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- You can use SASS for this challenge
- 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.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- 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 used must not have any copyrights to any 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.
Please ask in forums for confirmation if you are planning to use external libraries. 
- You can use any of this libraries on this challenge:
- - Bootstrap 3
- - JQuery
- - For "Dragging" features, please use any open source library that allow this. Remember to declare it on your declaration/notes file.

Browsers Requirements:
- IE11 above - Latest Firefox, Safari & Chrome Browsers
- Android, Chrome, Firefox Browser for Mobile phone
- Mobile Safari 

Documentation Provided:
- Storyboards and All necessary documents can be found in this drive folder.