Submitted over 1 year ago

Responsive profile card

Deivid Esteferson• 230

@deivid-esf

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

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,795

@vanzasetia

Posted 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

Francisco Carrillo• 5,540

@frank-itachi

Posted 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

visualdennis• 8,375

@visualdenniss

Posted 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

Please log in to post a comment

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