Product Preview Card Component using HTML5 CSS3

Community feedback

• 

  Anna•1,070

  @annaindistressPosted almost 2 years ago

  I would advise you to add a border-radius to the container element. This will make it easier to find and change this value in one place if, for some reason in the future, it needs to be changed.

  .container {
      border-radius: 0.625rem;
      overflow: hidden; /* this hides image corners */
  }
  

  I also wanted to suggest taking another look at using the article tag for just the container element. According to its specifications, it's meant to represent content that can be taken from this page and placed somewhere else without losing its meaning. So, while the whole card could be an article, it might be better to use div for each individual part

  Marked as helpful

  0

  ---

  

  Ubaka•130

  @NgeneubakaPosted almost 2 years ago

  @annaindistress I am most grateful for this insight

  0
• 

  Eileen dangelo•1,600

  @EileenpkPosted almost 2 years ago

  Hi Ubaka, your project looks good, As Anna said the HTML tags should be changed a little, but you are using semantic tags and that is great. I would replace all the <article> tags with <section> tags.

  To answer your question regarding how to apply the border-top-left-radius, you can target each side of an element's border-radius individually by calling it out specifically.

  .container {
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
  }
  

  Hope you found this helpful!

  • Let's connect on LinkedIn! - @Eileenpk

  0