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

Using relative property

MFA34 50

@mfa34

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


Can you help with the background image property? Is there a shorter route than the one I followed?

Community feedback

P

@12Kentos

Posted

Hey @mfa34,

Nice job on completing this challenge! You did great! As for the background image I have two suggestions. First you can combine them into one line of code like so.

background: url(images/bg-pattern-top.svg) right 50vw bottom 40vh no-repeat, url(images/bg-pattern-bottom.svg) 50vw 50vh no-repeat;

That way you don't need three separate lines of code like you had, this makes it a little more shorthand. However the way you did it works just fine as well. :)

Secondly I would suggest using vw, and vh like in the example I gave. (Doesn't have to be those exact measurements) This will help it be more responsive since it is based on how big/small the users screen is.

Hope that helps!

Marked as helpful

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