Submitted over 1 year ago

Results summary component challenge

Ajibola• 10

@Ajibola1537

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

This is a solution for...

Results summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

All feedbacks are welcome Thank you

Community feedback

_nehal💎• 6,710

@NehalSahu8055

Posted over 1 year ago

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

Remove paddings & margins from the body and .first as this will not dynamically center the card.
To properly center the container.
USING FLEXBOX

body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

USING GRID

body{
min-height: 100vh;
display: grid;
place-items: center;
}

Use Semantics for the proper design of your code.

<body>
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
wrap up .attribution div inside footer.
</body>

Use responsive units(rem, em, %) from next project to increase responsiveness. Explore respective use cases on google.

link.

Use max-width instead of width to make your design responsive.
Use cursor: pointer on the button for user-friendliness.
Don't give fixed height to your cards.

I hope you find this helpful.

Happy coding😄

Marked as helpful

Ajibola• 10

@Ajibola1537

Posted over 1 year ago

@NehalSahu8055 thank you so much

Rino• 340

@Rhinozer0s

Posted over 1 year ago

Hey 🫡

i have some suggestions for this.

Use another container to bundle your two divs together. Specially in this case i would make sense to use the semantic <main>-element. Define your grid-settings (the two colums) here.

Add this to the body the make place your main-container in the center of the browser.

body{
width: 100%;
min-height: 100vh;
display: Grid;
place-content: center;
}

In addition you should add the fonts to the header of your html:

<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700;800&display=swap" rel="stylesheet">

now you can define the font-familiy with : font-family: 'Hanken Grotesk', sans-serif; and the font weights (500, 700 or 800) for your elements.

Let me now if there are any other questions.

I hope you find this helpfull.🤝

Ajibola• 10

@Ajibola1537

Posted over 1 year ago

@Rhinozer0s Thank you so much

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