Profile card component using flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Akani, congratulations for your solution!

  Answering your question:

  1.The circle around the image is a border, you just apply to the profile img border: 4px solid white;. In this case is better you use border-radius: 50%; instead of clip-path to create the rounded image and apply the border, see the code bellow:

  .profile_image {
      border: 4px solid white;
      border-radius: 50%;
      /* clip-path: circle(50%); */
      margin-top: -2.5em;
  }
  

  2.To position the background-image is better you manage it directly to the body css instead of using it from the html. See the properties you should use to position these two circles individually:

  body {
      background-image: url(/images/bg-pattern-top.svg), url(/images/bg-pattern-bottom.svg);
      background-repeat: no-repeat;
      background-position: -50px -300px, 950px 500px;
      background-size: cover;
  }
  

  Hope it helps, happy coding!

  Marked as helpful

  1

  ---

  

  Akanni Feyisara•110

  @Feyisara2306Posted over 2 years ago

  @correlucas This is very helpful, thanks a bunch!!!

  1