Product Preview Card Component Using HTML and CSS

Community feedback

• 

  Adriano•38,120

  @AdrianoEscarabotePosted about 2 years ago

  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... 👍

  Marked as helpful

  1

  ---

  

  DurgaDevi Shanmugam•70

  @DurgathevPosted about 2 years ago

  Hey @AdrianoEscarabote, I'm doing good. thanks. Hope you are doing well.

  Thanks for your valuable feedback. It's worthwhile and I'll practice it in future projects.

  I'd love to hear you again! 😊

  0

  

  Adriano•38,120

  @AdrianoEscarabotePosted about 2 years ago

  @Durgathev I'm glad you liked it! keep coding! 😊

  1
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾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!

  Marked as helpful

  0

  ---

  

  DurgaDevi Shanmugam•70

  @DurgathevPosted about 2 years ago

  Hello @correlucas, thanks for the valuable feedback. I'll correct it .

  I'd glad to hear you again. :)

  0