Stats preview card component using html, css grid and flebox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one .The desktop layout seems great it is responsive and the mobile state looks great.

  Others already gave their feedbacks which is really nice, just going to add some suggestions:

  • On the body avoid using % or vh unit on the height as this is relative to the viewport if you are using on the body tag, this makes it's height limited. Use min-height: 100vh instead so that it will allow the element to expand.
  • Add an extra aria-hidden="true" on the img so that it will be completely hidden for all users along with its alt="'.
  • Your .details could have used ul since those are "list" of information about the company website rather than using p tag for every column of it.

  Aside from those, great work again on this one.

  Marked as helpful

  0

  ---

  

  Martha•510

  @Mtc-21Posted about 3 years ago

  @pikamart thank you very much, the truth is that I have always struggled with the height of the body and the html, it was the solution that I had found for now, with the next challenge I will implement the suggestions.

  1
• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted about 3 years ago

  Great work Martha on this challenge. Nicely done and responsive. For the overlay you can take a look at css blend modes as another option.

  Happy coding

  Marked as helpful

  0

  ---

  

  Martha•510

  @Mtc-21Posted about 3 years ago

  @ChamuMutezva thanks very much

  0
• 

  Carlos•1,110

  @Carlos-A-PPosted about 3 years ago

  Hey Martha, this looks really good and I like how it's responsive

  • Something I did a bit differently was instead of adding a ::before pseudo element to add another shape and change the opacity, I used background-blend mode and set my image as a background image:

  <div class="image"></div>

  .image {
      background-image: url(../images/image-header-desktop.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-blend-mode: soft-light;
      background-color: rgb(112, 51, 142);
  }
  

  Marked as helpful

  0

  ---

  

  Martha•510

  @Mtc-21Posted about 3 years ago

  @Carlos-A-P thanks very much

  0