QR code component solution.

Hey,

First of all, I wanted to welcome you to Frontend Mentor and congratulate you on successfully completing your first challenge.

Let's start by reviewing your HTML. The general structure looks good.

Maybe I'm nitpicking here, but I think it would be great if you used the <div> element for the card itself and wrapped both text elements in their own <div> element, like in the example below:

<main>
   <div class="card">
      <img src="./assets/images/image-qr-code.png" alt="qr code" loading="lazy" />
      <div class="card-content">
        <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>
      </div>
   </div>
</main>

Here is a good resource of example card - w3school example card

Looking at the css..

I see that you missed the left and right padding in the text section, which is included in the Figma design file's "Text" component - view screenshot

The border-radius on the card should be 20px instead of 16px - view screenshot

The padding on the card should be 16px instead of 15px.

The card's image is currently 240px by 240px but in the design it is 288px by 288px

There are a lot of incorrect/missing values that are specific to this task and provided to us.

I think you need to pay more attention to the design system provided in the Figma files and maybe watch a Figma tutorial to see where to get all the values. This will ensure that all the challenges look as good as possible.

Overall, it is a good project, but I would recommend following the provided design system more closely to improve accuracy and consistency.

Hey great work buddy looks precisely like it the only small issue. i think is that the container for qr code and image itself was a little smaller than the figma dimentions but apart from that well done.

Also if u observer the heading under image and the text under heading align together at the ends but your text seems to take more width than heading. I dont think there are any major flaws just small ones keep it rolling.