All solutions

Pretty happy with my solution, although I think the css could be simplified.

One weird bug I noticed: When opening the page in safari on iphone, the border-radius of the search bar is buggy when toggling the dark/light mode. I couldn't figure out why that is.

For general improvement I think a pagination for the countries on the homepage would be nice. And after being on a country detail page and going back to the home page, the scroll height of the visited country could be restored. Any tips on how to implement this?

I'm pretty happy with my solution, although I've got the feeling the media queries could be simplified. Any feedback is welcome :)

P.S.: My initrial try was using CSS grid for the main layout, but I wasn't able to get the header background image use the full width (larger than the grid childs width). Does anyone have an idea how this could be done?

This went pretty well. First time I used grid for the main layout.

The input validation with vanilla JS was a bit of a hassle, since I mainly did React. Do you see room for improvement in the JS or is it fine the way I did it?

My solution isn't completely finished. I'm getting stuck with the positioning of the images. In the desktop view, its working nearly as expected, except the background image is overflowing into the body and I can't get it working. In the mobile view the whole accordion is pushed down by the images and I don't know how to get the accordion independent from the images on top.

For the accordion itself, it is possible to show/hide the single accordion elements independently from each other. This is intended and it was pretty hard for me to keep the images static, even if the whole container resizes, when multiple accordion elements are shown.

Can anyone give me some tips regarding the image positioning? I assume there is a much easier way to do the positioning than I did...

I think there could be a 2nd media query breakpoint between the current desktop and mobile view, where only one card wraps to the next line. Or is it fine to directly switch to the one-card-per-line-view? I guess it's a matter of taste.

This one went pretty well. Only two things that I'm curious for a better solution are:

• The five stars in the rating div are currently five seperate HTML img tags. I think a better solution would be something like a ::before-selector on the .rating-class, but I was only able to get one star into it. How could I get 5 duplicates of the star image in there?

• I struggled with the vertical offset on the magenta review boxes. I used position: relative with a 20px (e.g. 40px) top offset on the nth-child(2) and last-child of .review. But I think there might be a better way for this.

Thanks for any feedback :)

I am wondering if there is a better way to position the bubbles in the background. Currently it's positioned like in the design examples, but just for widths 1440px and 375px. If the width changes, the bubbles move unintended or out of the visible area.