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

@Marchino5791

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


Hello everyone!

This is my solution about Profile Card.

I have some difficulty about multiple background. How can I fix it like the original design?

Thank you for helping me :)

Community feedback

John Omoke 240

@jomoke814

Posted

you did everything the right way then only thing your code missing is to sign the value that you want your background to be positioned at. On your code you have background-position: left top, right bottom; include the value like so: background-position: right 50vw bottom 40vh, left 50vw top 40vh; that will move the svg's where you want them to be. I hope this helps.

Marked as helpful

1

@Marchino5791

Posted

Hi @jomoke814. Thank you for your help! :) Now it's closer to the original one.

0

@shivakumar-ui-max

Posted

You did well but u missed the backgroun attachment property. Ex: background-attachment: fixed;

To avoid accessibility issues please learn the HTML5 format like #header #main #footer... .....etc.

I hope you Understand what I'm saying. Good job, keep doing 🔥

Suppose,if I said any mistake pardon me.

0

@Marchino5791

Posted

Hi @shivakumar-ui-max. Thank you for your help :)

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