Layout of all pages

Layout of all pages of the online store according to Figma, mobile + desktop

It is necessary to layout one page of the jewelry online store according to the ready design in Figma.

This is only HTML/CSS/JS layout, without integration into OpenCart, WordPress, or any other CMS. However, the layout must be prepared in such a way that it can be easily transferred to OpenCart/Twig later.

What needs to be done

• Responsive layout of one page according to Figma: mobile + desktop.
• Pixel-perfect correspondence to the design.
• Clean, understandable HTML.
• Structured CSS, without chaotic one large file.
• Minimal JS only for interactive states, if they exist on the page.
• Optimized images in WebP, without heavy PNG/JPG at runtime.
• Correct operation in Chrome/Safari mobile and desktop.

Important requirement for submission format

You need to submit not just index.html, but a small handoff kit:

project/
 pages/
 page.html

 components/
 header.html
 footer.html
 product-card.html
 breadcrumb.html
 other reusable blocks, if any

 handoff/
 playground.html

 css/
 00-tokens.css
 01-base.css
 02-layout.css
 03-forms-buttons.css
 04-components.css
 05-page.css

 js/
 ui.js

 assets/
 images/
 icons/

handoff/playground.html must show the main components and their states, if they exist: default, open, active, disabled, error, loading, empty, etc.
There is no need to write long documentation, but the states must be visible in the HTML examples.

Code quality requirements

• No inline styles style="".
• No