product-preview-card-component-main - basic html and css

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello NEERAJ VERMA, congratulations for your new solution!

  Your product card is really good done, there's not much to say about it, but if you want to improve it a little bit more, you give it a better alignment with flexbox see the code below:

  body {
      min-height: 100vh;
      background-color: hsl(30, 38%, 92%);
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  Add semantic tags to replace the div with main for example and use the picture tag to manage the product image use it, <picture> to wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the html If you're not familiar with the picture tag you can look at the documentation to see how to set it:

  https://www.w3schools.com/tags/tag_picture.asp

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0