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

Overview

Screenshot

Desktop Design Preview

Mobile Design Preview

Links

• Site URL: https://simple-website-with-html-and-css-position.vercel.app/

My process

Built with

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

What I learned

While creating this project I learned how to center any object in CSS with the help of CSS properties like position and transform. Similarly, I also learned to apply shadow to those object.

.inner-rectangle{
    height:53vh;
    width:35vh;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    background-color:hsl(0, 0%, 100%);
    border-radius:4%;
    box-shadow: 0px 12px 12px hsla(220, 15%, 55%,0.2)
}