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.
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.
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: