Stats preview card component

Community feedback

• 

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted almost 2 years ago

  Hello bociKond! Congratulation on completing this challenge! If I may, I could give you some solutions to the issues (accessibility and HTML)

  • Replace <section class="card"> for a <main class="card"> tag this will get rip of the accesibiltiy issues
  • Replace <article class="card__text"> for a <section class="card__text">, new the h1 issue will be fix.
  • You could replace the <div class="stats"> for a <ul class="stats"> and each <article class="stat"> tag in it replaces them for a <li class="stat">, you may need to remove the default style of a list but you will get a more semantic HTML.

  In regards to the image color blending, I use these CSS rules (adapted to your markup)

  .img {
    background-color: var(--clr-softviolet); /* hsl(277, 64%, 61%) */
    background-blend-mode: multiply;
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .img img {
    display: block;
    mix-blend-mode: multiply;
    opacity: 0.8;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  

  Other than that, you may need to try various font sizes regarding the title and the stats.

  Marked as helpful

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <section class="card"> with the main tag to fix the accessibility issue.

  For the color of the image, give .img a background-color of soft-violet, add mix-blend-mode: multiply; and opacity of 0.8 to the img.

  .img{
  background-color: hsl()
  }
  img{
  width:100%;
  height:100%
  mix-blend-mode: multiply;
  opacity: 0.8;
  }
  

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1
• 

  Divine Obeten•2,415

  @Deevyn9Posted almost 2 years ago

  Hi Bocikond, congrats on completing this solution, your solution looks really great, about the responsiveness, you did pretty good, However, you'll want to make the container take a column flex direction from 850px because that is the width where the image begins to shrink.

  I hope you find this helpful.

  Happy Coding! 🎉

  Marked as helpful

  1