Submitted 3 months ago

Class based solution for profile card component

appleseed9• 160

@appleseed9

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

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

How to insert and position (scale) background circles in a way to look just like in the design, that was the most difficult part for me.

Should i use background images, or absolute positioning, or something else.

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

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