All solutions

Project built with:

• Flexbox
• Grid
• Mobile-first design
• CSS custom properties

I had hard time deciding where the mobile view would change to desktop, so I added design for tablet in the middle.

I'll appreciate any feedback!

What I found most difficult during this project was setting up the html structure that would be good for both mobile and desktop views.

I also struggled with deciding if I should use grid, flexbox or mashup of the 2 and finally decided on the latter. I'm not sure if this is the right approach though.

My design is not a 1:1 reproduction of the original, but I'm satisfied with how it looks now.

I'll be vary happy if you check it out and I'd appreciate any feedback!

My biggest issue was with setting background-image property. I'm only used to putting <img> tag in html and providing source to the picture there, but in this project I felt I had to create a container for the picture and use css background-image property. I don't have a proper understanding of this method and all the background-size, and background-repeat properties, so my design kept being wonky for a long time without me understanding why. Even when I succeeded to put it toghether properly, I'm still not sure if my method is the best solution. I'd be extrememly grateful for feedback on it.