Compared to the standard 100 Days CSS challenge, all of these are:
- Made responsive. If you change the size of the frame, the image should resize accordingly, nothing is a fixed size. For example with “095 pig drawing”, if you set the frame width to half the size, the image will shrink horizontally by half.
- Utilise CSS custom properties (variables) for easy changes to various aspects of each frame. For example with 097 person, you can change the value of the “person-height” variable and the person will change to that height while still being centered in the frame.
Making them responsive was not too difficult. I just had to use relative sizes the majority of the time and to some maths to center things properly and properly calculate the relative sizes between different elements.