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

@praveen-kumar-m

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@RenszCamacho

Posted

Hello, 👋🏻 praveen. Well done my friend 👏👏👏. Lovely job on this challenge, place properly the background image is quite tricky.

Just I few suggestions in my humble newbie opinion. 😊

-I've been checking your code. And I would approach that, like so

.container { 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 38vh, left 49vw top 51vh; }

I would place the background-images in your 'wrapper' or the way that you do it, I'll adding some media queries to fix the position in every breakpoint.

I hope it helps.

Happy Coding! 🧑‍💻

3

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