Simple Solution using CSS and HTML

Nice work on your code but i would want to say you should use rem instead of fixed values like pixels. REM help ensure consistency across different devices and screen sizes. Since REMs are based on the root font size, they'll adjust automatically to fit the size of the device screen. You can use rem by dividing your pixels values by 16 which is the default. Also your font-family is not the same as the one needed for the project. Example: @font-face { font-family: "Inter"; src: url(Inter/Inter-VariableFont_slntwght.ttf); } and u can target by : p{ font-family: "Inter"; }

Hey Ayhem! Congrats on getting your challenge up and running! I saw your feedback questions while scrolling through my feed.

An alternative to the solution you used (absolute positioning, viewport percentages, etc) is to use the flexbox concept. In my experience, flexbox is a lot closer to what you will encounter from UX developer designs and responsive layouts in the future.

For the QR code challenge, take a look at flexbox, flex-direction, justify-content, and align-items. These 4 css settings will allow you to center your QR code card into the middle of the screen.

{ display: flex, flex-direction: column, justify-content: center, align-items: center }

In your current solution, one drawback to using % is the look of the page. By using absolute and % based size calculations, your design may look very different to what your future customers see, depending on their window size. You can see it for yourself if you open your page and shrink the width of the window. The QR code will shrink, and you will end up with too much whitespace on a smaller-width screen.

Make sure to build the habit of testing your UI at different window sizes :) Keep up the good work!