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: Solution URL here
• Live Site URL: Live site URL here

My process

Built with

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

What I learned

I'm becoming more familiar with Html and CSS every time I write new projects.

Code snippets, see below:

<div class="container">
  <div class="card">
    <div class="card-img"></div>
    <div class="card-content">
      <h1>
        Improve your front-end skills by building projects
      </h1>
      <p>
        Scan this QR code to visit Frontend Mentor and take your coding skills to the next level
      </p>
    </div>
  </div>
</div>

.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  min-height: 812px;
}

Continued development

HTML and CSS, I am also interested in Javascript and React.

Useful resources

• CodinGitHub - This helped me. I really liked this pattern and will use it going forward.

Author

• Website - Anthony Davalos
• Frontend Mentor - @anthonydavalos
• Twitter - @Softhony

Acknowledgments

I can give a hat tip who helped me out on this project. I worked in a team and got some inspiration from CodingGitHub else's solution.