Skip to content
Submitted over 1 year ago

QR-Code-Component

Zachary Campanelli•390
@Zacharycampanelli
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

I wasn't sure if I should center the card no matter the page width, but being provided two very different sizes for screen layouts I just created two options/placements. If it would have been better to keep the element centered no matter the width I would change it to do so, but was a little unclear on this

Community feedback

  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted over 1 year ago

    Hello there 👋. Good job on completing the challenge !

    • I have some suggestions about your code that might interest you.

    HTML 🏷️:

    • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.
    • The div with class card want to be a main element
    • The div with class attibution want to be a footer element

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy coding!

    0
  • Lawrence•180
    @lwrncgmbnPosted over 1 year ago

    You can use

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

    To put the entire content in the center. Also you need to start at least using <h1> element first, And you can also use <div id="container"> or use <main>, and then put all the other elements inside.

    Happy Coding 😁

    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