Skip to content
Submitted over 4 years ago

Profile card - HTML, CSS

Anjali M•50
@aj-menon
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

It was a pain working on positioning the top and bottom background images. I'm sure there are better ways to accomplish the task than how I have attempted. I'd like feedback specifically on the positioning of the bg images and the media queries please.

Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    Hi

    A few issues with the html here...

    • headings need to go in order. I think this card would only have one heading
    • it doesn't make sense for the numbers to be headings. They need to be in the same meaningful element as the word accompanying them, or be a paired element so they are semantically linked (like a description list)
    • the Victor image should not be hidden from assistive tehh. That's a meaningful image and deserves to be announced and described

    With the solution, you need to find a way to use layers so the overflow is hidden for those background images, but not hidden for the content. At the moment this just fits on my screen in mobile portrait, but content is hidden when mobile landscape.

    That all said, it's not far off now. Try to add the card shadow and it will look close to the design

  • Raymart Pamplona•16,040
    @pikapikamart

    hey, just a tip, since you are working on an svg right, you don't have to necessarily add them as bg images. You could make them an img tag, much simpler right? Just make img tag and absolute it but remember to make it's sibling a position relative so that they know that they are in the flow since absolute will overlap them^

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