Skip to content
Submitted almost 2 years ago

Stats Preview

Bryan Roberts•280
@BryBry04
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

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•38,100
    @AdrianoEscarabotePosted almost 2 years ago

    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

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