Product-preview-card-component -UI

Community feedback

• 

  Neeraj Verma•70

  @neeraj-verma-20Posted about 2 years ago

  ** 👋 Hello yağız, congratulations for your new solution! **

  ✔ Check Points:

  A. Button - You can add flex in button for similar look.

  button {
      background-color: hsl(158, 36%, 37%);
      border: none;
      width: 200px;
      height: 40px;
      color: white;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  B. Button svg : You should also add margin right to svg to give space between the svg and text.

  margin-right: 10px;
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Illyaas•700

  @Illyaas4ShowPosted about 2 years ago

  Hi! Welcome to the community!

  This is an amazing approach, it is almost identical. Well done!

  • Document should have one main landmark - Your page should have one and only one <main> tag to help screen readers navigate the page.You can wrap your card in a main tag.
  • Page should contain a level-one heading - Your page should have one and only one <h1> tag to help screen readers navigate the page. You can put title in a <h1> tag.
  • You should increase the font-weight of the cost text. You should also increase the padding slightly, both to make it look more like the design.
  • I see that you used margin to center the div, I think you should use flex-box as it is a lot easier and works a lot better. Like this:

  body {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
  }
  

  I hope this helps! Happy coding!

  Marked as helpful

  0