Skip to content
Submitted over 2 years ago

responsive score-card using CSS and HTML

dipak•380
@dipakpadule
A solution to the Results summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

updated! need feedback on gradient circle, best practice for centering circle and its content thank you in advance.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • P
    visualdennis•8,375
    @visualdenniss

    Regarding the score, with your current setup you can have it fixed with display: flex; flex-direction: column;

    e.g. :

    .sc-result h2 { text-align: center; color: var(--nc--white); font-size: 3rem; display: flex; flex-direction: column; }

    Also it looks like the button has a default border, which you might want to remove with border: none; so it looks even nicer and closer to the design. And as a best practice, add an cursor:pointer; for the button as well as an background-color change on hover to indicate interactivity to the user.

    Hope you find this feedback helpful!

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