Skip to content
Submitted over 2 years ago

HTML, CSS, Flex

Nikhil Patel•70
@PatelNikhil-08
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

  • Travolgi 🍕•31,400
    @denieldenPosted over 2 years ago

    Hi Nikhil, good job! I took some time to look at your code and have some ideas for improving it:

    • add main tag and wrap the card for improve the Accessibility
    • remove all margin from .container class because with flex they are superfluous
    • add justify-content: center flexbox property to the body for center the card horizontally
    • to make it look as close to the design as possible add padding-inline: 1rem to p of card
    • instead of using px try to use relative units of measurement -> read here

    Overall you did well 😉

    Hope this help and happy coding!

    0
    Nikhil Patel•70
    @PatelNikhil-08Posted over 2 years ago

    @denielden Really appreciated for your time to check my solution I will make above changes and will send the link here. Again I am glad that you checked my solution and gave me valuable feedback.

    1
  • vcodey•270
    @v-codeyPosted over 2 years ago

    Hello @PatelNikhil-08 ! Congratulations on completing this challenge

    There are a few suggestions I would like to give you

    • Add main tag inside body
    • Use padding where needed, instead of every sides(i.e. top, bottom, left, right) you can also use combo like top-bottom or left-right to make it more closer to provided design.
    • Its better not to remove the default code provided by frontend mentor like you have removed the link the a tag . Do not remove it, rather replace the div with footer
    • the body of the html should be like
    <body>
   <main class="container"> 
        <-- Your code -->
   </main>
<footer class="attribution">
   Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
   Coded by <a href="Your profile link"> your name </a>.
 </footer>
</body>

    I hope it was helpful, keep learning happy coding.

    0
    Nikhil Patel•70
    @PatelNikhil-08Posted over 2 years ago

    @v-codey I am glad that you gave me some valuable feedback will be working on it. Again really appreciated for your time to check me solution.

    1

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