Skip to content
Submitted over 1 year ago

Results summary component challenge

Ajibola•10
@Ajibola1537
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

All feedbacks are welcome Thank you

Community feedback

  • _nehal💎•6,710
    @NehalSahu8055Posted 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
    0
    Ajibola•10
    @Ajibola1537Posted over 1 year ago

    @NehalSahu8055 thank you so much

    1
  • Rino•340
    @Rhinozer0sPosted 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.🤝

    0
    Ajibola•10
    @Ajibola1537Posted over 1 year ago

    @Rhinozer0s Thank you so much

    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