Product preview page using html and css

Community feedback

• 

  Joseph Cobbinah Ofori•60

  @joecobb

  Posted almost 3 years ago

  @nikhil149 That's a great first attempt! I just want to make few suggestions which will make your solution even better.

  1. You can add the following css to your to properly center your product-container. It will place the product-container right in the middle of the body.

  body{ justify-content: center; height: 100vh; }

  2. Usually all fonts and colors, et cetera used in the design are all in the style-guide.md file. If you view the file, you will realize that two fonts are used.

  • Family: Montserrat

  • Weights: 500, 700

  • Family: Fraunces

  • Weights: 700

  All the fonts can be found at fonts.google.com. For convenience sake I will put a link here which you include in the head of you document. It has all the two fonts.

  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:ital,wght@0,500;1,700&display=swap" rel="stylesheet">

  Use font-family: 'Fraunces', serif; for the bold title as well as the price. and Montserrat for all others.

  00

  Marked as helpful
• 

  Melad•220

  @melad99

  Posted almost 3 years ago

  First To center the page you can use this CSS properties for the main div for the card .class-name{

      position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%) ;
  

  }

  -then for the price, you should give it a color with CSS

  Also for the title, you can give it a width so it is like the design I hope that will help and I'm here for any questions

  00

  Marked as helpful