@Amirmfth
Submitted
@te-sa
@Amirmfth
Submitted
@te-sa
Posted
The solution is quite close to the design, so hats off to that! The code is also well constructed and readable.
A hover state for the header was not implemented, consider adding something akin to:
h1:hover {
color: hsl(47, 88%, 63%);
cursor: pointer;
}
Also, the card is not responsive on small screen sizes yet (width: 320px). Consider looking into the clamp() function, it really helped me make my page more responsive.
In general, good work!
@MdZaferEqbal
Submitted
What are you most proud of, and what would you do differently next time?
I was really proud when I added all the font-size, padding, margin and dimensions of the div and it was near perfect to what was the final preview provided in this challenge.
I want this near perfect to be exact same next time on.
What challenges did you encounter, and how did you overcome them?
I only faced one challenge and that was to align the div container in the center of the page.
I tried position absolute and left 50% and top 50% it didn't worked as expected and I did some more trial and error, but at last I used display flex to align the div at the center of the page.
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
What specific areas of your project would you like help with?
Thanks for asking. But I managed to complete this challenge by myself.
@te-sa
Posted
The challenge was done well, the only nitpick I have is that the implemented QR code is a tad smaller than it is in the design. Also, I believe the repo you linked under "View Code" is private, I was not able to access it. Instead, I had to inspect the published page to see your code.
Specific feedback:
Instead of:
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
Consider:
padding: 10px 10px 0 10px;
Marked as helpful