QR Card Component | HTML and CSS

Hello there 👋 @eeakpan.

Good job on completing the challenge !

Your project looks really good!

I have suggestions about your code that might interest you.

Consider adding a min-height of 100vh to the body element so as to centralize your project.

body { 
  min-height: 100vh;
  align-items: center;
  display: flex;
  justify-content: center;
}

I hope it helps!

Other than that, great job!

Happy coding.

One of the best ways to center a card would be.

(html parent element) {
    display: flex;
    align-items: center;
    justify-contents: center;
}

For the justify-contents you need to make sure you have a height set for your parent container. This will center an item.

Another pointer if you want to move your tag to the bottom is:

.attributes {
    position: absolute;
    bottom: 0;
    width: 100%;
}

I do this just to move the attributes tag to the bottom of the page and out of my way.