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

• Frontend Mentor - QR code component solution
  • Table of contents
  • Overview
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Useful resources
  • Author
  • Acknowledgments

Overview

Screenshot

The goal of this challenge was to recreate a QR code component using HTML and CSS, as shown in the screenshot below.

You can see the result of my version below:

Links

• Solution URL: Repo solution URL
• Live Site URL: QR Component live site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Flexbox
• CSS Grid

What I learned

1. Decrease in opacity to soften shadows.

main{
  box-shadow: 5px 10px 20px rgba(104, 119, 141, 0.15);
}

2. Centering elements using CSS Flexbox.

.container-main{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

3. Extra container used to organize layout structure and place the footer.

<div class="container-main">
  <main>
    ...
  </main>
</div>

Useful resources

• Outfit Font
• User Circles Set - juicy-fish - Freepik

Author

• Website - Gillian Oliveira
• Frontend Mentor - @lia-oliveira

Acknowledgments

Thank you very much to the Frontend Mentor team for this challenge! I was looking for a project to improve my skills, and this was a great start. Thanks again, and see you in the next challenge!

Many thanks to user A_boo_bae for the valuable feedback after I published this project. I was able to implement most of the suggestions.