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 Using Flexbox

PJ 110

@Kitezh1

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 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

P
doublem 620

@MarioMinchevski

Posted

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
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