I need someone to build out a PSD to HTML and CSS, supporting IE8+ and WebKit browsers (Chrome and Firefox). Screenshots of the pages that need to be built out into HTML, Javascript and CSS can be viewed here:
<[login to view URL]>
Each of these screenshots are currently Layer Comps within the photoshop file.
Make sure you read the detailed requirements section for notes on individual pages.
Please include references to other work that you have done that is similar and describe the approach you will take when you bid.
The HTML, Javascript and CSS are going to be used after this project to create a Theme for nopCommerce. Let me know if you have experience in this space as well.
## Deliverables
Here are requirements for the build out:
General:
1) All text needs to be HTML editable text.
2) The fly down menu should look the same as the one on this site: <[login to view URL]>, and contract and expand based on the number of items available. There should be 4 items per column, and the columns should expand to the right as more items are added.
Home page:
1) Background images should swap the same way seen on this site: <[login to view URL]>
Internal pages:
1) On the internal pages, the breadcrumbs (white arrow boxes) for the navigation should overlay the bar below the navigation bar.
Product Market/Department/Category/List pages:
1) The box should have a class that allows for the "New" to optionally overlay the corner. Text for "New" should be HTML that is centered over the red at an angle if possible. See Product Department as an example.
Product Detail page:
1) Clicking Composition or Finish toggles the visibility of the Composition and Finish information.
2) Clicking an available color moves the checkmark to overlay that color.
3) Under photos and videos, the thumbnails should scroll right and left when the arrows are pressed down.
4) When clicking an image, should use Lightbox or something similar to display an enlarged version.
Museum page:
Should use Lightbox or something similar to display an enlarged version of an image when clicked.
Contact Us:
1) Should have a google map as an iframe embedded in the HTML with the address and zoom set to look like the picture.
2) Clicking Contact Us or Submit Form toggles the visibility of the Contact Us and Form information.