Skip to content
Submitted 10 months ago

Results summary component using HTML and CSS

a-fox-on-the-moon•170
@a-fox-on-the-moon
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi !

I tried my best with this challenge.

I struggled a LOT with the gradient and the circle. I don't think I coded this the right way. I used icons from "Font Awsome" for the Summary part because I didn't saw that they were in the starter pack x(

I did the desktop style first because it's easier for me and I added a few media queries to make it approximately responsive.

I have some problems when the page is translated in another language (french), the first score is written "80 / 100_" and all in bold, don't know why. Is there something I can add in the head of the HTML to correct this ?

I'd love some feedbacks on this code because I think it is really far from being good.

Thanks a lot in advance :)

Community feedback

  • Daniel 🛸•44,270
    @danielmrz-devPosted 10 months ago

    Hello @a-fox-on-the-moon!

    Your solution looks great!

    I have just one suggestion:

    • Since the right section and the body background are both white, I suggest you to add a box-shadow to the card, so they won't look the same.

    And if yhou do that, it'll be even closer to the original design.

    Other than that, you did an excellent job!

    I hope it helps!

    Marked as helpful
    0
  • a-fox-on-the-moon•170
    @a-fox-on-the-moonPosted 10 months ago

    Hi @danielmrz-dev !

    I did a box-shadow at first but then the result wasn't good, the right section doesn't go "under" the left section, you can see the top left and bottom left corners and it isn't like this on the original design.

    I wanted to put a screenshot here to show you but it doesn't work so I updated the code on GitHub if you can look at it

    Thanks for your feedback !

    1

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