Skip to content
Submitted over 3 years ago

QR Code Component Solution

Irving De León•20
@Irving2797
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Any feedback is welcomed and appreciated! :)

Code

Please log in to post a comment

Log in

Community feedback

  • Brendan Hyde•330
    @hyde-brendan

    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
  • Hexer•3,620
    @EmmanuelHexer

    Great job man. Keep it up

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