Skip to content
Submitted about 2 years ago

Responsive QR card using HTML & CSS

Mohamed Sayed•290
@msabdalaal
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

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    Hi @msabdalaal 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

    Here are some suggestions you might consider:

    With semantic tags:

    <body>
   <main class="card">
      . . .
   </main>
<body>
    • You can use relative file paths in your images, this can save future errors in your images:
    <img src="./images/image-qr-code.png" alt="qr code">

    More information.

    • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow any user with limited vision to change the text size in some browsers. Reference.

    I hope those tips will help you.

    Good job, and happy coding!

    2
    Mohamed Sayed•290
    @msabdalaalPosted about 2 years ago

    Hi @MelvinAguilar, thank you so much for the feedback, actually this was my first time trying Frontend Mentor, and I'm so happy I got feedback almost in no time, I will consider your notes they're really helpful, and thanks again ❤️😊

    edit: I did some changes to the design, I tried changing all the units to rem even the height of the card and the border radius, and I considered all the notes you've told me 😊

    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