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

Responsive Profile-card component with Flexbox and CSS

@ClaudeManuela

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


Hello! This is my very first challenge and it was really fun to make! Please give me feedback if possible I love to learn and get better wherever I can. I have a few questions: Is there a way to position images in the background without the z -index and using the background image element? I had trouble using those two during this challenge

When should we use fixed positioning as opposed to regular positioning?

Are there any rookie mistakes I did that require special attention?

Please let me know. Thanks!

Community feedback

Roc Tanweerβ€’ 2,500

@RocTanweer

Posted

Hello πŸ‘‹, You have done quite well. You can use multiple images in a background and position them on will. For example,

background-image : url(img1 directory),
url(img2 directory);
background-position : top -50vh left -50vw,
top -50vh right -50vw;
background-size : cover, cover;
background-repeat : no-repeat, no-repeat;

We use fixed positioning when we wish an element to positioned with respect to html document leaving it's space from the body.

Hope it helps!

2

@ClaudeManuela

Posted

@RocTanweer Thank you so much, I never understood the difference between fixed and absolute, this is really helpful! If I can ask, why did you use vh instead of pixels for measuring units?

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