As Salamu Alaikum! 👋

This is my solution to the QR code component challenge on Frontend Mentor. To view the live site Click Here.

Table of contents

• As Salamu Alaikum! 👋
  • Table of contents
  • Overview
    • Screenshot
    • Links
    • Built with
    • What I learned
    • Useful resources
  • Get Connected

Overview

I've embarked this challenge to brush-up my HTML & CSS skills.

Screenshot

Links

• Live Site
• Solution

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox (to center the card)
• Mobile-first workflow

What I learned

• Centering an element in HTML is freaking hard for me. There must be something wrong, everytime😏

This time, luckily it worked😇😇

  display: flex;
  flex-direction: column;
  min-height: 90vh; /* Without height property the card won't align horizontally */
  justify-content: center;
  align-items: center;

Useful resources

• Outfit Font - Used this font in this project.

Get Connected

• Facebook - Abu Naser Muhammad Arman
• Instagram - @arman_anm
• Twitter - @arman_anm
• Gmail - armaan.anm@gmail.com