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

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

Since I am a beginner, this was an enjoyable task for me to do. I enjoyed my learning experience. I believe I was able to accomplish my task without any difficulty, or if you found anything wrong please let me know.

.body {
	background-color: hsl(212, 45%, 89%);
	font-size: 15px;
	font-family: 'Outfit', sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 4rem;
}
 img {
      max-height: 18rem;
      max-width: 18rem;
      margin: 2rem auto;
      border-radius: 5px;
      display: block;

    }

.main-Card {
      background-color: hsl(212, 45%, 89%);
      box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.1);
      width: 70%;
      padding: 0.9rem;
      margin-bottom: 1rem;

    }

Continued development

To clarify my concepts and track my learning process, I would complete more Frontend Mentor challenges

Useful resources

•w3Schools —— Best Ever free source to learn about HTML , CSS & JS. •FreeCodeCamp —— Good for begineers to start over

Author

• Frontend Mentor - @Nadeem