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

@BryBry04

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


Is it best practice to have a section tag to identify the component?

How could I have gotten the proper color to overlay on top of the image to the right?

My alignment is not flexible and thus when the media query section came into account everything became out of alignment. How can I design for this better?

What is a proper naming convention for html id, class?

Community feedback

Adriano 34,090

@AdrianoEscarabote

Posted

Hi Bryan Roberts, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

The hero image has a color slightly different from the Figma design, if you want to match the color you can reach this using mix-blend-mode with mix-blend-mode: multiply;. The multiply will make the image blend the div background and the opacity will make the image less evident and improve the blend between image/purple div. See the code below:

img { 
    mix-blend-mode: multiply; 
    opacity: 0.8;
}

The rest is great!

I hope it helps... 👍

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