QR code component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Masrafi, congratulations for your new solution!

  Here's some tips and corrections for you solution:

  When you download the project files there’s a file called style-guide.md where you can find information such as hsl color codes and the font-size for the headings.

  This is the color for the paragraph

  .container p {
      text-align: center;
      color: hsl(212deg 30% 40%);
  }
  

  Give the correct size for the container with max-width: 320px

  .container {
      max-width: 320px;
      background-color: var(--White);
      border-radius: 0.55rem;
      padding: 1.25rem;
  }
  

  Align the container giving min-height: 100vh

  body {
      display: flex;
      font-family: 'Outfit', sans-serif;
      font-size: 15px;
      background-color: var(--Light-gray);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin: 1.25rem;
      min-height: 100vh;
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hey Masrafi, You did a great job 😉

  Let me give you some little tips for optimizing your code:

  • add main tag and wrap the card for improve the Accessibility
  • to make it look as close to the design as possible add width: 20rem to .container class
  • add descriptive text in the alt attribute of the images
  • remove all margin from body
  • add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container

  Hope this help! Happy coding 😁

  Marked as helpful

  0