Skip to content
Submitted almost 4 years ago

Profile Card Challenge using Flexbox

Rizwan Mustafa•155
@rizwanmustafa
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 fixed the background svg position problem using flexbox and simple code lines. I don't think the solution to this problem can be as simple as this but if you have better code, you are welcome. If you see any mistakes I did or any improvements I can make, I will be happy to see your feedback.

Community feedback

  • Mehmet•285
    @memsbdmPosted almost 4 years ago

    You can use background in css for svg. It would be easier :)

    2
    Rizwan Mustafa•155
    @rizwanmustafaPosted almost 4 years ago

    But then calculating the position of the svgs would be difficult, I guess. But it was easier for me this way. I will try it out though.

    0
  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    Hi there, Rizwan Mustafa! 👋

    Nice job on this challenge! 👏

    Like memsbdm mentioned, using CSS background images would be a nice idea to add the background images to the site. You can use viewport units to position the background images and that will make it easier since then the background images will stay in their place when the page is resized. 😉

    Keep coding (and happy coding, too)! 😁

    1
    Rizwan Mustafa•155
    @rizwanmustafaPosted almost 4 years ago

    @ApplePieGiraffe I actually saw your solution and a bit of your code before performing this. But those svgs rotate around when the page is resized and I did not want that.

    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