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
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

Links

• Solution URL: https://github.com/surajsharma19/QR-code-component
• Live Site URL: https://surajsharma19.github.io/QR-code-component/

My process

Built with

• HTML5 markup
• CSS custom properties

What I learned

I learn about basic of HTML and CSS and also about how to use postion to center the element, what is the use of max-width and how to use box-shadow.

.card{
    width: 100%;
    max-width: 302px;
    height: 470px;
    position: absolute;
    margin: auto;
    inset: 0;
    border-radius: 16px;
    background-color: hsl(0, 0%, 100%);
    box-shadow: 0 0 10px hsla(219, 15%, 55%, 0.304);
    padding: 16px;
    text-align: center;
}

Continued development

I am learning more about CSS and will learn more about flexbox, grid and responsiveness.

Useful resources

• MDN docs
• W3schools

Author

• Website - Suraj Sharma
• Frontend Mentor - @surajsharma19