Skip to content
Submitted about 4 years ago

Profile Card Component using HTML & CSS.

Abhay Kumar•70
@abhayxkumar
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I am not able to set up background images to the corners of the site. Please take a look at my code and help me to fix it. Give your valuable feedback on my present site.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • Agata Liberska•4,075
    @AgataLiberska

    Hi @abhay1144! I think the positioning of your images isn't actually too far off, but you should switch them around - right now the top one is on the bottom and the bottom one is on the top (check the image file names), I think that's why they look off.

    I would also remove alt text from the circles and the pattern on the card - those images do not add to the content of the page, they're just decorative. Just make sure you don't remove the alt tag, just set it to an empty string: alt="".

    And a nice trick to position the profile photo exactly in the middle would be to position it right on the edge of the container (meaning no padding or margin) and then use transform: translateY(-50%); to move it up. In your solution this may be off because the pattern doesn't quite reach the bottom of the div with class top-area (maybe set it as background-image instead?)

    Hope this helps! :)

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