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: Solution
• Live Site URL: Live Site

My process

I have used flexboxs to make this entire page. I have made it mobile first.

Built with

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

What I learned

I learned about box-shadow property in CSS.

.main-wrapper{
    /* other code */

    /* box -shadow */
    box-shadow: -3px -3px 47px -7px rgba(0,0,0,0.18);
    -webkit-box-shadow: -3px -3px 47px -7px rgba(0,0,0,0.18);
    -moz-box-shadow: -3px -3px 47px -7px rgba(0,0,0,0.18);
}

Here is how to box-shadow property in css works:

box-shadow: offset-x offset-y blur-radius spread-radius color inset;

Explanation of each part:

1. offset-x (required)

   • How far to move the shadow horizontally.

   • Positive = to the right, Negative = to the left.

2. offset-y (required)

   • How far to move the shadow vertically.

   • Positive = down, Negative = up.

3. blur-radius (optional)

   • How blurry the shadow is.

   • Higher values = softer and more spread-out edges.

   • Default is 0, meaning sharp edges.

4. spread-radius (optional)

   • How much the shadow expands or contracts.

   • Positive = expands outward, Negative = shrinks inward.

5. color (optional but common)

   • The color of the shadow.

   • Can use any valid CSS color (hex, rgba, named, etc).

6. inset (optional keyword)

   • If present, the shadow will appear inside the box (like an inner shadow).

   • Without inset, it’s the default outer shadow.

Useful resources

• Box-Shadow-Generator - This helped me a lot in figuring out the box-shadow of the centered div. Its a great tool I am looking forword to use in more such scenarios.

Author

• Website - Tuhin Mandal
• Frontend Mentor - @MandalTuhin
• LinkedIn- @tuhin-mandal-2157102aa