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

@TripleT511

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'm having some problems with my background, I hope you guys can give me feedback so I can improve

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hello, Tâm Trần Thanh! 👋

I'll admit that the background images in this challenge can be rather tricky to position! 😅

I suggest using CSS background images to add and position some of the background images in this challenge. Doing so means you won’t have to add those images directly to your HTML (which will keep your markup a little cleaner) and I think it’s easier to manage background images with CSS because you won’t have to worry about things like overflow issues. If you’d like to learn more about CSS background images and how to use them, check out this tutorial from MDN.

Also, if you do that, you could also try playing around with viewport units and percentages to see if you can find a solution that keeps the background shapes more or less in their place when the page is resizes. That's what I did in my solution to this challenge, and it seemed to work out well. 🙂

Hope that helps. 😉

Keep coding (and happy coding, too)! 😄

Marked as helpful

1

@TripleT511

Posted

@ApplePieGiraffe Thanks you

1

@drajnish

Posted

Hi @TripleT511 I'm newbie but i think changing these values in your image div may help

transform: translateX(30%) translateY(11%) rotate( 270deg) scale(1.5);

hope it works for you.

Marked as helpful

0

@TripleT511

Posted

@drajnish Thank you I will try it

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