All solutions

This solution is the first draft. In the next version I will implement the bonus part along with few animations and modular css.

I have below 2 queries though:

1. Although the application functionality is running as per the expectation, the UI does not feel smooth. On page load, three images first appear on the top and then moved to the middle. Same happens with header items. they shift positions on full page load. Does anyone have any idea why it is behaving like this?

2. I have included all properties in single reducer slice(gameSlice) as all properties are related to one another. Is it ok to have a single reducer with these much properties?

Eagerly awaiting for the feedback :)

After 4 days of struggle, I finally got the closest UI output Earlier I used px unit for elements, which then I replaced with rem to make them responsive. Although I have used px for border-radius.

I would like some help for below points:

1. As per the desktop screen design provided in the challenge, my UI is displaying the mobile element bigger in size.

2. While setting the right bottom background div in mobile mode, first I used below css on element ".bgBottomRight", which was not setting the div properly position:absolute; bottom:0; right:0; After some research, I changed it to below code,which worked, but I couldn't understand the behaviour position:absolute top:100% right:0%

3. Is it a good practice to use margin and padding with flexbox to achieve the responsive. I think, with margin and padding my code is not looking clean

I tried to implement this challenge using flexbox, but couldn't succeed. Is it a right approach to use flexbox or can we use css grid layout.

1. The most difficult part for me was to adjust two background images "bg-pattern-bottom.svg" and "bg-pattern-top.svg". Initially I tried with "position:absolute", but in the final version, I used "background-position" property with unit percentage. I am still not satisfied with this implementation. I would like to know more sophisticated way to implement this feature.

2. Also the designs are created for below widths: Mobile: 375px Desktop: 1440px So, I have created one media query for min-width:1440px . Want to know if it's a correct approach