Challenge Overview
Welcome to Land O'Lakes - Nutra Blend Responsive Website Prototype Challenge.
We need your help to code the front-end prototype of the Nutra Blend responsive website under the Zurb Foundation framework.
Best of luck!
Project Overview
The goal of this challenge is to develop HTML/CSS/JS code for building a prototype which will be powered by Kentico (CMS). You are provided with the storyboards screens and source files which you’ll use to build up the working prototype. It’s mandatory to use the Zurb Foundation (latest version) as the responsive framework.
Prototype Requirements
All screens provided in the storyboard are in scope. Your prototype must match them, in look and functionality.
1. Homepage
- Desktop: 1.1.0-Desktop-Homepage.
- Mobile: 2.1.0-Mobile-Homepage.png and 2.12.0-Mobile-Navigation-Menu.png (overall for all pages ~ navigation).
- Slider should automatically transition each 10 seconds (should be easily configurable). Make it 6 slides MAX. When clicking on the arrows the automatic play stops working, slides should transition manually clicking on the arrows by then.
- Notice the hover effect on the program pictures (1.1.1-Desktop-Homepage_Hover.png). For mobile/tablet, hovering translates into tapping.
- Make the Drive to Feed Programs logo clickable, pointing to 1.18.0-Desktop-Drive-to-Feed.png.
2. Member Login
- Desktop: 1.1.2-Desktop-Homepage-Customer-Login.png.
- Mobile: 2.1.2-Mobile-Homepage-Login-Page.png.
- Sign Up link navigates to 1.4.0-Desktop-Customer-Sign-Up.png (2.4.0 mobile respectively).
- Password "eye" functionality is not required at any page for passwords. Can dismiss the eye icon.
3. About Us
- Desktop: 1.2.0-Desktop-About-Page.png.
- Mobile: 2.2.0-Mobile-About-Page.png.
- In the top images array, horizontal scrollbar and navigation arrows should be dismissed.
4. Regional Sales
- Desktop: 1.3.0-Desktop-Regional-Sales.png, 1.3.1-Desktop-Regional-Sales-Office-Staff.png.
- Mobile: 2.3.0-Mobile-Regional-Sales.png, 2.3.1-Mobile-Regional-Sales-Office-Staff.png.
- This page displays two tabs. Regional sales map must be interactive (see hover effects behaviour).
- The map graph can be replaced with a vector graphic from an external source (e.g. Google Maps). You can simplify the functionality and look, as long as it can zoom and add the pins with hover descriptions.
- Mobile/tablet version should display the same images as in desktop. Some are missing in the mobile design representation but jut re-use the same desktop grid assets.
5. Sign Up
- Desktop: 1.4.0-Desktop-Customer-Sign-Up.png, 1.4.1-Desktop-Customer-Sign-Up-Thank-you.png.
- Mobile: 2.4.0-Mobile-Customer-Sign-Up.png, 2.4.1-Mobile-Customer-Sign-Up-Thank-You.png.
- Make the page title read “Customer/Vendor Login Request” instead of “Customer/Vendor Login”.
6. Generic Page
- Desktop: 1.5.0-Desktop-General-Content.png.
- Mobile: 2.5.0-Mobile-General-Content.png.
- See hover effects behaviour in 1.5.1-Desktop-General-Content_ToolTip.png.
- The graph bar can be an image. The circle chat must be HTML/CSS/JS.
- The tab functionality must exist, to switch between calendar and events. The content for events must be blank/dummytext.
7. Products Listing
- Desktop: 1.6.0-Desktop-Product-Search.png.
- Mobile: 2.6.0-Mobile-Product-Search.png.
- User gets to this page from main navigation (Products & Premixes), after typing an input in bottom search bar or by clicking on the search icon at the top right.
- Desktop version left side shows "Species" category but in mobile says "Animals". It should be "Species" in both cases.
- All filters in the left side should be expandable/collapsable. Use dummy text for the categories not provided in the desing.
- In mobile/tablet, a drop with options should show up for the filters (species, brand, etc). Use your best judgment according to the existing design.
8. Products Details
- Desktop: 1.6.1-Desktop-Product-Search-Details.png.
- Mobile: 2.6.1-Mobile-Product-Search-Details.
9. Drive to Feeds Programs
- Desktop: 1.18.0-Desktop-Drive-to-Feed.png.
- Mobile: 2.13.0-Mobile-Drive-To-Feed.png.
10. Drive to Feed Kids
- Desktop: 1.7.0-Desktop-Drive-To-Feed-Kids.png
- Mobile: 2.14.0-Mobile-Drive-To-Feed-Kids.png.
11. The Main Course Project
- Desktop: 1.8.0-Desktop-The-Main-Course-Project.png.
- Mobile: 2.15.0-Mobile-The-Main-Cource-Project.png.
- Desktop's bottom section shows three colums named "123". Mobile design is incorrect by displaying only two columns, there should be three in all scenarios, adjusted to the grid accordingly.
12. Drive No Boundaries
- Desktop: 1.9.0-Desktop-Drive-no-Boundaries.png.
- Mobile: 2.16.0-Mobile-Drive-No-Boundaries.png.
13. Drive The Message
- Desktop: 1.10.0-Desktop-Drive-The-Message.png.
- Mobile: 2.17.0-Mobile-Drive-The-Message.png.
14. Contact Us
- Desktop: 1.11.0-Desktop-Contact-Us-Page.png.
- Mobile: 2.7.0-Mobile-Contact-Us-Page.png.
15. Newsletter
- Desktop: 1.14.0-Desktop-Newsletter-Page.png.
- Mobile: 2.8.0-Mobile-Newsletter-Page.png.
16. Password Protected Page
- Desktop: 1.15.0-Desktop-Password-Request.png.
- Mobile: 2.9.0-Mobile-Password-Request.png.
- Display this page after clicking on “Drive to Feed” from main navigation. Once the user clicks “Login” (no matter the form data) he gets redirected to Drive to Feed Programs page (#9 in the requirements).
- The purpose of this page is to showcase how password protected pages will work.
17. Nutrablend Online Order
- Desktop: 1.16.0-Desktop-Online-Order.png.
- Mobile: 2.10.0-Mobile-Online-Order.png.
18. ASN Labeling
- Desktop: 1.17.0-Desktop-Online-Order.png.
- Mobile: 2.11.0-Mobile-Online-Order.png.
Design Inconsistencies Notes
- Some page titles differ from green to black. Should follow desktop page title color in all scenarios (green).
- Scrollbars should be all orange, as in desktop.
- Bottom search bar should read "SDS Search" in all views.
- Eye function not required at any page.
HTML Requirements
- HTML should be valid HTML5 compliant.
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- 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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed to use SCSS in the project.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- 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.
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.
Licenses & Attribution
- Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok, but if a library is not commercial friendly you need to get our approval first.
- Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.
Screen Specifications
- Must support desktop, tablet and mobile views (browser).
- Mobile view min width 375px.
- Desktop and tablet breakpoints at your consideration.
- Must support retina display.
- In spite tablet design is not provided, consider making your CSS code flexible enough to add support to a fluid grid system at your best judgement as long as it looks good and doesn’t break the layout.
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).
- Tablet: Latest Android and Safari Browsers.
- Mobile: Latest Android and Safari Browsers.
- Provide all your files within a zip container.
We need your help to code the front-end prototype of the Nutra Blend responsive website under the Zurb Foundation framework.
Best of luck!
Project Overview
The goal of this challenge is to develop HTML/CSS/JS code for building a prototype which will be powered by Kentico (CMS). You are provided with the storyboards screens and source files which you’ll use to build up the working prototype. It’s mandatory to use the Zurb Foundation (latest version) as the responsive framework.
Prototype Requirements
All screens provided in the storyboard are in scope. Your prototype must match them, in look and functionality.
1. Homepage
- Desktop: 1.1.0-Desktop-Homepage.
- Mobile: 2.1.0-Mobile-Homepage.png and 2.12.0-Mobile-Navigation-Menu.png (overall for all pages ~ navigation).
- Slider should automatically transition each 10 seconds (should be easily configurable). Make it 6 slides MAX. When clicking on the arrows the automatic play stops working, slides should transition manually clicking on the arrows by then.
- Notice the hover effect on the program pictures (1.1.1-Desktop-Homepage_Hover.png). For mobile/tablet, hovering translates into tapping.
- Make the Drive to Feed Programs logo clickable, pointing to 1.18.0-Desktop-Drive-to-Feed.png.
2. Member Login
- Desktop: 1.1.2-Desktop-Homepage-Customer-Login.png.
- Mobile: 2.1.2-Mobile-Homepage-Login-Page.png.
- Sign Up link navigates to 1.4.0-Desktop-Customer-Sign-Up.png (2.4.0 mobile respectively).
- Password "eye" functionality is not required at any page for passwords. Can dismiss the eye icon.
3. About Us
- Desktop: 1.2.0-Desktop-About-Page.png.
- Mobile: 2.2.0-Mobile-About-Page.png.
- In the top images array, horizontal scrollbar and navigation arrows should be dismissed.
4. Regional Sales
- Desktop: 1.3.0-Desktop-Regional-Sales.png, 1.3.1-Desktop-Regional-Sales-Office-Staff.png.
- Mobile: 2.3.0-Mobile-Regional-Sales.png, 2.3.1-Mobile-Regional-Sales-Office-Staff.png.
- This page displays two tabs. Regional sales map must be interactive (see hover effects behaviour).
- The map graph can be replaced with a vector graphic from an external source (e.g. Google Maps). You can simplify the functionality and look, as long as it can zoom and add the pins with hover descriptions.
- Mobile/tablet version should display the same images as in desktop. Some are missing in the mobile design representation but jut re-use the same desktop grid assets.
5. Sign Up
- Desktop: 1.4.0-Desktop-Customer-Sign-Up.png, 1.4.1-Desktop-Customer-Sign-Up-Thank-you.png.
- Mobile: 2.4.0-Mobile-Customer-Sign-Up.png, 2.4.1-Mobile-Customer-Sign-Up-Thank-You.png.
- Make the page title read “Customer/Vendor Login Request” instead of “Customer/Vendor Login”.
6. Generic Page
- Desktop: 1.5.0-Desktop-General-Content.png.
- Mobile: 2.5.0-Mobile-General-Content.png.
- See hover effects behaviour in 1.5.1-Desktop-General-Content_ToolTip.png.
- The graph bar can be an image. The circle chat must be HTML/CSS/JS.
- The tab functionality must exist, to switch between calendar and events. The content for events must be blank/dummytext.
7. Products Listing
- Desktop: 1.6.0-Desktop-Product-Search.png.
- Mobile: 2.6.0-Mobile-Product-Search.png.
- User gets to this page from main navigation (Products & Premixes), after typing an input in bottom search bar or by clicking on the search icon at the top right.
- Desktop version left side shows "Species" category but in mobile says "Animals". It should be "Species" in both cases.
- All filters in the left side should be expandable/collapsable. Use dummy text for the categories not provided in the desing.
- In mobile/tablet, a drop with options should show up for the filters (species, brand, etc). Use your best judgment according to the existing design.
8. Products Details
- Desktop: 1.6.1-Desktop-Product-Search-Details.png.
- Mobile: 2.6.1-Mobile-Product-Search-Details.
9. Drive to Feeds Programs
- Desktop: 1.18.0-Desktop-Drive-to-Feed.png.
- Mobile: 2.13.0-Mobile-Drive-To-Feed.png.
10. Drive to Feed Kids
- Desktop: 1.7.0-Desktop-Drive-To-Feed-Kids.png
- Mobile: 2.14.0-Mobile-Drive-To-Feed-Kids.png.
11. The Main Course Project
- Desktop: 1.8.0-Desktop-The-Main-Course-Project.png.
- Mobile: 2.15.0-Mobile-The-Main-Cource-Project.png.
- Desktop's bottom section shows three colums named "123". Mobile design is incorrect by displaying only two columns, there should be three in all scenarios, adjusted to the grid accordingly.
12. Drive No Boundaries
- Desktop: 1.9.0-Desktop-Drive-no-Boundaries.png.
- Mobile: 2.16.0-Mobile-Drive-No-Boundaries.png.
13. Drive The Message
- Desktop: 1.10.0-Desktop-Drive-The-Message.png.
- Mobile: 2.17.0-Mobile-Drive-The-Message.png.
14. Contact Us
- Desktop: 1.11.0-Desktop-Contact-Us-Page.png.
- Mobile: 2.7.0-Mobile-Contact-Us-Page.png.
15. Newsletter
- Desktop: 1.14.0-Desktop-Newsletter-Page.png.
- Mobile: 2.8.0-Mobile-Newsletter-Page.png.
16. Password Protected Page
- Desktop: 1.15.0-Desktop-Password-Request.png.
- Mobile: 2.9.0-Mobile-Password-Request.png.
- Display this page after clicking on “Drive to Feed” from main navigation. Once the user clicks “Login” (no matter the form data) he gets redirected to Drive to Feed Programs page (#9 in the requirements).
- The purpose of this page is to showcase how password protected pages will work.
17. Nutrablend Online Order
- Desktop: 1.16.0-Desktop-Online-Order.png.
- Mobile: 2.10.0-Mobile-Online-Order.png.
18. ASN Labeling
- Desktop: 1.17.0-Desktop-Online-Order.png.
- Mobile: 2.11.0-Mobile-Online-Order.png.
Design Inconsistencies Notes
- Some page titles differ from green to black. Should follow desktop page title color in all scenarios (green).
- Scrollbars should be all orange, as in desktop.
- Bottom search bar should read "SDS Search" in all views.
- Eye function not required at any page.
HTML Requirements
- HTML should be valid HTML5 compliant.
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- 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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed to use SCSS in the project.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- 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.
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.
Licenses & Attribution
- Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok, but if a library is not commercial friendly you need to get our approval first.
- Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.
Screen Specifications
- Must support desktop, tablet and mobile views (browser).
- Mobile view min width 375px.
- Desktop and tablet breakpoints at your consideration.
- Must support retina display.
- In spite tablet design is not provided, consider making your CSS code flexible enough to add support to a fluid grid system at your best judgement as long as it looks good and doesn’t break the layout.
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).
- Tablet: Latest Android and Safari Browsers.
- Mobile: Latest Android and Safari Browsers.
Final Submission Guidelines
- Include both source & prebuilt/minified.- Provide all your files within a zip container.