Frontend-Mentor-Product-preview-card-component

Community feedback

• 

  Tomek Wojak•290

  @TomekWojakPosted 1 day ago

  Hello, Really nice job! I have one, I think, usefull suggestion for you. Use object fit: cover; directly for your img. Thanks to it, it will stretch proportionally which will make it look better.

  1

  ---

  

  Moundjid Machghour•70

  @PxMachPosted 1 day ago

  @TomekWojak Thanks

  0
• 

  Kuvashnee Naidoo•370

  @KuvashneeNaidooPosted 1 day ago

  Hi @PxMach

  You did very well creating the product preview card! It includes most of the key elements of the design 👏👏👏

  There is one aspect that I noticed: Based on the design provided, the <h1>Gabrielle Essence Eau De Parfum</h1> and <p class="reduction">$149.99</p> should have the font-family "Fraunces"(https://fonts.google.com/specimen/Fraunces) but this is not reflecting on the page.

  You can import the "Fraunces" font into your stylesheet: @import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600&display=swap");

  You can then apply the "Fraunces" font-family to the <h1> and <p class="reduction"> elements such as:

  h1, .reduction {
     font-family: 'Fraunces', serif;
  }
  

  This is just something to try to make the different fonts stand out a bit more and to align more closely with the original design.

  Otherwise, excellent effort!🚀🚀🚀

  Happy coding :)

  1

  ---

  

  Moundjid Machghour•70

  @PxMachPosted 1 day ago

  @KuvashneeNaidoo Thanks

  0