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
• Acknowledgments

Overview

Screenshot

Links

• Solution URL: https://mays21.github.io/qr-code-component/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Bootstrap 5
• flex-box

What I learned

• about landmaks
• card structure card > card-img , card-body > card-title, card-text
• border-radius
• center layout

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Continued development

• Keep trying
• How to use Bootstrap
• How to use JavaScript

Useful resources

• Cards - Bootstrap v5.0
• Are you using the right CSS units?

Author

• Frontend Mentor - @mays21

Acknowledgments

• CSS 画像の border-radius は直接 img タグに設定すること
• CSS カードの中央寄せは mx-auto を指定する
• CSS カードの上下中央寄せは 親要素に dispaly:flex;を使うこと

Got feedback for us?

I love receiving feedback! I'm always looking to improve my challenges. So if you have anything you'd like to mention, please leave a comment.

Happy programing!