Product preview card

Community feedback

• 

  Huy Phan•2,700

  @huyphan2210Posted 26 days ago

  Hi, @wpittman06,

  I reviewed your solution and have a few suggestions:

  CSS File Linking:

  You're linking font.css and boilerplate.css incorrectly, causing 404 - Not Found errors in DevTools. Since your style.css is located in the same folder, consider importing them like this:

  @import url("./global/fonts.css");
  @import url("./global/boilerplate.css");
  

  This should resolve the issue and display your layout as intended.

  min-height on body:

  I noticed you set min-height: calc(100vh - .1px) on the body. Why not use min-height: 100vh? Was there a specific reason for this adjustment?

  Semantic HTML Improvements:

  Consider using more semantic HTML elements to improve structure and accessibility:

  • Replace .main-Container with <main>.
  • Use <section> for .container-left and .container-right.
  • "Perfume" seems more like a label for the card (.main-Container) or possibly your top heading (<h1>). Consider researching how to use <label> properly.
  • Since the prices don't appear to be a list, avoid using <ul> and <li>. Instead, wrap them in a <section> and use <span> for individual prices.

  Hope this helps!

  0
• 

  tiedej2000•320

  @tiedej2000Posted 27 days ago

  making prices a list adds clutter, the button should not have the same bg color as the site. picture is also way to big. try to add a wrapper around the preview to scale down the whole thing.

  0