Responsive product preview card using HTML and CSS (media and flexbox)

Hello there 👋. Good job on completing the challenge !

Overall, the solution is well done. I can only give you a few small tips to consider in this challenge.

• Keep font size in relative units like em or rem, not vh (viewport height). Using vh for font size may cause inconsistent scaling on different screen sizes

• Avoid using many nested selectors (e.g.: main .section2 .perfume-description) in your CSS to maintain code simplicity, readability, and prevent specificity issues. Simply use: .perfume-description

• You can shorten the border-radius declaration using shorthand notation:

Your actual code:
‎ ‎ ‎ border-radius: 30px;
‎ ‎ ‎ border-bottom-right-radius: 0;
‎  ‎ ‎b‎order-bottom-left-radius: 0;

You can shorten it as follows:
‎ ‎ ‎ border-radius: 30px 30px 0 0;

‎ Format: border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

• Consider using a <button> element instead of a <div> with class "buttom". If an element has a pointer cursor and a hover effect, it indicates interactivity, commonly used for buttons, links, form fields, etc..

• Utilize header elements (e.g., <h1>, <h2>, etc.) to provide a hierarchical structure to your content, making it more accessible and helping search engines understand your page's organization.

• There's no need to enclose each element in a <div> unless it serves a specific purpose for styling or layout.

For more in-depth knowledge about semantic elements and HTML planning, you can read the article "How to plan your HTML: Product Preview Card" at https://fedmentor.dev/posts/html-plan-product-preview/.

Overall, the solution is very well executed. Good luck with your future coding endeavors

Happy coding!