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

• Index.html

• images/

• Readme.md

• My Challenge

  • Build with Notepad++
  • [What I learned]: No Center of Elements without a spezific height.
  • [Useful resources] W3C

• [Author] Patrick

Overview

Tryed to center the #Card to the middle of the Screen. Cant reach that with display:Flex; justify-content:center, align-items.center.

I searchd the internet of a solution and find out, that i have to give a spezific height to the element #card.

Screenshot

No Screenshot a.t.m.

My process

First i build the section #card and put the QR and the Text in seperate articles. So i can now display flex column.

Than i build a footer arround the given Text (in the footer) and fixed it in the middle on the bottom.

Built with

• HTML5
• CSS custom properties
• Flexbox

What I learned

I learnd that i have to give an Element a height of 100vh, so the element will centered in the middle of the screen when i do display:flex, justify-content:center und align-items:center.

Continued development

Will do more Challenges to grow in HTML CSS and JavaScript.

Useful resources

W3C Homepage

Author

• Frontend Mentor - @PadseGaming