Skip to content
Submitted over 2 years ago

QR Code Component Solution

Irving De León•20
@Irving2797
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Any feedback is welcomed and appreciated! :)

Community feedback

  • Brendan Hyde•330
    @hyde-brendanPosted over 2 years ago

    Hi! Great job completing this challenge! Some comments:

    • Using a % value on border-radius tends to be uneven on elements that aren't square; you can see on your <main> how the curve is stronger on the vertical side than the horizontal. Best to stick to an explicit px or em value for this case.
    • Instead of setting the vertical margin to 10%, you can center items vertically by placing the below CSS under your <body>:
    min-height: 100vh;
display: grid;
place-items: center;

    (Note you'll have to set position: absolute; on your .attribution element as well so the above works.)

    • To fix the Page should contain a level-one heading issue, change your #title element from <p> to <h1> (and adjust accordingly).
    • For next time, try playing around with box-shadow to get the slight shadow on the card!
    Marked as helpful
    2
    Irving De León•20
    @Irving2797Posted over 2 years ago

    @hyde-brendan thanks for the feedback. Definitely will implement these. Awesome advice!!

    0
  • Hexer•3,660
    @EmmanuelHexerPosted over 2 years ago

    Great job man. Keep it up

    1
    Irving De León•20
    @Irving2797Posted over 2 years ago

    @Phalcin Thank you!!

    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