Lorem ipsum dolor sit amet, consectetur adipiscing elit,
DejaVu Sans
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Requirements
Use the API to get all products data.
Please use SCSS or LESS to write CSS.
Colors and fonts must be presented 1:1.
Layout may NOT BE pixel perfect, but the error limit should not be more than 5px. The sizes must be proportional, e.g. if there is a padding on the left: 5px, then on the right must be the same.
After clicking on the hamburger button, please add a smooth transition from hamburger to "X". There are many ready-made solutions. The animation should work both ways. It has to open/hide the side menu (See: ... - menu opened.jpg designs).
After clicking on the "Add to cart", there should be a bubble with incremented product number next to the basket icon in the header. Without products in the basket, the quantity bubble should disappear.
After hover on the "Add to cart" button, please make a smooth transition to a different color.
Products with a discounted price must have an additional "SALE" icon in the bottom-right corner of the image.
Color filter must be functional - the appropriate products must appear / disappear depending on the selected filters.
On mobile, when the "Filter by +" button is pressed, the filter should slide out smoothly (its appearance remains as on the desktop). It must work both ways.
The code must be as optimized as possible, we also evaluate the purity of the code.
The page must display well for Chrome and Firefox (latest versions).
We leave the choice of using solutions and technologies. Justify the choice of the main technology (e.g. Vanilla JS / React / Vue etc.) in the Technology Substantiation.txt file. Notice that extra things be scored additionally (example: you use gulp/grunt to compile styles).
