Product preview card

Congratulations on completing this challenge. Your site has a unique look. I have a few suggestions.

First, if you declare your font-family in the 'body' selector rules, you need not declare it again as the whole document will then have the same font. This saves you five additional lines of code !

Next, to solve the letter spacing problem with the PERFUME element, add one line to the 'perfume' class rules:

      body {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 100vh;
        background-color: rgb(234, 239, 239);
     /* -----add font family here----- */
        font-family: sans-serif;
      }
      .perfume {
         padding-top: 25px;
        padding-left: 25px;
    /* -----space out the letters-----*/
        letter-spacing: 5px;
      }

As for the line striking out the original price, that is easiest to fix in the html using the <s></s> tag ('s' for strikethrough). The more serious issue is the use of h1 and h5 tags for the prices. There should only be one h1 tag on the page (for the title) and the other h2, h3, etc should be reserved for subheadings. That is to say, h1 and h5 have structural, semantic meaning and should not be used for styling; that is what CSS is for. Try this instead:

        <div class="price">
            <p class="price1">$149.99</p>
            <p class="price2"><s>$169.99</s></p>
        </div>

and style it

.price {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 35px;
  padding-left: 25px;
}
.price1 {
    color: green;
    font-size: 32px;
    font-weight: bold;
}
.price2 {
  font-size: 14px;
}

Hope this helps. Keep on coding !

👋 Hello! 🎉 Congratulations on completing the challenge! 🎉

To achieve the line in the middle of the text you must use the property text-decoration-line with the value line-through, but you can also use the shorthand of text-decoration.

You're using divs elements unnecessarily to create line breaks in text:

  <div class="h12">Essence Eau</div>
  <div class="h12">De Perfum</div>

You'd better use styles to achieve that... such as paddings or margins.

The fonts you should use are in the style-guide.md file that comes when you download the challenge.zip.

Don't use multiple h1 in your code.

For the text of the total price you can use a div or span element instead of an h5.

Use semantic elements, You are using a div element where you should use a button element (the add to cart element).

I hope this helps! 😁