Design comparison
Solution retrospective
Any feedback would be greatly appreciated, and tips on how to make the padding between the picture and the white bg would be nice.
Community feedback
- @adityas24Posted almost 3 years ago
Hey Teo! you did very well in your first challenge. I would like to suggest you the following....
You could have avoided the
div
you used to wrap theh1
andp
. As you have not used any style on div. Then you can simply avoid using it. It will not affect the semantics and will also decrease the length of the code.So you could simply write
<div class="container"> <img src="images\image-qr-code.png" alt="QR code"> <h1>Improve your front-end skills by building projects</h1> <p class="text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </div>
All the best 🙂👍
Marked as helpful1 - @RioCantrePosted almost 3 years ago
Hello there! Awesome work with this one. Viewing your solution I would suggest the following for you...
- Inside the
h1
rule set addmargin: 0;
and adjust the padding intopadding: 1rem 2rem 0 2rem;
- Same goes with
.text
addmargin:0;
and adjust the padding topadding: 1rem 2rem;
- Instead of using
div
, wrap thecontainer
with specific tag likemain
for readability
Hope this helps and Keep up the good work!
Marked as helpful1 - Inside the
Please log in to post a comment
Log in with GitHubJoin 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