Skip to content
Submitted over 2 years ago

QR Code Component solution using html and css

baxtro•20
@baxtro
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

Here's my first completed project on Front End Mentor! I'm pretty happy with the outcome visually, but it took me awhile to get there. I am pretty new to html and css so any feedback on the code, or lack thereof is much appreciated. Just figuring out how to make the background shape and get everything inside and centered was pretty challenging!

Community feedback

  • Account deleted

    Hi baxtro 👋 Congrats on completing the challenge!

    There was an easier way to center the card component with flexbox. If you are not familiar with it, here's the code you can add and center it in a few seconds.

    Add this declaration block to the main element (or whichever element is the parent to the card component):

    min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;

    This is how you could center the element inside the parent container from now on. Just adjust the height as needed.

    Other than that, looks good! Keep up the good work!

    I hope this was helpful.

    Happy coding.

    Marked as helpful
    0
    baxtro•20
    @baxtroPosted over 2 years ago

    @kom42ec Thanks for the feedback, I'll give your suggestion a try tomorrow!

    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