Profile Card

Community feedback

• 

  Rohit Kumar Saini•270

  @rockingrohit9639Posted over 2 years ago

  Hey @joaojgabriel

  Your background does not match the provided design. There are two approaches to doing this.

  First Approach

  • You can use background-image to set the background images and play with background properties like background-size, background-repeat, etc. to make your background look like a design.

  Second Approach

  • You can give position: relative; to the parent element and can have two img with the source of images and you can position them accordingly.

  .parent {
      position: relative;
  }
  
  .img-top {
      position: absolute;
      width: 100%;
      top: -50%; /* this can be different according to you.*/
      left: -50%; /* this can be different according to you.*/
  }
  
  .img-bottom {
      position: absolute;
      width: 100%;
      bottom: -50%; /* this can be different according to you.*/
      right: -50%; /* this can be different according to you.*/
  }
  
  Hope this will help you in improving your design.
  

  Marked as helpful

  0
• 

  Leo•440

  @SouiciaPosted over 2 years ago

  Hello Joao (sorry for missing accent on the A),

  First of all, congratulation on finishing the design.

  Instead of using border around the profile image, use padding, and then set background-color to white. This will avoid small gaps between border and image that show the background color.

  Another thing, if you wrote profile > * {background-color: white), you do need to declare the same background-color in the .bottom-half class. Also, you forgot to add a small opacity to the <hr> tag to follow the design, but that's just small details, or you can use hsla for color to set opacity as well.

  Have a great day :)

  Marked as helpful

  0