QR-code-component

Community feedback

• 

  P

  Daniel 🛸•44,810

  @danielmrz-dev

  Posted over 1 year ago

  Hello @abdelali12345!

  Your project looks great!

  The way you used to center the card is correct. But if you want to try new ways to do it, here's another one:

  • You can apply this to the body (in order to work properly, you can't use position or margins):

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

  I also have three minor suggestions for you to improve your project:

  • The font-family used in this project is Outfit. You can check it on the style-guide file and import the font from Google Fonts.
  • If you add a box-shadow to the div.box it'll look even closer to the original design.
  • Consider replacing the tag div.box with the tag main.box. It won't change anything visually, but will make your HTML more semantic, since that's the main content on the page.

  I hope it helps!

  Other than those little details, my friend, you did an excelent job!

  11

  Marked as helpful
• 

  Jordan Herrera Vera•490

  @jordanheve

  Posted over 1 year ago

  Congratulations on completing the challenge! Your commitment to learning is commendable. Regarding centering elements within a document, I recommend using CSS properties like 'margin: auto' for block-level elements or 'text-align: center' for inline elements. Experimenting with flexbox or grid layouts can also provide more advanced centering options based on your specific requirements. You can center elements using flex like this

  .container {
    display: flex;
    justify-content: center; /* Center horizontally *
    align-items: center;  /* Center vertically */
    min-height: 100vh;/* Full viewport height */
  }
  

  Each element inside the .container will be centered. Keep up the fantastic work in your coding endeavors! . Keep coding and exploring new ways to enhance your skills

  11

  Marked as helpful