ws-201301–Music store layout

Background

A designer has created a web page concept for a fictional online store. The design automatically adapts the width of the viewport depending on the user’s device and browser size. Your task is to implement the layout into HTML5 / CSS level 3 to match the provided concept.

Requirement

You will find screenshots named 1280.png, 720.png and 480.png that show how the design looks in 1280px width, 720px width and 480 px width. The breakpoint of dramatic changes between narrow and wide screen layout is 800px.

The designer has also provided a 1280-grid.png to show how the layout follows the 12-columns grid system.

Effects Used

Selection Color:

Description within the title bar:

Add to Cart button:

Cover art transition:

During the mouse hover on the cover, we expect a cover transition effect to reveal detail information. The below screenshot shows the transition steps required. You can define the timing as per your liking. Note that the “ON SALE” wording should be index-able by search engines.

Cover art transition (within the recommendation area:

Go to Album button:

Back to top button transition effect:

Help

❓ Show help content

Submission guideline

• Save your file in your root directory on the server called "XXModuleC" where XX is your country code.

Notes

• The website code must validate to HTML5 .
• Your CSS code must validate to CSS level 3.
• Non-stable (working draft) CSS properties are defined with correct vendor prefixes.
• Place comments through your HTML and CSS.
• The design will be marked in Google Chrome.
• The fonts used are Pacifico and PT Sans.
• Some elements are only visible in wide screen layout and some elements will only appear in narrow screen layout.
• The navigation in narrow screen links to the bottom navigation section. Clicking on the “Back to top” links back to the top of the page.

Marking scheme

[["Description","Points","Total","Points Gain","Total"],["The layout in wide screen (1280px width) matches the provided screen image within Google Chrome.","0.75","","?",null],["The layout in narrow screen (720px) matches the provided narrow screen image within Google Chrome.","0.75",null,"?",null],["The layout in narrow screen (480px) matches the provided narrow screen image within Google Chrome.","0.75",null,"?",null],["The screen changes to fit narrow screen size while size reduced to 800px.","0.25",null,"?",null],["The HTML and CSS are internally commented to describe code usage.","0.25",null,"?",null],["CSS is validated to level 3 using the W3C validator.","0.75",null,"?",null],["HTML is validated to HTML5 using the W3C validator.","0.75",null,"?",null],["The custom font is used correctly within the webpage.","0.50",null,"?",null],["Both Disc cover and back face content matches the concept provided.","0.25",null,"?",null],["Correct HTML5 tags are applied for accessibility reasons. Correct use of HTML to indicate the price changing, form input, content structure.","1.00",null,"?",null],["Interactive effects are applied in an elegant way and fit the theme provided. The transition timing function makes the interactive effects looks good.","1.50",null,"?",null],["The layout resizes and reflows are smooth while resizing windows from wide to narrow and vice versa.","1.50",null,"?",null],["The title bar and \"Add to Cart\" button matches the style and is created using HTML element and appropriate CSS.","0.50",null,"?",null],["Clicking on the top right icon in narrow screen links to the bottom navigation. And clicking on the \"Back to Top\" links back to the top.","0.50",null,"?",null],["The normal, active and focus state follows the document screenshots on the search area, go-to-album button and back-to-top link.","0.50",null,"?",null],["Selection style matches the provided selection screenshot.","0.25",null,"?",null],["Disc cover transition follows the provided transition steps within the concept provided.","0.50",null,"?",null],["All non-stable CSS properties are correctly defined with vendor prefixes. (Mozilla, Chrome, Safari, Internet Explorer and Opera)","0.25",null,"?",null],["All text is indexable without the use of images. (Except the logo, disc cover and 'preview' text)","0.50",null,"?",null],["All shadows and rounded corners are achieved using CSS3 with no images used.","1.00",null,"?",null],[null,null,"=SUM(B1:B99)",null,"=SUM(D1:D99)"],[null,null,null,null,null]]