All solutions

I've just got one question, how can I enlarge correctly the divider on the desktop view ?

How can I adapt the margin and padding when shrinking the screen ? On desktop format the page looks very good but when shrinking the elements are too far apart.

I'm happy of the result but I think I have some bad practices about absolute and relative positionning. I used scale transform property for the arrow next to samuel image, but are there a way to have a better arrow look without transform ?

Are there a filter on the image on desktop design ? I have the impression that there is a filter on the image

I managed to handle validation very well, I decided to separate numbers in the card number input. For the design I wonder if there is a better way to position the cards even if the user shrink the page.

I made the very big mistake to develop the HTML skeleton website to use flexbox instead of grid. For the hover on the 6 cards I don't know how to change opacity without seing the color of the background with the icon. I think I need to remove the z-index and separate the color with icon and the time card instead of nesting elements. For the js part nothing to say.

I love this challenge, I like my work. If you have suggestions don't hesitate to leave a comment

I think I made a great work, but how can I have a better code ?I think I can simplify my code, especially in CSS/JS

Desktop design looks very good, it was harder on mobile to move images

The desktop design looks good even if it was not easy because I alternate resolution (1440 and 1600px) when coding and the result looks different any time. And for the mobile design I had a resolution problem, the main page took 375px but visually it represent half of the page and I'm not be able to find the issue about that.

I used relative positioning for the white bubble with "185GB left". It is the good way to position this element because the transition between desktop and mobile is bad ?