Land O'Lakes - Animal Milk UI Prototype Challenge

Welcome to the Land O'Lakes - Animal Milk Replacer UI Prototype Challenge! The International Animal Milk Replacer marketing team is repositioning the Land O’Lakes AMR portfolio to better align with their long term strategy.  As part of this strategy, they are looking to create and owned digital presence to better differentiate the product portfolio and that is culturally relevant in Mexico.  

For this challenge, we are looking for your help to convert the provided storyboard design into working HTML Prototype that is intended to be use for WordPress development.

Final Submission Guidelines

Create the following pages based on the provided storyboards and details outlined below.

Important Notes:

- The provided storyboard is for Desktop layout only but keep in mind that there will be future development to support mobile and tablet devices.

- Logo should be image tag (not via CSS background). Ideally, it should be similar to WordPress custom logo code markup. Example output is like this:

<a href="./index.html" class="custom-logo-link" rel="home" itemprop="url">
    <img src="path/to/logo.png" class="custom-logo" alt="logo">
</a>

- Do not put class names on p tags (those will be used for paragraph text copy) , wrap them in div tag and use nth child or nth-of-type to style the p tag respectively.

- User img tag for image content. Some of these images are the hero/header image, product image, and page thumbnails.

- Refer to “AnimalMilk MX_page templates.pdf” for sitemap structure.

- Our main storyboard source is named Main-Source.psd, the provided Sub-Source.psd will discussed on some page below.

Page Requirements

0. Overall pages
- Search icon at the header and footer when clicked will show an overlay search field. We do not have storyboard for this but we can follow https://www.croplan.com/ functionality. Actual search functionality and result page are out of scope.
- Page width is fluid.
- Minimum content width as per storyboard.
- Header is sticky when user scroll down the page. See 1.1-Landing-Page-_-Sticky-Header.png for reference when user scroll the page.

1. Landing page
- SB: 1.0-Landing-Page.png

- Hero section 
-- This is a carousel
-- Each slide item’s background, product image, and product image background should use HTML image tag and not CSS background.
-- Where to Buy button leads to Where to Buy page.

- Educacion section
-- Each item on the right side are clickable.
-- By default, all thumbs will display title only.
-- When hovered, it will show the description.
-- When clicked will lead to Education Details page.

- Productos section
-- Each product icon/thumb should use HTML image tag.
-- Buttons links to Product Details page.

- Acerca De (About) section
-- More Details button leads to About Us page
-- Right side is a carousel
- Contacto section
-- Validate form fields upon submission, while send functionality is not required.

2. Education page
- SB: 2.0-Inner-Page-_-Education.png
- More Details button leads to Education Details page.

3. Education Details page
- SB: 3.0-Details-Page-_-Education-_-Calf-Nutrition.png
- PDF icon can be via CSS.
- Download PDF button are dead links.

4. Products page
- SB: 2.1-Inner-Page-_-Products.png
- Animal icons should be HTML image tag.
- More Details button leads to Product Category page.

5. Product Category page
- SB: 3.0-Details-Page-_-Education-_-Calf-Nutrition.png
- Product image and the product category image (black animal icon) should be HTML image tag.
- Clicking “?” icon will show/hide product description. See 3.1a-Details-Page-_-Productos-_-Pre-Weaned-Calf---Quick-Facts.png
- More Details button leads to Product Details page.

6. Product Details page
- SB: 4.0-Product-Details-Page.png
- Product Document, Specification, Reviews are tabs
- Product Document tab - should be able to list more items and not limit to 4 items.
- Specification tab - use dummy content.
- Reviews tab - keep this blank for now.
- Product image should be HTML image tag.
- Where to Buy button leads to Where to Buy page
- Rating functionality is not required.
- Remove the right sidebar (search and filter by) section. Move the middle column (product image, rating, and Where to Buy button) to the right side, then adjust the width of the left column with the available space.

7. About Us page
- SB: 6.0-About-Us.png
- This storyboard is a merge one. The content section comes from the Sub-Source.psd but use the font family of the Main-Source.psd
- Top icons can be from CSS background.
- Embed a video from https://www.youtube.com/user/LandOLakes2010 

- History section
-- This will be a horizontal timeline layout
-- Allow horizontal scrolling if the content is more than the allotted space.
-- Scrollbar should be hidden by default and only shows when user hover on the section. Something like from this plugin https://noraesae.github.io/perfect-scrollbar/ 

- Contact section
-- Background and icon can be CSS background
-- Button leads to Contact Us page

8. Where To Buy page
- SB: 4.1-Where-To-Buy.png
- This is another merge design from 2 storyboards.
- Content PSD source is from Sub-Source.psd
- By default, the map shows the current location of the user (if he/she allow geolocation), then show the closes sale distributor.
- Google map auto suggest should functional. Make sure to get the zip code based from the result and put it in a hidden field.
- Use JSON format for the dummy sale distributor records to display the result and marker. See sample data.json file for the JSON structure, this sample json is based on a zip code of “90210”.

9. Contact Us page
- SB: 5.0-Contact-Us.png
- Implement form field validation. Actual form submission is not required.

Code Requirements

HTML / HTML5
- 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
- You are allowed to use SASS or LESS CSS Pre-Processor.
- You are allowed to use Bootstrap.
- Use Media Queries to load different styles for each page and do NOT build a different page for different device/layout.
- Provide comments on the CSS code. We need comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All CSS naming should not have any conflicts.
- As possible use CSS styles when creating all styling whenever possible, avoid image usage.
- 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
- 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 jQuery.

Images
- 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.
- Though the storyboard is not in retina size, make sure your submission will still look good if we use 2x image size.

Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser