Skip to content
Submitted over 1 year ago

result summary

Yung Josh•20
@yungjosh234
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

This project was my very first challenge as a beginner which took me about 4 hours but by God's grace I found it amusing and quite interesting and now i'm more curious to find out how the rest challenges will be like. Thank you.

Community feedback

  • hitmorecode•6,680
    @hitmorecodePosted over 1 year ago

    Nice well done. Just a few tips

    • If you have an element with a class or id, when applying css you can target the class or id of that element directly. .section1 .result-title you can remove .section1 and just target .result-title directly. What you are doing is handy when you have elements without a class or id for example:
    <section class="section1">
    <p>something</p>
</section>
<section class="section2">
    <p>something</p>
</section>

    If you want to target only the <p> inside .section1 then you can do it like this .section1 p {}

    • If you add min-height: 100vh; on the body and apply flexbox, you can remove the margin on the container. Flexbox will place the card in the middle of the page. This is much better for responsiveness of the page.

    • When structuring your html, try to make a good habit of doing like this

    <body>
  <main>
    /* everything goes in here */
  </main>
</body>
    Marked as helpful
    0
  • nirglus•270
    @nirglusPosted over 1 year ago

    Hey, congratulations on you first challenge! I have a few tips to achive closer results:

    Firstly, I recommend you to read about linear-gradient property. With the linear gradiate you can achive the same backgrounds of the left side and the score circle. You also have the proper colors at the style-guide file.

    Secondly, try to add transparency to the summary blocks by using rgba colors. For example: rgba(255, 87, 87, 0.06) the forth parameter sets the transparency. It goes from 0 to 1, try to play it to match the perfect color.

    Keep up the work and good luck!

    Marked as helpful
    0
    Yung Josh•20
    @yungjosh234Posted over 1 year ago

    thank you very much for this tip@nirglus

    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