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

Profile card component - Tailwind and Next.js

n0rrman 370

@n0rrman

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 not so happy about the svg background.

How can I do it better than with fixed position and pushing the svgs off the screen using the location tags?

Community feedback

Daniel 🛸 44,210

@danielmrz-dev

Posted

Hello @n0rrman!

Your project looks nice!

That background pattern had me struggling too 😅 But I had help from people in hte community, and here's how I did it:

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 couldn't take a look at your code, so I don't know if maybe you did the same thing...

Anyways, I hope it helps you!

1

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