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

HTML & CSS Card Component

@HCFerraz

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 developed the website but I'm not a master with position: relative, absolute and fixed.

When I change the screen size, the images in the background move.

However, I want then to stay relative to the card component, but I'm not reaching the expected result.

Can anyone help me out? :)

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hello there, Henrique Cabral Ferraz! 👋

Nice job on this challenge! 👏

I suggest using CSS background images add and position the background images in this challenge. That'll make your markup cleaner and I think it's a little easier to position the images, then, without them getting in the way of other things on your page. Using viewport units to position the background images keeps the circles in their place when the size of the screen changes. You can take a look at my solution for this challenge, to see how the background images are placed, if you'd like. 😉

Keep coding (and happy coding, too)! 😁

2

@HCFerraz

Posted

@ApplePieGiraffe thanks! I'll take a look at your solution.

I'm coding the second newbie challenge and using background-image, I want to get used to :)

I'll try to change my code and let you know if it worked.

Thanks a lot for your feedback!!!

1

@adluders

Posted

Maybe try to make the images as background images instead of absolutely positioned images. I'm not sure if that'll make MUCH of a difference but I think that might be worth exploring.

1

@adluders

Posted

@HCFerraz let me know how it turns out.

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