css flex

Community feedback

• 

  moonji-spoonji•230

  @moonji-spoonjiPosted 2 months ago

  It appears that your solution is larger than the original but not by much so great job on that!

  Here are some differences I notice from the first look at it:

  1. The name of the perfume spans over 2 lines rather than two, which may be due to a smaller font size or bigger card size.
  2. The paragraph with the description is quite dense and would need a larger line-height.
  3. The button's corners are not rounded, so applying a border-radius of a few pixels will help fix that.
  4. The smaller, grayed out price is does not have a line through but that can be easily fixed by writing this: text-decoration: line-through;

  With your code, one thing I would add to your HTML is the <main> landmark to contain everything but the <footer> element. This makes it more accessible to users. With your CSS, I would suggest the following:

  • use rem for font-size
  • use percentage or a non-unit for line-height
  • and use em for letter-spacing

  Great job overall! Make sure to come back to these older challenges and improve them when you learn more!

  0