profile-card-component-main

Community feedback

• 

  vintech05•370

  @vintech05Posted over 1 year ago

  Greetings Tanobia,

  Congratulations on completing this challenge! One thing to appreciate though, is that your code looks easy to read! but also I believe there is a bit of CSS overengineering here...

  instead of repeating yourself with multiple lines of border-radius, you can simply use CSS one-liners such as

  border-radius: top right bottom left;
  

  last thing, you don't want to stress yourself with positioning, especially for the avatar. this is when pseudo-class comes into play:

  .avi {
  border: solid 5px;
  border-radius: 50%;
  border-color: aliceblue;
  position: relative;
  }
  
  .avi::before {
  content: ' ';
  top: 0;
  left: 0;
  position: absolute;
  background-image: url(/images/card-bg);
  width: 100%;
  height: 50%; //this one may vary so feel free to explore the height yourself!//
  }
  

  so make sure the bg-image is inside the avatar! and the rest of it is going to be a cakewalk.

  I hope this helps

  0