Skip to content
Submitted 12 months ago

Results Summary Component Solution Using HTML & CSS

Kyle•50
@kylecloete
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

The hardest part about this challenge was creating the circle and getting the elements to be perfectly aligned in the center, I do feel like there is a more simple solution to be honest I don't know what I did but it worked, if you could provide me with better solutions to centering the elements in the circle it would be appreciated

Community feedback

  • Bryan Li•3,530
    @Zy8712Posted 12 months ago

    Your site looks pretty close to the original design. Good job!

    Some things I feel you should change are:

    • how you centered your component. Instead of using margin to shift it down, consider using flexbox. So it could look something like this:
    body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    • adding <main> tags to wrap around your page's main content for accessibility purposes

    Hope you find this feedback useful 👍

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