Skip to content
Submitted over 1 year ago

Results summary component

Akinyemi Habeeb Aremu•150
@Akinyemi4
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

You may be able to help with my challenges, kindly help check them out. Thanks.

(1) I found it difficult to form the circle below the "76" in the design. I was able to get it using pseudo class (You can check it here:https://github.com/Akinyemi4/result-summary-component). Do you have a better solution?

(2) I was able to balance both sides of the design using lots of margins and paddings, i'm thinking using grid may be a better choice (though i'm yet to try it out), Can you do it a better way or recommend a better solution?

Community feedback

  • Anderson Fernandez•350
    @anderson-fndzPosted over 1 year ago
    • to make the circle
    .result-circle {
    width: 200px;
    height: 200px;
    background-image: linear-gradient(hsla(256, 72%, 46%, 1), hsla(241, 72%, 46%, 0));
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
    • to not use so much padding and margins it would be better to use only flexbox and adjust with justify-content and align-items
    • Hope this helps
    Marked as helpful
    0
    Akinyemi Habeeb Aremu•150
    @Akinyemi4Posted about 1 year ago

    @anderson-fndz Thanks for the review.

    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