Profile Card Component

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!

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

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