All solutions

I couldn't figure out how to find the correct box-shadow value, and background-position for images. Please help me with this. Any other improvement feedback or suggestion is appreciated.

Thanks

Please tell me how to correct the box shadow. Also, suggest any layout improvements I can make so that the page looks better.

Please suggest me how to apply the correct image overlay (making the image look purple). Also suggest the appropriate box-shadow.

Any other feedback would be helpful. Thanks

I couldn't provide the correct box shadow to the main card and the button. Please help me figuring out.

Also, I am confused about the typography. The style-guide.md says the paragraph should be 16px but that almost never works, it looks too big. My screen resolution is 1024x768. I have to set it back to 11.3px. Also the letter spacing and word spacing displayed in the design files is quite less. And I couldn't adjust my design according to that.

I found it difficult to select colors. Also the colors mentioned in the style guide were not matching perfectly with the design images. I implemented the rating buttons using span elements and used javascript to show their states when clicked. Could it be implemented differently using just HTML/CSS. Also, the. Please suggest how to exactly measure the relative size of each element in the design to achieve a pixel perfect design.

Any further suggestions or feedback are welcome!

I am facing trouble with mobile layout the image is not fitted as expected. It should take 50% of the available width.

How to provide correct box shadow for the card in the middle?

I couldn't choose correct color for box-shadow for #card element between hsl(212, 45%, 89%) and hsl(220, 15%, 55%). And also have inaccurate offset values.

Please suggest whether the card is in proper vertical position or not? As I only used margins, and didn't use something like flexbox or positions. Thanks...