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

responsive result summary

@dev-cass

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • It's quite difficult for me to copy colors
  • the spacing of components
  • how can I do better?

Community feedback

@climb512

Posted

Looks good!

You mentioned colors, so I have a couple suggestions that helped me:

-- You say "It's quite difficult for me to copy colors", so you definitely need a color picker. If you use Windows you can download "PowerToys" from Microsoft. I use the color picker and also the measurement tool all the time: https://learn.microsoft.com/en-us/windows/powertoys/color-picker

-- For this specific project you have the option of just adding another number to the hsl colors that they gave us which will alter the opacity. For instance, on the red "Reaction" section, use the given "hsl" color for the text, but change this to "hsla" and add an opacity below 1.0 for the lighter background, like this:

.reaction {
color: hsl(0, 100%, 67%); 
background-color: hsla(0, 100%, 67%, 0.07); /* 0.07 makes for a low opacity Red color) */
}

Hope this helps!

Marked as helpful

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