QR Code with HTML and CSS

Solution retrospective
This was a basic attempt, that I will compare accounts other solutions to improve upon
Please log in to post a comment
Log in with GitHubCommunity feedback
- @benssssss
Hello, For the first tempt you do very good
You can do little changes like
1 - Center the card vertically
body { display: flex; flex-direction: column; height: 100vh; justify-content: center; }
display: flex; will make a flex container, so you will be able to move div childs,
When using display: flex; it has a property auto defined that will make the elements inside stay side-by-side, like display: inline; to change you use, flex-direction: column; to make elements positioned in column,
Your body have a setted height, same as the card, so to your center the content you need define a full height to the body, using height: 100vh; vh is viewport who will give the same height of your screen,
then justify-content: center; will center the content horizontally
2 - You can use a css file You have styled the page using , this is not very good because on a bigger code you will lose yourself, instead use a .css file and create a link on your html, will make you code cleaner
3 - browser auto margin Browsers have a default config of margin, padding, font-size, so you need make a reset on it, so you can apply only style you want, you can use another .css file, like (reset.css) or even in you main .css file
its like
* { margin: 0; padding: 0; }
- is a selector that select everything in you html margin and padding: 0 will define a 0 value, so you can style as you wish after on you .css styles
4 - You use google fonts to import the used font, this is very good, and used variables what is very good too,
Keep the good work!
Marked as helpful - @Mahmoud-Abdelkarim777
I have looked at your code and I think your solution is great but if you want to center the card in the middle of the screen you have to give the container a height 100 vh .container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 10px; height: 100vh; }
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord