thuri10 / qrcode

A Frontend Motorcycle shop

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 Learned

Overview

Screenshot

Below is a screenshot of the complete challenge solution.

Links

• Solution URL: Solution
• Live Site URL: Demo

My process

Built with

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

What Learned

• When centering a Card in an empty page, you need to setup height of the parent container, i.e 100vh. Example of the above trick is highlighted in container class

.container {
    max-width: 1440px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}