Product preview page using html and css

@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; }

1. 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,[email protected],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.

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