Product Preview Card Component with HTML and CSS

Community feedback

• 

  Pradeep Saini•990

  @pradeeps4iniPosted about 2 years ago

  Hi, @Ax-cd. How are you?

  You've done an awesome job implementing the design.

  1. You can fix the image border angle turning into a right angle by removing the radius property from image and setting the overflow: hidden, property on the ".card" element. When you set overflow:hidden, the image overflowing from the corners of the card is hidden and the curved angle of the card is shown.

  2. In the CSS reset, you've already written "margin: 0;". You don't need it in this style declaration after that. body, h1, h2, h3, h4, h5, h6, p, figure, picture { margin: 0; }

  3. For the prices section, you've used <span>. You use <span> for the text when you don't have any other semantic element available. Instead of <span>, i'd use <li> element there.

  You've done a great job working with utilities. I like how how wrote your css.

  Marked as helpful

  0

  ---

  

  Ax-cd•310

  @Ax-cdPosted about 2 years ago

  Hi, @pradeeps4ini I'm doing just fine, I hope you too!

  The overflow: hidden hadn't cross my mind! It's much more easier to implement than what I had done. I also removed the margin: 0, and changed the <span> to <li> like you suggested.

  Thank you so much for the feedback!

  0