Submitted about 1 year ago

Results summary component

Akinyemi Habeeb Aremu• 150

@Akinyemi4

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

HTML
CSS

1newbie

View challenge

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-fndz

Posted about 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

Akinyemi Habeeb Aremu• 150

@Akinyemi4

Posted about 1 year ago

@anderson-fndz Thanks for the review.

Please log in to post a comment

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