Skip to content

Latest commit

 

History

History
53 lines (31 loc) · 1.5 KB

README.md

File metadata and controls

53 lines (31 loc) · 1.5 KB

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