Qr-component

Hi Mariam,

You've a great solution here but there are some tags you can consider changing in the html, for example, the div with bold class should be wrapped with an h1, you can also replace the first div with an main tag. After that img tag must have alternate text GET EXPLAINED HERE so u should update

<img src="images/image-qr-code.png">

to

<img src="images/image-qr-code.png" alt="qr-code-image">

Hope it helps, happy coding 👋

👾Hello Mariam Ayman, congratulations for your new solution!

Fix the image and the container responsiveness by adding max-width in place of width for the container and for the image add display: block and max-width: 100% to make the image follow the container size:

.con {
    max-width: 215px;
    height: 350px;
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color: hsl(0, 0%, 100%);
    border-radius: 15px;
}

img {
    display: block;
    max-width: 100%;
    border-radius: inherit;
}

Note that there's no need to use height here, because since you set a height for an element, this means that this element will grow until a certain point and after that the inner content (as texts or images) will start to pop out the element due its fixed height, so isn't necessary to set the height the container height comes from the elements, its paddings and height.

👋 I hope this helps you and happy coding!