All solutions

As a beginner who is still learning, I took the leap of faith to try an actual challenge.

1. I think I made a mistake by including the image in img tag in the html file because now, I can't change the image based on screen size. If I add the image as background, then how can I set it on the left side as shown?
2. And the original price and discounted price in the unordered list items were going off the border. So I had to hack this and that to get them to the correct position.
3. My codes are a bit messy I know. Any suggestion how I could improve it?

Any thought and suggestion are most welcome!

I guess it was the easiest challenge for me, and also completed the fastest. Still, I'm a beginner and any suggestion is of great help to me.

I really had a hard time with the overlay image and had to resort to absolute and relative positioning along with flexbox. Is there a better way to achieve overlay using only flexbox? I admit that I had to resort to some hack-y approaches, specially for the overlay image and getting it in center. Any thoughts are most welcome!

• I couldn't get the exclamation mark inside the input field. Any suggestion on how to do that?
• How can I optimize my javascript implementation of form validation?
• What do you think about my media query usage? Am I using it correctly?

Any other thoughts are welcome!

Any suggestion on responsiveness on mobile devices is highly appreciated. I can make my site look okay on desktop and laptop but struggle with small screens. Thanks.

• Is there a better way to add event listeners to the different buttons other than mine? I bet there is! Tell me about it.
• When I try to flex display a list, there is always some margin on the left that I can't manage. Even with justify-content: space-between keeps that margin on the left. I have to use negative margin to get things in place. Any tips? And as always, thanks for your suggestions!

• I had to repeat the star images five times. Is there any shortcut?
• In the reviews section, I had to manually adjust each individual review margin top and bottom to set them into place (gradually descending). Can I use some flexbox tricks to achieve this in a more structured way?
• I couldn't reduce the size of the rounded image although I tried to set width, min-width, max-width etc. Nothing seemed to work. I wonder why. Thanks in advance for all your valuable insights and suggestions.

I tried mobile first approach for the first time and changed the markup a little bit from the previous one. I suppose the stats look better now. Any thoughts?

When I hover on my buttons, the respective div grows a bit to accommodate for the button border that appear on hover. Is there a way to apply inner border so that the divs don't grow?

This is my second attempt at making the card smaller than before and removing the media query since I think I don't need any. Can I fix the background image in place with respect to the card so that they don't move when screen size changes? Thanks!

I struggled a bit with aligning the music logo and used a little hack of setting a negative margin on it to move it left. Any suggestion for a better way of doing that? And also, my typography looks a bit off I think. What do you think?