Skip to content
Submitted over 1 year ago

Profile Card Using Flexbox

PJ•110
@Kitezh1
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 had trouble with the background images and positioning them. When uploading to Git Hub, they won't show up but show on my live site from Visual Studio. Any tips are appreciated!

Community feedback

  • doublem•620
    @MarioMinchevskiPosted over 1 year ago

    Hi Kitezh1!

    If the images show on your live server but they do not show when you open the index.html file or when you upload it to GitHub and to a live server, that means that the URL for the picture might not be correct.

    Try some different solutions like adding './' before 'images/bg-pattern-bottom.svg'. Depends on the file location in your project folder.

    As for the placement, a nice way to do it is with pseudo elements. I personally placed the first one with ::before and the second one with ::after. Of course, there are other ways to do it as well, but this seemed quite clear and straightforward.

    Hope this helps!

    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