Profile Card Component

Community feedback

• 

  Shahin NJ•1,190

  @SJ-NosratPosted over 3 years ago

  Hi Rahman, since you've added the bg-pattern-top and bg-pattern-bottom as background-images you should use the background-position property to postion them. Here you can find the MDN article on background position.

  Be sure to add background-repeat: no-repeat as CSS by default repeats the image in a tiles starting from left to right and top to bottom.

  Also, with regards to the REPORT is due to HTML accessibilty issues; in other words you should try and use semantic HTML that way you convey meaning to your HTML structure.

  Instead of a <div> for your .card class, you can use: an <article> element. Here is a good article by W3 Schools.

  Hope that helps!

  Best of luck with your coding journey!

  2

  ---

  

  Abd-ur-Rahman•45

  @Abd-ur-Rahman03829Posted over 3 years ago

  @shahin1987 Thanks for your appriciation and guiding me on the right way

  0
• 

  Anmol Kapil•655

  @anmolkapilPosted over 3 years ago

  Use "position:absolute" property on bubble svg. Then adjust their position accordingly.

  2

  ---

  

  Shahin NJ•1,190

  @SJ-NosratPosted over 3 years ago

  @anmolkapil

  Good suggestion, but that would work only if he had added the bg-pattern-top and bg-pattern-bottom as <img> tags to the HTML structure. However, he added the images as background-image with the CSS rules.

  With respect to your suggestion, don't forget to apply the position: relative; to the parent container too.

  1

  

  Anmol Kapil•655

  @anmolkapilPosted over 3 years ago

  @shahin1987 Oh, I didn't see his code.

  Thanks for pointing it out. Also, Great job for explaining things in such detail.

  0
• 

  Moeen Mahmud•180

  @moeen-mahmudPosted over 3 years ago

  Hello Abd-ur,

  Your approach to the solution is good. For the background, you can use the images as "fixed position", something like below:

  .background_image--top {
    position: fixed;
    bottom: 45%;
    right: 50%;
  }
  
  .background_image--bottom {
    position: fixed;
    top: 50%;
    left: 45%;
  }
  

  You can view my code here: https://github.com/moeen-mahmud/profile-card-component

  0

  ---

  

  Abd-ur-Rahman•45

  @Abd-ur-Rahman03829Posted over 3 years ago

  @fahim-mahmud Thanks for your reply Moeen. It's really helpfull

  1