Profile Card using HTML and CSS

Community feedback

• 

  Sarbeh•100

  @herbrasPosted over 3 years ago

  Congrats for your Solution.

  For background, you can use background-position. You can add value (top, bottom, right, and left). play this https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

  For horizontal separator, you can use bordet-top on container class (stats) and fill with lightray hsl color, solid line, and small pixel.

  Keep going and Happy Coding! :)

  1

  ---

  

  ijyotimaurya150•40

  @ijyotimaurya150Posted over 3 years ago

  Hey @herbras! You were right about the background-position. Thanks for the link too. And yes border-top/border-bottom is the solution to my <hr> problem. Thanks once again. 😃

  0
• 

  Rayane•1,935

  @RayaneBengaouiPosted over 3 years ago

  Hello ijyotimaurya150,

  First of all, congrats for your first challenge !

  For the background images, they are quite tricky to size correctly, but by playing with percentages and calc I guess you can find a way.

  To create the horizontal separator you are using an <hr> tag which is not necessary here. You can add a border-bottom: solid lightgray 1px to your #cardMiddlePart and it should work.

  Overall, well done for the challenge and happy coding ! 😃

  1

  ---

  

  ijyotimaurya150•40

  @ijyotimaurya150Posted over 3 years ago

  @RayaneBengaoui Oh man! your second solution was totally correct. Thank you so much for the help. 🤗

  0
• 

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  Hi @ijyotimaurya150! I would use pseudoelements for the background circles, but I struggled with them quite a lot, so that may not be the best solution.

  However, I can help a bit with your second question. You're using a <hr> element here, and you've defined a border all around it. Since you can't make a line smaller than 1px on a screen (so using 0.1px won't work), that makes your rule 2px tall. What you can do is just have a border-top (or border-bottom). You can also set a lower opacity to make it look lighter.

  Hope this helps :)

  1

  ---

  

  ijyotimaurya150•40

  @ijyotimaurya150Posted over 3 years ago

  @AgataLiberska Oh yeah! Thank you so much for your help related to my 0.1px border. I finally got the clarity now. Thanks once again 😋.

  0