QR Code Component using HTML & CSS

Community feedback

• 

  Erick Araújo•130

  @araujoerickPosted 11 months ago

  Hello! To keep the edges aligned I generally combine the padding, border-radius values of the inner element and the outer element. In your case I would do it like this:

  .container {
    background-color: var(--white);
    border-radius: 30px;
    padding: 15px;
    width: 300px;
  }
  
  .qr-img {
    border-radius: 15px;
  }
  

  Then just adjust the padding of the texts... Happy studying!

  Marked as helpful

  0

  ---

  

  Rafael•50

  @rafaelgonzales612Posted 11 months ago

  Thank you!

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello again, Rafael!

  Your solution looks great!

  I have a suggestion for improvement:

  • In order to make your HTML code more semantic, and since that is the main title of the screen, replace the <p> with <h1>. The p is recommended for paragraphs. For titles, we have the HTML headings. Here's a quick guide on how to use them:

  The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading. Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on.

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  0

  ---

  

  Rafael•50

  @rafaelgonzales612Posted 11 months ago

  Thank you!

  1