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 - mobile-first responsive design

@nenamartinez

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 everyone! Any feedback is appreciated, but here are some questions/issues I'm having:

The background. I can't quite wrap my head around how to use the background-image properties to make it look like the design. Help please.

Semantics. I tried to keep code semantics in mind, let me know how I did.

Anything else that jumps out to you that would help me improve would be appreciated, thank you!

Community feedback

seekinfox 560

@seekinfox

Posted

You can use

 background-repeat: no-repeat, repeat;
 background-size: 90%, 50%;
 background-position: top nrem left nrem , bottom nrem right nrem;. //you can change the unit and it can be negative.

Separate two values with " , ".

If you set only one value it will be applied to the both images.

background-position: top nrem left nrem;

Marked as helpful

1

@nenamartinez

Posted

@seekinfox Thanks for the response! (And thank you for commenting earlier when I had posted my solution to the wrong challenge. I had to delete that and re-upload here.). I will experiment and try to fix it. Thanks!

0
seekinfox 560

@seekinfox

Posted

@nenamartinez , you should also add README.md file so visiters can have understanding of your project without going through the code.

Use template-readme.md for a reference. It's in download zip.

Marked as helpful

1

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