Product Preview Card Component Using HTML and CSS

Hi @Durgathev, how are you?

Welcome to the front-end mentor community. I really liked the result of your project, but I have some tips that I think you will like:

1- Document should have one main landmark, you could have put all the content inside the main tag click here

2- Page should contain a level-one heading, you could have changed p.heading to h1 click here

I noticed that you used position: absolute; to center the content, always prioritize using flex-box or grid

body { display: flex; align-items: center; flex-direction: column; justify-content: center; }

.main { /* position: absolute; */ /* top: 50%; */ /* left: 50%; */ /* transform: translate(-50%, -50%); */ }

Commented codes have been removed! Hope it helps... 👍

👾Hello DurgaDevi, congratulations for your new solution!

👏 Great start and great first solution! You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code:

1.Add the correct font for the heading:

.paragraph .heading {
    font-family: Fraunces;
    letter-spacing: 2px;
    font-size: 30px;
    font-weight: 700;
    color: var(--dark_blue);
}

2.Replace the paragraph p you've used for the heading and use <h1> to wrap it.Every page needs a main heading, the <h1> to show which is the most important heading. You need to increase the headings by one level, like h1, h2, h3 to show the titles hierarchy. Remember that you cannot have more than one h1 heading.

✌️ I hope this helps you and happy coding!