product preview card component

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted 5 months ago

  Congratulations on completing the challenge. Your page looks good so far. Your html is very clean and readable, and your css very organized. That said, I have a few suggestions.

  First, your "container" class has both flex-direction: column and flex-direction: row. You should remove the first and keep the second.

  Next, it is good practice to keep the css DRY (don't repeat yourself). If you move font-family: Montserrat; font-weight: 500; to the body element, you can remove the other references to Montserrat. Similarly, since .productBrand and .price share common styles, you could combine the common styles and then style the differences:

  .productBrand, .price{
    font-size: 27px;
    font-weight: 700;
    font-family: Fraunces, sans-serif;
  }
  
  .productBrand{
      margin-left: 20px;
      line-height: 1;
      margin-bottom: 10px;
  }
  
  .price{
      color: var(--Dark_cyan);
      margin-left: 20px;
  }
  

  Lastly (this is being picky, but...) the line breaks in the h1 are awkward. "Eau De Parfum" is one word in french. Eau should be behind the last <br /> next to De Parfum.

  The next step is to make the page responsive. You will need to research ways of centering your content without using position: absolute. One way is to use flexbox, the other is to use grid. Check out other people's solution to this challenge to see what I mean.

  Hope this helps, and keep on coding.

  Marked as helpful

  1

  ---

  

  manarbooo•320

  @manarboooPosted 5 months ago

  I appreciate your encouragement and feedback I'll definitely consider your instructions , Thanks @beowulf1958

  0