Product Preview Card Component using HTML/CSS only. SVG.

Hi @MuyiwaSaka 👋, good job completing this challenge! 🎉

I have some suggestions you might consider to improve your code:

• Use the <main> tag to wrap all the main content in your solution instead of using <div class="box"> to improve the accessibility of the website.

• Use <footer> instead of <div class="attribution">. The <footer> element contains authorship information.

• The alternative text must not contain hyphens, underscores, or the words "image", "picture" or "photo", because the image tag already provides enough information that it is an image.

• You are occupying too many <span>, meaning that everything has the same semantic meaning: everything is just text:

• It might be more efficient to use the <p> tag; the <p> element represents paragraph-level content, usually text:

<p>A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>

• You could use the <del> tag to display the old price:

<del class="oldprice">
   <span class="sr-only">Old price: </span>$169.99
</del>

Note that I added the <span> with the sr-only class to the del element, this will provide more information about what your old price is about. The sr-only class is a class that you can add to hide content visually but is only visible to screen-readers. More information here.

• Use an h1 tag for your solution. The <h1> element is the main heading on a webpage, also, there should only be one <h1> tag per page. Swap the <span class="productname" tag with <h1>.

Above all, the project is done well👏. I hope those tips will help you! 👍

Good job, and happy coding! 😁