All solutions

This was interesting css grid challenge. I have use it to practice, what I have learned about Grid and fall in love with grid-template-areas while doing so. I am still not sure, when to use Flexbox and when Grid. Any ideas and suggestions?

At first, it seemed like that the biggest challenge for me will be moving divs on the axis in the flexbox. Actually, it was easy at the end. What I struggled with were background images and how to position them correctly according the challenge. I have googled this solution, but I am not sure, if it is right. Any help will be much appreciated!

background-image: url(images/bg-pattern-top-mobile.svg),
    url(images/bg-pattern-bottom-mobile.svg);
background-position: top left, bottom right;
background-repeat: no-repeat;

I solved this challenge with flexbox. I play a bit with box-shadows and added subtile hover effect. If you have any comment on my code, please let me know.

The gradients were for me quite new. I wasn´t sure how to approach them. This solution doesn´t use json file. I will have to learn how to do it first. If you have any hints, please let me know.

Not sure about background-image approach.

background-image: url("./images/pattern-background-mobile.svg");
background-size:contain;
background-repeat: no-repeat;

If you have any sugestions, I would like to here them.

I tried to practice also CCS custom properties and using mobile first approach. Get stuck several times. This is as good as I can get. If you have any suggestions, they are welcome!

My second solution with Frontend Mentor