profile-card-component-main

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