Profile Card Component

Community feedback

• 

  Shahin NJ•1,190

  @SJ-Nosrat

  Posted about 4 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!

  21
• 

  Anmol Kapil•655

  @anmolkapil

  Posted about 4 years ago

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

  22
• 

  Moeen Mahmud•180

  @moeen-mahmud

  Posted about 4 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

  01