@p1ktas
Posted
Hey! I've just finished this challenge myself and can help you a bit. In my newbie eyes your HTML is okay-ish, you can fix it by:
- Adding a ">" symbol at the of end of style.css link;
- Adding QR image to your qr-code directory and linking to your html by using "./" like so:
<img src="./image-qr-code.png" alt="QR code">, dont forget to add "alt" info!. - I also recommend using
<h1>instead of<h2>, as every page should have an<h1>tag.
As for CSS, this should help you get a better grasp:
- Keep your
html {}andbody {}properties intact, they're ok, everything going down should probably be written from scratch. Also, read into it style-guide.md carefully a few times and fulfill all given tasks! - Import a given font, apply it globally.
- Make your
.container {}a flex-container and set it's width. I prefer using rem or px.This should fix your image resizing with the page and place it neatly inside your.container {}. - Make your flex-items stack from top to bottom! Read more about it here.
- Add backround-color, border-radius and padding on all sides to your
.container {}. - Make all the other needed changes as you go.
This should point you into the right direction and hopefully, help you finish your project! :)
Marked as helpful
@ThatDevDiaz
Posted
@p1ktas This was incredibly helpful. Thank you!
@ThatDevDiaz
Posted
@p1ktas Went back into VSCode and applied all of these changes. Not only did I better understand the flexbox situation (I had just learned it, so putting it into application was kind of confusing me) but I also got a better understanding of how important it is to not skim over any details on, say, a style sheet. Thanks a lot. It looks way closer to the original and I was able to get the github files to link by just copying the path directly from the repository. I would thumbs up twice if I could.
