Product

Hey there! 👋 Here are some suggestions to help improve your code:

• To not only improve your HTML code but to also identify the main content of you page, you will want to wrap your entire component inside the main element.

More Info:📚

MDN Main Element

• The only heading in this component, is the name of the perfume; “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a paragraph element.

• Currently, the old price (169.99) 🏷 is not being properly announced to screen readers. To fix this, you are going to wrap the the price in a del element and inside it you will add a span element with an sr-only class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.

More Info:📚

Del Element

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding!🎄🎁

Hi,

Very good effort. My only input would be to try to follow and match the design provided.

For your solution you have a few font differences to the design. Also as @Favour said, you can manipulate pictures etc. following her link. Myself I cut corners and just added both images into the HTML content and then used display property to flip flop between one or the other depending on my media screen queries.

As far as the button hover goes, there is a colour in the style guide, think it was something like 'very dark blue' that's what I used for my hover effect...

Solid effort though, first important thing in any development is to see the project through.

HEY AHMET!

I see that the mobile image was not used for the mobile design, to be able to use different images at different device widths, you will have to use the picture element, you can learn more about the picture element here

I also noticed that a hover effect for the button was not included, although the required color was not included in the style guide, what you want to do is give it a darker green.

If you look through the style guide, at the bottom, you will see the different links which directs you to where you can import the required fonts, because i see that they are not used.

HOPE I COULD BE OF HELP :)

HAPPY CODING!