Frontend Mentor | Profile Card Solution coding challenge solution

Solution retrospective

What are you most proud of, and what would you do differently next time?

My approach lead me to a favorable solution, so I felt like this was a good test.

What challenges did you encounter, and how did you overcome them?

No real challenges. The trickiest part was getting the avatar positioned correctly, but that was easily sorted out by negative margin.

What specific areas of your project would you like help with?

Feedback on my CSS in the project is very welcome.

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 3 months ago

Hello there!

Congrats on completing the challenge! ✅

Your solution looks great!

The background pattern with the circles is a bit tricky, but you don't need separate containers to create it as it's possible to work with multiple background images at the same time. Here's how you can do it:

📌 Add this to the body:

  background-color: var(--Dark-cyan);
  background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: right 52vw bottom 35vh, left 48vw top 52vh;

I hope it helps!

Other than that, you did an excelent job!

Marked as helpful

Robert Crocker• 410

@robcrock

Posted 3 months ago

@danielmrz-dev thank you so much for the comment. I'll be able to use this in future challenges for sure.

I ending up creating a single custom class in my global.css file and adjusted the positioning to make more sense to me.

.bg-custom {
  background-color: hsl(185, 75%, 39%);
  background-image: url("/images/bg-pattern-top.svg"),
    url("/images/bg-pattern-bottom.svg");
  background-repeat: no-repeat, no-repeat;
  background-position:
    left -28vw top -24vh,
    right -28vw bottom -24vh;
}

Profile Card Solution

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community