Product preview card component

Hi Mathias,

A couple of quick suggestions that might improve your design:

The word PERFUME at the top can be made closer to the original design by adding the following CSS:

.css-t1nuxs {
	text-transform: uppercase;
	letter-spacing: 0.25em;
}

.css-t1nuxs span {
	font-family: Montserrat, sans-serif;
}

Change media query to ~1,100px - between about 500px and 1,100px the page is a bit distorted.

Add max-width to the container to limit it to about 1400px. Anything larger than that begins to add a lot of white space to the bottom of your Add to Cart button.

Hope this helps, let me know if you have any other questions!

• First of all, you should use the right colors. 🙃 Of course, you can add your own interpretation, but you should not go too far. Because when designing ui, I hope that it is already well thought out. 🎨
• Typography is bad. Some very big, some very small. ✍️
• It looks very strange if you set your screen to 600px width. When you increase the width above 3000px, the part of the component with the text stays too high. 💻
• "So this is my question, how improve the css in this exercise or how we can change to improve this" I can't believe you actually asked this question!? 😵‍💫 If I'm not mistaken, you made this work using the react framework. You should learn CSS even before JavaScript. You should already know that. You have to find out if your problem is not being able to get things done using react or using CSS. If it's CSS, you should leave react aside and start CSS again.

By the way, I'm a new developer too. It is not my intention to embarrass you. I just commented on your request as the end user. There is something for everyone to learn here.

If you want to take a look at my work, I leave a link here. 😛 https://rehberbey.github.io/Frontend-Mentor-Challenges/