Skip to content
Submitted over 1 year ago

CSS Flex, HTML semántico, variables CSS,

ELU•10
@ciberelu
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

  1. I found difficult to make the gradient.
  2. The circle

Community feedback

  • Rino•340
    @Rhinozer0sPosted over 1 year ago

    Hi @ELU,

    your solution looks great! I have some recommendations for you.

    Centering

    You should remove the width, margin and padding of your <body>. The body should always be on width: 100% (which is the standard for block-elements). Use this to center your main-section:

    body{
display: grid;
place-content: center;}

    Aspect-ratio

    Instead of setting a width and a heigh´t, you could use use aspect-ratio property. Use this in combination with the width of your element and the height will always increase proportionally.

    width: 200px;
aspect-ratio: 1 / 1;

    In addition your sould use responsive untis like rem or em for building your website. Here you can read more about css units: https://www.w3schools.com/css/css_units.asp

    i hope you find this helpfull 🤝

    Marked as helpful
    0
    ELU•10
    @cibereluPosted over 1 year ago

    @Rhinozer0s thanks for the recomendation i am going to do the changes

    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