Submitted over 1 year ago

Profile Card Component Solution

Mygaverse•150

@Mygaverse

A solution to the Profile card component challenge

Preview Code

Solution retrospective

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

Resembling the solution close to the design

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

I had to set the background position mannually.

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

I still need to improve my skills in using svg as background in css

Code

Please log in to post a comment

Community feedback

P
Daniel 🛸•44,810
@danielmrz-dev
Posted over 1 year ago
Hello @Mygaverse!

Your solution looks great!

In case you want to get the exact position of the background circles, 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!

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