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
    • Continued development
  • Author

Overview

Screenshot

Desktop design Mobile design

Links

• Solution URL: Code from GitHub
• Live Site URL: My Site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties

What I learned

One of the things I learned was how to use media queries to modify my design to fit the right size.

@media (max-width:375px) {
    .container {
        width: 330px;
        height: 500px;
        border-radius: 50px;
        margin: 50px auto;
    }

    img {
        width: 250px;
        height: 250px;
        border-radius: 10px;
        margin: 10% 10% 5%;
    }

    h1 {
        font-size: 20px;
        line-height: 1.5;
    }

    .text {
        width: 250px;
        margin: 0 auto;
    }
}

Continued development

I want to focus on learning and gaining knowledge about more CSS properties and styling my designs as well as gaining knowledge about mobile design.

Author

• Frontend Mentor - @Juan130501