Profile card with HTML and Sass

👋 Hello there, Hadiza! My name is Vanza.

Good job on finishing this challenge! But I have a little feedback that might be make your css more simple. So my feedback is that instead of creating two img tag, you can try this:

.container {
  background-image: 
    url('../images/bg-pattern-top.svg'),
    url('../images/bg-pattern-bottom.svg');
  background-position: top left, bottom right;
}

As long as the container height is 100vh, I think this should be work.

More information about background positioning, you can try to check this 👉 video

Last but not least, I see that you only use bg-pattern-top.svg on both aside__img

<aside class="aside__img_1">
        <img src="images/bg-pattern-top.svg" alt="">
</aside>
<aside class="aside__img_2">
        <img src="images/bg-pattern-top.svg" alt="">
</aside>

That's it, overall your solution is good and hopefully this will help make it better.

body{ display: flex; justify-content: center; align-items: center; background-color: #19a2ae; } .main-div{ height: 384px; width: 352px; display: flex; justify-content: center; align-items: center; /* background-color: grey; / position: relative; z-index: -4; / border: 3px solid black; / } .header{ background-image: url("background.PNG"); display: flex; justify-content: center; align-items: center; height: 141px; width: 352px; z-index: -3; position: absolute; top: 0; background-color: #3eccd4; border-top-left-radius: 5%; border-top-right-radius: 5%; / border: 3px solid red; */

} .description{ /* border: 3px solid black; */ width: 352px; height: 154px; margin-top: 60px; z-index: -2; position: relative; background-color: white; } .likes{ background-color: white; border-top: 1px solid grey; margin-top: -10px; z-index: -1; position: absolute; top: 300; left: 0; height: 75px; width: 352px;

display: flex;
justify-content: space-around;
align-items: center;

} .circle{ display: flex; justify-content: center; align-items: center; position: absolute;

height: 100px;
width: 100px;
background-color: black;
border-radius: 50%;
margin-top: -80px;
z-index: 1;

} .outer-circle{ display: flex; justify-content: center; align-items: center; position: absolute; top: 97; height: 110px; width: 110px; background-color: yellow; border-radius: 50%; } #heading-two{ display: flex; justify-content: center; align-items: center; text-align: center; margin-top: 58px; } #heading-three{

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

}