Product Preview Card

Community feedback

• 

  Varun Pandey•80

  @varunUk09Posted about 2 years ago

  good job i have few suggestions for you

  1. avoid use of H1 more than once there should be only one heading in a perticular section
  2. use picture element if you wanna switch between images in different divices refer:w3shool picture element
  3. <h2 class="pro-cat">P E R F U M E</h2> don't do like this , if you want more gap between letters use letter-spacing instead.
  4. <img src="images/icon-cart.svg" alt="cart-icon"> try to put svgs instead of using them in img tag because svg a vector images they form where there code puts in means if you just directly add svg code you will save time to load them as a image from server.

  5).pro-cat{ font-size: small; } wrap using <small></small> tag instead

  6).new-price{ color:hsl(158, 36%, 37%); }

  .old-price{ margin-bottom: 0; font-size: small; text-decoration: line-through; }

  button{ width:100%; padding:1rem; background-color: hsl(158, 36%, 37%); }

  here you have used hsl(158,36%,37%) 2times , follow DRY principle always use css variables if you think you will use that property more than 1 im giving you an example below: :root{ --color-1:hsl(158,36%,37%); }

  now i can use var(--color-1) where i want this color and if in future client wants to change this color to different color so it will be simple easy for me to do this i will just change this color in root part. i hope all suggestions will help you and learn about flex please

  Marked as helpful

  0
• 

  Andrei•110

  @retiens123Posted about 2 years ago

  You can also use 'border-radius: 15px 50px 30px 5px' - first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner)

  You can see more here: https://www.w3schools.com/cssref/css3_pr_border-radius.php

  I hope can help you that and to make you faster to write!

  Marked as helpful

  0