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

Overview

Screenshot

Links

• Solution URL: Github
• Live Site URL: Netlify

My-process

Built with

• Semantic HTML5 markup
• CSS custom properties

What I learned

I learned that to properly use transform translate function over entire page you have to make your parent element of a full screen size.

To see how you can add code snippets, see below:

<main>
  <div class="qr-card">
    <img src="images\image-qr-code.png" alt="qr code image">
    <p class="qr-title">Improve your front-end skills by building projects</p>

    <p class="qr-text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  </div>
</main>

main {
  position: relative;
  height: 90vh
}
.qr-card {
   width: 270px;
   height: 450px;
   background-color: White;
   border-radius: 5%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
 }

Continued development

I want to learn more about css position and responsive design.

Useful resources

• Geek for geeks - This helped me for making content in the center.

Author

• Website - Akash Pawar
• Frontend Mentor - @akashpawar1
• Twitter - @akashpawar00