Skip to content
Submitted about 3 years ago

Profile card - mobile-first responsive design

Elena Martinez•80
@nenamartinez
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

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
    @seekinfoxPosted about 3 years ago

    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
    Elena Martinez•80
    @nenamartinezPosted about 3 years ago

    @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
    @seekinfoxPosted about 3 years ago

    @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

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