+ نکته کدنویسی بلد نیستم و دستو پا شکسته با چت جی پی تی یچیزایی یاد گرفتم و ممکنه خیلی از اصطلاحا رو ندونم و یا روشام اصولی نباشه!

اول از همه باید یه <div> برای پروفایل بسازیم و تا عکس پروفایل رو توش جا بدیم:

این کد رو داخل بخش <div class="header"> میزاریم.

<div class="header">
<div class="mainprofile">
</div>
</div>

حالا میایم عکس پروفایل و پروانه امون رو داخل <div> قرار میدیم: 

<div class="header">
<div class="mainprofile">
<img class="mainproilemark" src="IMG LINK" alt="image">
<img class="mainproilepic" src="https://sevdafjsh.neocities.org/img/22c8f4d0274777158ed61b4712e2dd44.jpg" alt="image">
</div>
</div>

کار کد html تمومه حالا میریم به css تا بهش استایل دلخواهمون رو بدیم.

اگه از قالب شخصی سازی شده عرفان استفاده کنید و یا مشابه قالب من عکس پروفایل توی بخش header تون هست طبق این استایلی که میگم برید؛ اگرم نه که میتونین خودتون تو بخش هدرتون اگه چیز میز دیگه ای ندارین، پروفایل بسازید.

اولین کار تو تغییر استایل پروفایل، تغییر display بخش header هست؛

این استایل رو به header تون بدید:

.header {
display: flex;
flex-direction: column;
align-items: center;
/*اگه استایل دیگه ای هس بهش دست نزنید و فقط اینارو اضافه کنید*/
}

حالا نوبت تغییر پوزیشن پروفایل و پروانمونه:

.mainprofile {
    position: relative;
    width: 150px;
}

.mainproilemark{
    position: absolute;
    width: 38px;
    height: auto;
    top: -12px;
    right: 26px;
}

.mainproilepic {
    width: 80px;
    border-radius: 100%;
}

و تمام