CSS HTML

Firstly, congratulations for complete the challenge! I would like to give some suggestions for imrove your code:

• You didn't use flexbox to positioning your elements, if you chose this it's okay, but if you don't know about I'll share this link to you: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ For example: you could align the main section with this: body{ width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center;

• To have better HTML code, you can use semantic HTML. Instead of using <div class="main" you can use <main> tag

sorry for my bad english

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

• To center you content to your page, add the following to your Body Element:

body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

• The Alt Tag Description for the image needs to be improved upon. You want to describe what the image is; it needs 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 only heading in this challenge is the name of the perfume, “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a Paragraph 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.

• Your "button" was created with the incorrect element. It should be created using the Button Element. So that when the user clicks on the button (with the help of JS) it should add the product to the cart.

• The button is missing the "shopping cart icon".

• A lot of the headaches and repeated properties can be be overcome by implementing a proper CSS Reset.

• Your content is not fully responsive. Here is a link to Google Developer’s site that will teach you how make it 100% responsive:

https://web.dev/learn/design/

Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.

https://www.joshwcomeau.com/css/custom-css-reset/

https://meyerweb.com/eric/tools/css/reset/

http://html5doctor.com/html-5-reset-stylesheet/

If you have any questions or need further clarification, let me know.

Happy Coding! 👻🎃