Skip to content
Submitted about 3 years ago

Basic HTML and CSS 4

Óscar Rabadán Martínez•150
@Oscarandio
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

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

  • Fernando Valdés García•415
    @fvaldes0109Posted about 3 years ago

    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
    Óscar Rabadán Martínez•150
    @OscarandioPosted about 3 years ago

    @fvaldes0109 Thank you!

    0

Please log in to post a comment

Log in with GitHub

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