Product Preview Card

Hi @UFXtrendscalper ,

You can try using following:- https://necolas.github.io/normalize.css/

Go to this website, click download and you will see the stylesheet, save this stylesheet.

Now, whenever you build a project, prefer adding this stylesheet in your markup, then add your custom stylesheets.

Normalize.css makes browsers render all elements more consistently and in line with modern standards.

Hope this helps !

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have a suggestion regarding your code that I believe will be of great interest to you.

HTML 🏷️:

• This solution contains some minor semantic issues which may cause lack accessibility

• The <p>PERFUME</p>, must want to be changed to normal case like Perfume

• Providing uppercase letter to them is not a good practice and the screen reader will read it as letter by letter like P, E, R etc.

• Don't worry we can use text-transform: uppercase to transform the letter and letter-spacing: 1rem for the text Perfume

• And another thing that the old price is not being properly announced, you have used h3 element for that (<h3>$169.99</h3>).

• Actually there's a native html element which comes handy in these situations. it is del element

• So you can use like this <del>$169.99</del>

• These are the tips which improves the accessibility in real world situations.

• If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

good work