Product Preview Card: Perfume Edition

Hello Swati, congratulations on completing your challenge, it looks great.

I'd like to give you some suggestions to make it a bit closer to the proposed design. You can consider reducing the min-height of .part-1 to around 460px. This will make it misaligned, so to center it, you can use display: flex;, justify-content:center;, and align-items: center; on the body, and then add a height: 100vh. With this, your card will be perfectly centered. You can also remove the margin from your .container.

As for your HTML, it's well-structured, but it lacks some semantics, which are extremely important for SEO and accessibility. Here are some tags that can be changed:

• <div class="container"> could be changed to <main> because it contains the main content of the page.
• <div class="part-1">: Here, you could use a <figure>, as the content of this part is an illustration.
• <div class="part-2">: Here, you could use an <article>, as the content here is self-explanatory and independent of the rest of the page.
• <div class="btn">: Here, you could use the <button> tag itself, as it makes more sense to be a button rather than a <div>. But if you want to keep the div, you can add a role="button" attribute to make it more accessible to screen readers.

Regarding accessibility, I noticed that you used two heading tags <h1>, which can result in accessibility errors. We should only have one <h1>, so it would be more appropriate to replace the price section with <h2> or <span>, as it makes more sense to be a <span> than a subheading (h2).

Again, congratulations! Keep practicing and improving your skill. If you have any questions, please ask below and I will try to help in the best possible way.