qr-code-component

The image is not showing because the path of the image does not exist. <img src="/images/image-qr-code.png" alt="image-qr-code" width="300" height="300"> this is what you have

<img src="image-qr-code.png" alt="image-qr-code" width="300" height="300"> you should change it to this.

Try not to style the image in the html file, do this in the css file. Remove the width and height.

body {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: hsl(217, 36%, 64%);
  font-family: Outfit;
  min-height: 100vh; /* add these two lines. this will help place the card in the middle of the page */
  justify-content: center;
}

.container {
  display: flex;
  align-content: center;
  flex-direction: column;
/*   margin-top: 7em; */ /* remove this line, this is not necessary */
  padding: 1em;
  background-color: white;
  border-radius: 1em;
  width:350px; /* change the width of the card to this */
}

/* remove whats commented out */
/*.card-img change this to just img */ img {
  display: block;
/* margin-left: auto; */
/* margin-right: auto; */
  width: 100%;
/* height: auto; */
}

Hi, the QR Code image is not visible. This is because your github repository doesn't contain a folder with the images. Seems you copied all the files into the main directory. To solve this you can either add the original images folder to your repository or you change src="/images/image-qr-code.png to src="/image-qr-code.png in your code.