Skip to content
Submitted over 1 year ago

Responsive profile card

Deivid Esteferson•230
@deivid-esf
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

Hey, guys! I did this challenge, but I need help with somethings.

I use 'position: relative and absolute' to put the image in this position, but I dont know if I did it correct, if you guys know how I can improve this, I'll be so glad.

I didn't put the right background because i was lost how to do. Can someone explain to me how i can do it please?

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    Hi, Deivid Esteferson! 👋

    The link for the source code is an empty GitHub repository—deivid-esf/profile-card.

    I recommend making the circles the pseudo-elements of the <body> element. You can see Grace's solution as an example.

    Frontend Mentor | Profile card with pseudo backgrounds and accessible list coding challenge solution

    I don't recommend making them the background image of the <body> element because it makes the background-position complicated. I used this technique and in my opinion, the pseudo-elements technique is a better solution.

    I hope you find this useful. Happy coding! 😄

    Marked as helpful
    0
  • Francisco Carrillo•5,540
    @frank-itachiPosted over 1 year ago

    Hello there 👋

    • Please generate another solution report for this challenge and update the github repo URL because the one you added is empty so we cannot check your code.
    • Depending of the layout you used, you can use the margin property and use negatives values to position the profile image.
    • To set multiple background images you can use the background property and specify multiple paths(urls) in a comma separated base. For instance:
    body {
background: url(image-1.png), url(image-2.png);
}

    More information about the background property here.

    I hope you find it useful! 😄

    Happy <coding /> 😎!

    Marked as helpful
    0
  • visualdennis•8,375
    @visualdennissPosted over 1 year ago

    Congrats on completing the challenge successfully! Great job and it looks great overall.

    Only thing missing are those big circles on the background. You can add them for example by using <img /> and position them absolutely , relative to the body or simply as background-images like:

    background-image: url("img.jpg");

    Hope this was helpful!

    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