All solutions

Here is my proposition for this challenge!

I tried using in-HTML media queries, I don't know if this is a best practice but I thought it would avoid loading unnecessary code when loading the website on mobile for example.

I also used CSS variables and built the grid with flexbox !

I'm open to every comment !

Any feedback is welcome!

Here is my version of this cool challenge ! I have a small issue with the location icon on the map that moves when zooming in/out, maybe someone can help me with this!

Open to any of your comments!

Made this one with float for the top part and flexbox for the bottom part.

Also used nth-of-type to shift ratings and quotes parts.

I just saw the comparison on the page looks weird, I don't really know why because my view looks good when I open the link. I'm open to any suggestions of improvements !

I think I've got a pretty good solution on this one. I'm open to any suggestion to improve it!

I think I've got a pretty good solution on this one.

My only question is about the switch button? What's a good practice to style this properly? Is mine okay?

Any feedback is welcome!

I mainly used CSS Flexbox to properly position everything concerning the text.

I had some trouble on positioning the different svgs. I used a mix of img HTML tags and background css properties to do it. What would be the proper way of doing this? As we had different images for desktop and mobile sizes I used the background properties... but I had trouble positioning everything and mostly fixing everything (as you can see, it's moving a bit when opening a question or resizing the browser).

To open a question, I used JS to toggle an active class on the clicked question. Is there a full CSS way of doing so ?

Last point, how many media queries should be used here ? I used two, one for tablets and one for mobiles. I added one main breakpoint which is on tablets portrait mode here. A second one to adapt font size. What would be the best practices on this ?

Thank you! This is my first challenge here :)