Frontend Mentor - QR code component solution

This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

Screenshot

Links

• Solution URL: (https://github.com/lalwanichiragsocial3/frontendMentor-QRCode)
• Live Site URL: (https://lalwanichiragsocial3.github.io/frontendMentor-QRCode/)

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

At some point, I was confused with the font-size mention in style guide which was set to 15px, but I saw different font-size inside the card, therefore, I setup that as base size for body element.

body{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 15px;
	font-family: 'Outfit', sans-serif;
}

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

Author

• Website - Chirag Lalwani
• Frontend Mentor - @yourusername

Acknowledgments

At some point, I was confused with the card width and height, so for reference, I had looked into this github profile: (https://github.com/Arekkusu17/QR-code-component-challenge)