Submitted
@beardedbe4n
What are you most proud of, and what would you do differently next time?
this was the first time i coded anything that wasn't spoon fed. there was a lot of instruction but the basic things I had to google, it is so different in practice.
What challenges did you encounter, and how did you overcome them?
my main challenge was linking the google font, as well as (and I cant figure it out) the top border radius of the qr code
What specific areas of your project would you like help with?
the top borders of the qr code image as well as best practices for formatting
@ortiz-antonio
Posted
Keep coding, you're doing great! To fix the image cropping issue, try replacing padding-top: 10px with margin-top: 10px; in the .imgCode class. Understanding the CSS box model will help you make more informed styling decisions.
Marked as helpful
@oduwa-A
Posted
Yeah the top left and right of the image are not as even as the bottom corners. The problem is padding squishing the image at the top, and altering it far more than intended. By removing padding-top in .imgCode, the radius will do it's thing.
Additionally, the card is a tad bit too small. Although that is not egregious in itself. Also watch out for the font-weight since the contrast between the paragraphs isn't strong enough. And make sure to include a default/backup typeface in the font-family in the top and bottom classes, should the main font fail.
Finally, make sure the to include padding in the first class, .box, so the box can "compress" on itself and grant space.
Otherwise, great attempt for your first time without help! I'm going through the same thing, so seeing your work was enlightening, since it offered an alternate path to how I approached it. And of course, seeing everything, all you did right and the flaws, increased my own understanding alot. Keep it up!
Marked as helpful
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
