Developing a product list interface using HTML5, CSS3 and JavaScript

Please have a look at example sites: [login to view URL] [login to view URL] JSON & front-end source template are attached. Complete the tasks below and send in all source code and any additional resources required to run the solution. You may use any external libraries or data stores that can run on Windows. Given the attached JSON-file([login to view URL]), develop a product list interface using HTML5, CSS3 and JavaScript. See attached example designs but feel to put your own touch to it if you want. 1. The interface should be responsive and adapt between mobiles, tablets and desktops. 2. The product list should be sortable by title and price. 3. The product list should at the minimum show the title, price and primary image of each product. More information can be shown, or placed in the layer described in next section (4). 4. Additional information such as thumbnails, sizes etc. should be shown in an layer hidden by default. Layer is shown when hovering a product in the list and is hidden on mouse out (for mobile and tablet devices the layer toggles on tap). The layer can only be visible for one product at a time. Hovering/taping a thumbnail within the layer should show the large version of that thumbnail. See attached design sketch for example on how it could look like. JSON explanation: Id, title, brand and price should be straight forward. Rating can be used to show stars as in the design example. Images are marked with type where primary is used for default image, model for images where the product is displayed on a model, detail for close up images and cutout is used when the background is cutout showing only the product. Sizes and colors vary depending on the product, different scales can occur for sizes.