Skip to content
Submitted over 3 years ago

Profile card component (first attempt)

Hdev•215
@hemanuela
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

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
    @Ads645Posted over 3 years ago

    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
  • Skyz Walker•1,035
    @Skyz03Posted over 3 years ago

    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
    @rabahmilanoPosted over 3 years ago

    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

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