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 Flexbox, Mobile-first Workflow

@MorbitDemon

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 had two difficulties in this challange:
  1. Make the flex items equal width (img and item-content), i ended up having to use the flexproperty but i dont know if that is the best option.
  2. Adding the color overlay, i watched a video that teached me how to do it.

Any feedback is appreciated.

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Hello Deren D, Congratulations on completing this challenge!

Your solution its almost done and I’ve some tips to help you to improve it:

1.It is not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again. Even if you don't have more than one element with that style right now, it might come later.

2.One alternative to the overlay effect is to use mix-blend-mode instead of this:

#color-overlay {
    width: 100%;
    height: 100%;
    background: var(--color-primary-300);
    opacity: .6;
    z-index: 1;
    position: absolute;
}

Import the image using <img> and apply:

img {
mix-blend-mode: multiply;
opacity: 75%;}

✌️ I hope this helps you and happy coding!

Marked as helpful

0

@MorbitDemon

Posted

@correlucas Thank you for the tips Lucas!! this is really helpful :)

1

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