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.

Overview
- Screenshot
- Links
My process
Author
Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

Screenshot

My process

Built with

Semantic HTML5 markup
CSS custom properties
Flexbox
Mobile-first workflow

What I learned

I learned that I don't know Flexbox as well as I thought I did. I also learned how to get measurements from Figma design software.

To see how you can add code snippets, see below:

  <div class="container">
    <section class="item">
      <img src="./images/image-qr-code.png" alt="QR code" />
    </section>
    <section class="item-body">
      <h1>Improve your front-end <br>skills by building projects</h1>
      <p>Scan the QR code to visit Frontend <br> Mentor and take your coding skills to <br> the next level</p>
    </section>

.container{
  max-width: 320px;
  height: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  box-shadow: 0 10px 40px hsl(220, 15%, 55%);
  padding: 15px;
  border-radius: 15px;
}

Continued development

I really want to dig more into Flexbox. It's still confusing. May be watch a few more videos or some courses on Scrimba and or LinkedIn learning.

Note: Delete this note and the content within this section and replace with your own plans for continued development.

Useful resources

Resource 1 - This helped me with Flexbox. I really liked this persons content hope it will help me going forward.
[Resource 2] (https://yoksel.github.io/flex-cheatsheet/#section-justify-content) - Found this great resource on Github.

Author

Github - Craig Wolfe
Frontend Mentor - @craigwolfe

Acknowledgments

Full Stack Zach from Youtube (https://www.youtube.com/@zachgoll)

craigwolfe/QR-code-component-challenge