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

Results Summary Component

BK Madsenβ€’ 60

@MadsenBK

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


Does anyone have any tips on better matching the gradients to the original?

Is there a way to ensure you matching the over all size to original beyond guessing/estimating? Would the pro Figma files have this information?

I attempted to use the global color varriables in my CSS but after looking online I still could not figure out how to properly apply an oppacity to the base var color. I was attempting using -- rgba(var(--colorName), 0.8); -- but this would not apply the opacity. It may be hard now with seeing but if anyone has any tips for this I would apprecicate it.

Much thanks!

Community feedback

Kaushal21β€’ 180

@KaushalM-2103

Posted

Hello Madsen

Great job for completing the task!!!

  • I will suggest to add alt text in img tag as it make easy for others who use screen reader to the website to understand if the image didn't render as it give information about the image

  • it's a great practice to follow.

Happy Coding! πŸ‘

Marked as 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