The mini-project is a picture switcher. Only 5 pictures, the active picture is full size.
It can be a useful addition to any site, for example, to display a assortment of products ✨
The project is created with native JS and CSS, without any frameworks and libraries.
When you click on a picture, it increases to 100% of its size, and all others decrease. This is implemented using the flex property:
flex: 8for active picture;flex: 1for others
An example of the active picture compared to others:
As for adaptability - if the screen is less than 600px - the pictures are arranged vertically
I've learned myself web development without any courses or training, so if you have any comments, I will be happy to chat with you on social networks (see my profile 🔥)