QR code component

Hello,

Your solution is excellent - it has a simple HTML structure and styling, and looks great!

I can offer you some advice or alternative methods to style your CSS:

• To center an element, you can use either flex or grid. If you choose to use grid, it can be achieved in just two lines of code:

body {
    display: grid;
    place-items: center;
}

• If you know that all child elements have the 'text-align: center' property, you can set this property to their parent element. In this case, you can set this property to the main element and remove it from the p and h1 elements.".

main {
    // code ....
    text-align: center;
}

• For img element:
  • The default value for the height property is 'auto', so it can be omitted if you want to use the default value.
  • If you are not moving the element from its default position, using the 'position: relative' value is not necessary.

  img {
      width: 100%;
      border-radius: 10px;
  }
  

I hope my tips are helpful to you. Keep up the good work!

Elio Flores

The "Resources" (https://www.frontendmentor.io/resources) section of Frontend Mentor has a list of different resources to learn CSS and JS.