Profile Card Component (HTML & CSS)

Solution retrospective
Any advice is welcome!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Drallas
Well done, i just finished this challenge myself this morning. Though It's a simple card component, it time consuming to get it right.
I noticed that you used transform: translate(-60%, -50%); to move to background in place. It works as need but it's not in the background but an image in 'the foreground'.
I opted for the CSS background-image: property, perhaps something you could experiment with if you are going to refactor this code. Otherwise good to know for a future challenge.
.container { height: 100vh; background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg); background-position: left -44rem top -33rem, right -44rem bottom -32rem; background-repeat: no-repeat, no-repeat; }
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