Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR-Code-Component

P

@Zacharycampanelli

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@0xabdulkhaliq

Posted

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

@lwrncgmbn

Posted

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
Discord logo

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