All solutions

I really appreciate your feedback

Is it correct to use the input range in this case? is it possible to implement it with a gradient? But please tell me, file icon - to select a file, cloud - to download, why a folder icon? Maybe not a very correct question, and you send me to google) Thank you for your attention! Have a good day!

Hello everybody! I think I did a lot of positioning, and made a lot of mistakes) I can't wait to see other solutions) I will be grateful for the remarks, and for the direction to a better outcome. Have a good day!

Why do the child elements of the grid container take up the width of the content if I set them to 1fr? Just started to practice grid)

If there is more content, the layout will break. What is the best thing to do in this case? Just got acquainted with the grid, there may be a rule that does not specify rigid dimensions. P.s Yes, this is a Google translator. Yes, it can all be googled. Yes, first I push, then I think) Good day to you anyway!

Using some cool stuff, like dynamic-adapt. But dont know for little project like this It was better to use display:none and that's all. Poorly implemented version for tablets. What you can recommend to improve the layout.

how best to make blocks with pictures? Maybe there are better ways to control width and height? Guide me in the right direction, please)

I'm starting to understand the java script, but understanding everything is very awful) too much code that is repetitive and not logical. Is it probably better to use classes to change styles? What about semantics? How much did I use div? Didn't bend the stick? And to write this text I used Google translator) so mistakes are possible)

How best to handle the picture? I mean that it was adaptive and without restrictions in width?

I will be grateful for the feedback and advice) I'm so naive)