Личная страница

[html]<style>

personalpage {
display: block;
width: 849px;
height: 446px;
background-image: url(https://forumstatic.ru/files/001c/be/2e/69814.webp);
position: relative;
margin: auto;
}

personalpage::before {
content: '';
background-image: url(https://forumstatic.ru/files/001c/b9/21/27160.png);
position: absolute;
bottom: -106px;
left: -31px;
width: 183px;
height: 211px;
}

personalpage::after{
content: '';
background-image: url(https://forumstatic.ru/files/001c/b9/21/23219.png);
position: absolute;
top: -69px;
right: -20px;
width: 145px;
height: 150px;
}

personalpage * {
box-sizing: border-box;
}

personalpage *::-webkit-scrollbar {
width: 2px;
height: 2px;
}

personalpage char {
position: absolute;
bottom: 50px;
left: 78px;
width: 215px;
height: 58px;
display: flex;
gap: 5px;
padding-left: 70px;
flex-direction: column;
justify-content: center;
}

personalpage char a {
font-family: 'MalibuSundaySerif';
font-weight: 400;
font-size: 11px;
line-height: 1;
text-transform: uppercase;
color: white !important;
}

personalpage char cast {
font-family: Playfair Display;
font-weight: 700;
font-style: Italic;
font-size: 9px;
line-height: 1;
color: rgba(194, 194, 194, 1);
}

personalpage char img {
width: 58px;
height: 58px;
position: absolute;
top: 0px;
left: 0px;
object-fit: cover;
}

personalpage pptwinks {
display: flex;
gap: 5px;
flex-direction: column;
position: absolute;
top: 68px;
left: 89px;
width: 219px;
height: 256px;
overflow: auto;
padding-right: 35px;
}

personalpage pptwinks twink {
display: flex;
gap: 5px;
flex-direction: column;
justify-content: center;
background: linear-gradient(180deg, rgba(75, 75, 75, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
border: 1px solid rgba(104, 104, 104, 0.7);
border-radius: 5px;
padding: 10px !important;
cursor: pointer;
transition: background .4s ease;
}

personalpage pptwinks twink:hover {
background: linear-gradient(180deg, rgba(75, 75, 75, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
}

personalpage pptwinks twink a {
font-family: 'MalibuSundaySerif';
font-weight: 400;
font-size: 11px;
line-height: 1;
text-transform: uppercase;
color: white !important;
}

personalpage pptwinks twink cast {
font-family: Playfair Display;
font-weight: 700;
font-style: Italic;
font-size: 9px;
line-height: 1;
color: rgba(194, 194, 194, 1);
}

personalpage ppbgs {
overflow: auto;
width: 409px;
height: 173px;
position: absolute;
top: 68px;
left: 367px;
object-fit: cover;
display: flex;
flex-wrap: wrap;
gap: 4px 9px;
}

personalpage ppbgs img {
background: linear-gradient(180deg, rgba(75, 75, 75, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
border: 1px solid rgba(104, 104, 104, 0.7);
border-radius: 5px;
width: 70px;
height: 70px;
opacity: .7;
transition: opacity .4s ease;
}

personalpage ppbgs img:hover {
opacity: 1;
}

personalpage .ppgifts {
overflow-x: auto;
overflow-y: hidden;
width: 388px;
height: 63px;
position: absolute;
top: 310px;
left: 367px;
padding-bottom: 5px;
object-fit: cover;
display: flex;
flex-wrap: nowrap;
gap: 7.6px;
}

personalpage .ppgifts ttl {
display: none !important;
}

personalpage .ppgifts gift img {
background: linear-gradient(180deg, rgba(75, 75, 75, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
border: 1px solid rgba(104, 104, 104, 0.7);
border-radius: 5px;
width: 58px;
height: 58px;
opacity: .7;
transition: opacity .4s ease;

}

personalpage .ppgifts gift:hover img {
opacity: 1;

}

</style>

<char>

<img src='https://forumstatic.ru/files/001c/b9/21/74555.png'>
<a href='#'>Name Surname</a>
<cast>fandom title</cast>
</char>

<twink>
<a href='#'>Name Surname</a>
<cast>fandom title</cast>
</twink>