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

@ArchieK9

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'm having problem with designing that part of the div that is blue in colour. Please anyone help out?

Community feedback

@djbedford

Posted

Hey, so I think what you need to do here is to use an img tag and the provided 'bg-pattern-card.svg' SVG file and set it as the source. This can be placed above your other img tag for the profile pic so that it sits at the top of your card component and then you can apply styles as desired to the img tag.

Hope this helps.

Marked as helpful

0

@ArchieK9

Posted

@djbedford Yes it does help. But can't I just leave as a background image? Or should go along with the idea and use z-index property?

0

@djbedford

Posted

@ArchieK9 You could have it as a background image that is another option yes, but it's a bit more involved to get it set up as you will have to set it's position, it's size, and whether it should repeat or not etc. and you may also need to create another empty div with a width and height in order to set the background image and have it appear at the top of the card.

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