QR code card component using CSS

Solution retrospective
First I wanted to the project with bootstrap then I decided to do it with plane CSS. Your feedback will be very much appreciated.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ChrisAndrewsDev
Hey @isayaexavery, nice work on your first challenge!
There's a few small HTML warnings that are easy to remedy:
- Using semantic landmark HTML tags
<main> <section>
in place of standard<div>
tags to divide sections is best practice and helps with accessibility for screen-readers. - You typically want to start with an
<h1>
on a page and work your way down to smaller headings for less vital content:<h1> to <h2> to <h3>
and so on.
One small thing I noticed when compared to the design brief is that your paragraph should be
text-align: center
You should definitely look into custom CSS variables if you're working with vanilla CSS, especially when doing the challenges here, they make life so much easier when working from a design brief!
Other than that, your CSS was solid, I could see you experimented with some styles and methods to get a preferred outcome, there are a couple of smaller tweaks I would have made, but you're on the right track for sure!
Nice one!
Marked as helpful - Using semantic landmark HTML tags
- @correlucas
👾Hello Isayaexavery, congratulations for you challenge solution!
I just saw your live site and I've some tips for you about the design and the elements.
1.The container text should be aligned to center not to left, use
text-align: center;
. 2.The H1font-size
is a little bit bigger, you can also switch fromh3
toh1
. 3.Theborder-radius
for the qrcode image is a little bit different for the containerborder-radius
due some design proportions the inner border-radius should be ever a little bit smaller from the outer content.I wrote you the code fixes below:
text-align: center; width: 32rem; margin: 10rem auto; padding: 2.4rem 0; display: flex; /* justify-content: center; */ /* align-items: center; */ flex-direction: column; gap: 2rem; background-color: hsl(0, 0%, 100%); border-radius: 12px; } .card-content h3 { font-size: 2.25rem; color: hsl(218, 44%, 22%); } .card-img { border-radius: 10px; }
Hope it helps you, happy coding bro!
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