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: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

I have learned how to center a div vertically and horizontally.

See below to learn how to do that:

<div class="container">
  <div class="content">
    <!-- Your content here -->
  </div>
</div>

.container {
  display: flex;
  align-items: center; /* Vertical center alignment */
  justify-content: center; /* Horizontal center alignment */
  height: 100vh; /* Set the container height to full viewport height */
}

.content {
  /* Add styling to your content */
}

Useful resources

• Example resource 1 - This helped me for a lot of things. This is a AI chat bot and when we ask how to do a thing, it will tell us more clearly.

Author

• Website - Maleesha Pramud
• Frontend Mentor - @maleeshapramud2005
• Twitter - @LMpramudk