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

Submitted

Profile card component (first attempt)

Hdev 215

@hemanuela

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I know that this a Newbie Challenger, but as a newbie, I did a lot of messing trying to adjust some details. I don't get how to put de bg-patterns yet. Maybe in another attempt. I will be back!

Community feedback

Ads645 125

@Ads645

Posted

Good job! I had problems with bg img too, not sure if this helps, but what I did was position absolute, then top, left and z-index to place it somewhere close to the card. Happy coding!

Marked as helpful

1
Sky 945

@Skyz03

Posted

Hi hemanuela, Great work on completing the challenge. I can see to implement the background, you can use ::pesudo elements where you can then use the background: url() plus position: absolute and content: "" with addition to z-index. If you have any question feel free to drop some comments.

Marked as helpful

0
Rabah 380

@rabahmilano

Posted

well done! for the bg try this; background: url(imgLocation), url(imgLocation); then organize them with the background-position, background-size and others for each one ... good luck

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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