Skip to content
Submitted about 2 years ago

QR code component

Manu Jayakumar•70
@manujayakumar
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

Hello Frontend Mentor community!....

I have a completed another small project and this is my solution for the QR code component.

Feel free to leave any feedback!

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello Manu Jayakumar, congratulations for your new solution!

    🎯 Your solution its almost done and I’ve some tips to help you to improve it:

    Your solution is fine, the QR Code component design its done, even the code is working, but I can say you that you can reduce the amount of <div> used, for this challenge all you need is a single block to hold all the content (img, h1 and p). You can keep everything inside <main> and remove all the other additional divs that unnecessary in this case.

    Your HTML STRUCTURE:

    <main class="container">
      <div class="heroImg">
        <figure>
          <img src="./images/image-qr-code.png" alt="qr code">
        </figure>
      </div>
      <section class="heroInfo">
        <h1 class="heading">
          Improve your front-end skills by building projects
        </h1>
        <p>
          Scan the QR code to visit Frontend Mentor and take your coding skills
          to the next level
        </p>
      </section>
    </main>

    THE HTML STRUCTURE CLEANED:

    <body>
<main>
 <img src="./images/image-qr-code.png" alt="Qr Code Image" >
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> 
</main>
</body>

    2.The value you’ve used for the shadow make it too much dark and strong, to create a smooth shadow you need to give it less opacity and more blur try this value for example:5px 5px 12px 3px rgb(0 0 0 / 4%);Create better box-shadow` using this online tool: https://www.cssmatic.com/box-shadow

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0
    Manu Jayakumar•70
    @manujayakumarPosted about 2 years ago

    Hey @correlucas, I appreciate your time and efforts that taken to analysis my code. I will take your advice and apply it in my future projects. Thank you!!

    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