html , css

Hey @TornikeTt, some suggestions to improve you code:

• The Alt Tag Description for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.

• This challenges requires the use of two images 🎑 for different breakpoints. The Picture Element will facilitate this.

Here is an example of how it works: EXAMPLE

Syntax:

  <picture>
    <source media="(min-width: )" srcset="">
    <img src="" alt="">
  </picture>

More Info:

https://www.w3schools.com/html/html_images_picture.asp

https://web.dev/learn/design/picture-element/

• The old price 🏷 is not being announced properly to screen readers. You want to wrap it in a Del Element and include a sr-only text explaining that this is the old price.

• On the price container use display: flex along with align-items: center to have them perfectly aligned like the FEM example.

• Implement a Mobile First approach 📱 > 🖥

With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.

Happy Coding! 👻🎃

Hello @TornikeTt,

Your solution look good on desktop but when you get the to mobile devices it doesn't look good. I suggest you start with the mobile-first and then do the desktop by adding media queries.

• Every document should have one landmark like a <main>
• More information about HTML Semantic Elements

I hope this helps you