Stats Preview, using CSS Flexbox

Community feedback

• 

  Ahmed Faisal•5,095

  @afrussel

  Posted almost 4 years ago

  Good work. Nice try. Use the below code for image section.

  .img-mono {
      -webkit-filter: grayscale(100%);
      filter: grayscale(100);
      opacity: 0.8;
      mix-blend-mode: multiply;
  }
  

  31

  Marked as helpful
• 

  darryncodes•6,350

  @darryncodes

  Posted almost 4 years ago

  Hi Matthew,

  Great solution!

  It might be worth resolving your accessibility report as a good practice change <div class="container"> to <main class="container"> and <div class="attribution"> to <footer class="attribution">. Also have at least one <h1> in your design.

  All the best!

  11

  Marked as helpful
• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted almost 4 years ago

  Hey, great work on this one. You already have some feedbacks from others, but i'm just going to add some.

  • On your body tag, avoid using a fixed height: value vh property, on your case height: 98vh will limit your element's height based on the remaining viewport's height. If you inspect your layout in dev tools at the bottom, hover on the body tag, you will notice that it doesn't really captures the whole content like it should do. Instead, replace that with min-height: 100vh, this will expand the container if it needs to.
  • Remove the width: 100vw on the body tag, this creates a horizontal scrollbar.
  • The information about the company should have been wrapped inside a ul and li element, since those are list of information.
  • The text as well for the company information, using heading tags on those is not really great because it doesn't really add any more information. Better to just use a p tag on them, I am talking about the 10k+ elements.

  Aside from those, great work.

  01

  Marked as helpful