Skip to content
OverviewSolutions
2
Comments
2
Teresa
@te-sa

All comments

  • Teresa•40
    @te-saPosted about 1 month ago

    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
  • Md Zafer Eqbal•80
    @MdZaferEqbalSubmitted about 1 month ago
    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.

    HTML, CSS

    2
    Teresa•40
    @te-saPosted about 1 month ago

    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