Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats Preview, using CSS Flexbox

@matthewohreluy

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I would appreciate any feedback.

Community feedback

Ahmed Faisal 5,095

@afrussel

Posted

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;
}

Marked as helpful

3

@matthewohreluy

Posted

@afrussel Thanks!

0
darryncodes 6,430

@darryncodes

Posted

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!

Marked as helpful

1

@matthewohreluy

Posted

@darryncodes Thanks! Okay I'll do it.

0

@pikapikamart

Posted

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.

Marked as helpful

0

@matthewohreluy

Posted

@pikamart Thanks for the feedback! Appreciate it.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord