Skip to content
Submitted about 1 year ago

HTML CSS solution with Responsive Design for Mobile and Desktop

Moriam Akter Swarna•10
@MoriamAkterSwarna
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

I have faced issues on making pixel-perfect website because I didn't have any figma file. In this area I am unsure. Gimme some best practices tips and tricks to do better in future.

Community feedback

  • Shadab Khan•130
    @bentekkuPosted about 1 year ago

    Your design looks good, however, here are some pointers:

    • The Design is not aligned center vertically, which could be done using,
    display: flex;
justify-content: center;
align-items: center;

    and yes, do give height of 100vh to the main parent, which could be the body element in your case.

    • The summary column elements are bit off color, which could be simply solved by changing the hsl to hsla, and adding 0.1 as the alpha for the hsla or tweak around till you see it fit. e.g.,
     hsl(210, 28, 32, 0.1 );

    Overall, you really nailed the design. Good work!

    Marked as helpful
    0
    Moriam Akter Swarna•10
    @MoriamAkterSwarnaPosted about 1 year ago

    @bentekku thanks for your feedback

    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