@beowulf1958
Posted
Congratulations on completing this project! Looks great at desktop and mobile screen size.
I would encourage you to continue your research on centering in CSS. Although the margin + position works great for single component pages, as the pages increase in complexity, this becomes problematic, especially if responsiveness is an issue. MDN has an excellent article on centering with flexbox and grid.
You might want to consider using more functional tags and meaningful class names. "para-1" is actually a card title, so an <h2> tag would be more appropriate. Similarly, "para-2" is a paragraph, so a <p> would work.
For the class names, you might want to check out BEM, which stands for block-element-modifier. So, for example, here "div-1" becomes "card", "qr-code-image" becomes "card__image" followed by an <h2> class="card__title" and a <p> class="card__text". This gives another coder the hint that this qr-image is in a card, and the card has a title and a text.
Now for the styles. In general, very well-organized. However, the "display: flex; flex-direction: column;" doesn't seem to be doing anything and could be removed (zombie code.) Also, by moving "text-align: center" to div-1 styles, you don't repeat yourself and allow the cascade to do its thing.
Hope this helps. I look forward to your next project. Keep on coding.