Frontend Mentor - QR code component solution

Screenshot

Screenshot of the solution for this challenge in desktop version and mobile version.

Links

• Solution URL: Git Repository Solution
• Live Site URL: Git Pages

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

In this first challenge I used a new resource that I had never used in my projects, which is @media screen and (max-width:). Which made it clearer to me how to make a website with fluid responsiveness that supports multiple screen sizes.

@media screen and (max-width: 768px) {
  .qr-card {
    width: 300px;
    height: 450px;
    border-radius: 22.5px;
  }

  .qr-code {
    height: 270px;
    width: 270px;
    border-radius: 15px;
  }

  .main-text {
    margin: 15px;
    font-size: 14pt;
  }
  .text-field {
    font-size: 10pt;
  }
}

If you want more help with writing markdown, we'd recommend checking out The Markdown Guide to learn more.

Note: Delete this note and the content within this section and replace with your own learnings.

Continued development

In future projects I want to further improve the responsiveness of my codes and make them cleaner and easier to read, in addition to using new technologies, libraries and Frameworks in my projects such as React, Tailwhind, Angular.

Author

• Website - Emerson
• Frontend Mentor - @Novicks