Qr Code Component

This is the implemented solution to the challenge QR-Code Component - Frontend Mentor beginner level, to improve skills and knowledge.

Content

• Overview
  • Screenshot
  • Links
• Processes
  • Build
  • Learning
  • Development
• Author

Overview

Screenshot

Links

• Solution: (https://github.com/otiagogf/qr-code-component/)
• Active page: (https://otiagogf.github.io/qr-code-component/)

My processes

Built with

• Semantic HTML 5
• CSS custom properties
• Flexbox
• Responsive design

What i learned?

I managed to put a little responsiveness into practice, adjusting the front of my solution for a mobile device, so I was able to test directly in the browser simulating the mobile and also directly on my phone, where my solution was pleasant for these devices.

@media screen and (min-width: 320px) and (min-height: 800px) {
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    main {
        display: flex;
    }

    .card {
        width: 315px;
        height: 484px;
    }

    .card img {
        width: 280px;
        height: 280px;
    }
}

Continuous development

I used the native github tool, which is github pages where in the links section you will find the path to the active page.

Autor

• Github - Github
• Frontend Mentor - Challenge HUB