Product preview card component

Hey there!

In your code, you "hardcoded" some styling that could be applied in different situations in a real-world project. Specifically, I'm pointing out the 'PERFUME' text.

<p>P E R F U M E</p>

You explicitly made the text uppercase, and added spaces between the characters. It's an important skill in front-end development to be flexible with the styling. In a real-world situation you might have different categories:

1. Perfume
2. Accessory
3. Hat etc.. This approach would end up awkward for the user and the developer. My personal approach was to use the text-transform: uppercase property for this element. So, the case of the text in the code does not matter since at the end, the CSS will transform the text to uppercase. Secondly, you can use the letter-spacing: *value* property, which establishes this effect for you and gives you more control over the degree of spacing in the text.

This way, you can also improve readability of the code.

<p class="product">perfume</p>