Product preview card

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted 5 months ago

  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 !

  Marked as helpful

  0

  ---

  

  Munib ahmad•190

  @MunibAhmad-devPosted 5 months ago

  Thank you very much for your suggestions. They really helped me a lot. Actually, I was facing those problems. Can I ask you one more thing? I use Flexbox every time. Is that okay?@beowulf1958

  0

  

  P

  beowulf1958•1,450

  @beowulf1958Posted 5 months ago

  @MunibAhmad-dev using flexbox every time is ok. Some people like flexbox, some like grid. It is up to you.

  Marked as helpful

  0
• 

  Grego•1,310

  @Grego14Posted 5 months ago

  👋 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! 😁

  Marked as helpful

  0

  ---

  

  Munib ahmad•190

  @MunibAhmad-devPosted 5 months ago

  Thank you very much for your suggestions. They really helped me a lot. Actually, I was facing those problems. Can I ask you one more thing? I use Flexbox every time. Is that okay?@Grego14

  0

  

  Grego•1,310

  @Grego14Posted 5 months ago

  @MunibAhmad-dev Yes, it's okay! Sometimes you'll need a grid and sometimes you'll need flexbox, that depends on what you want to build.

  Marked as helpful

  0