Challenge Overview
Welcome to Land O'Lakes - Calva Products Responsive Website Prototype Challenge!
We need your help to code the front-end prototype of the Calva Products responsive website under the Zuber 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. 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 as the responsive framework.
About Calva Products Website
The purpose of this website is to inform current customers (primarily dairy farm owners/operators, herd managers, calf managers and calf feeders), potential customers and key influencers on customer purchase decisions (such as veterinarians and nutritionists) on information about the products and services that Calva provides.
Prototype Requirements
All screens provided in the storyboard are in scope. Your prototype must match them, in look and functionality.
1. Homepage
- See 01* png files.
- Slider should automatically transition each 10 seconds (should be easily configurable). Make it 5 slides. When clicking on the dots the automatic play stops working, slides should transition manually clicking on the dots by then.
- The search bar at the footer should work the same way as the search bar from the header, 01-4-Homepage-open-search-dropdown.png.
2. About
- See 02* png file.
3. Products
- See 03* png files.
4. Contact
- See 04* png files.
- Clicking any map dot shows a modal, 04-2-Contact-after-clicking-the-green-dot-on-the-map.png.
- The map should be easily manipulated with Javascript/CSS to change colors and place map points. Keep vector graphics for representing the map states (SVG) or any other approach to keep them vector.
5. News
- See 05* png files.
HTML Requirements
- Your code strategy MUST meet the A conformance level of WCAG 2.0 guidelines.
- 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.
- 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).
- Must support retina display. Notice the provided design is at @2x for retina support purposes.
- 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.
We need your help to code the front-end prototype of the Calva Products responsive website under the Zuber 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. 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 as the responsive framework.
About Calva Products Website
The purpose of this website is to inform current customers (primarily dairy farm owners/operators, herd managers, calf managers and calf feeders), potential customers and key influencers on customer purchase decisions (such as veterinarians and nutritionists) on information about the products and services that Calva provides.
Prototype Requirements
All screens provided in the storyboard are in scope. Your prototype must match them, in look and functionality.
1. Homepage
- See 01* png files.
- Slider should automatically transition each 10 seconds (should be easily configurable). Make it 5 slides. When clicking on the dots the automatic play stops working, slides should transition manually clicking on the dots by then.
- The search bar at the footer should work the same way as the search bar from the header, 01-4-Homepage-open-search-dropdown.png.
2. About
- See 02* png file.
3. Products
- See 03* png files.
4. Contact
- See 04* png files.
- Clicking any map dot shows a modal, 04-2-Contact-after-clicking-the-green-dot-on-the-map.png.
- The map should be easily manipulated with Javascript/CSS to change colors and place map points. Keep vector graphics for representing the map states (SVG) or any other approach to keep them vector.
5. News
- See 05* png files.
HTML Requirements
- Your code strategy MUST meet the A conformance level of WCAG 2.0 guidelines.
- 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.
- 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).
- Must support retina display. Notice the provided design is at @2x for retina support purposes.
- 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.