Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Teresa 40

    @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!

    0
  • @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.

    Teresa 40

    @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

    0