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

Basic HTML and CSS 4

@Oscarandio

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 feel very proud of this one. The only thing I am not able to figure out is how I can set the background exactly the same as the preview. I guess I need to repeat the picture and put it in the opposite side, mirroring or something. I am not sure, so any advice about it is welcome! Thanks

Community feedback

@fvaldes0109

Posted

There are two background photos at the resources, for top and bottom. You can try creating two img elements. Set bg-pattern-top.svg as the src of the first img, and bg-pattern-bottom.svg as the src of the second one. Also both imgs must be set with position: absolute, so you can move them freely and they won't mess with the card. With that you can just experiment moving around each image with the top, left, right and bottom properties until you get the design you want.

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