инфо[html]<style>
/* основа */
.infa {
width: 710px;
height: 700px;
background-color: #9b9b9b;
border-radius: 20px;
margin: 5px auto;
}
/* вверхний блок */
.hader {
padding: 20px;
display: flex;
text-align: justify;
}
.hader img {
width: 200px;
border-radius: 100px;
margin-right: 30px;
}
.hader span {
margin-top: 30px;
}
.hader b {
text-transform: uppercase;
font-size: 30px;
}
/* ссылки */
.but {
padding: 0px 20px;
display: grid;
grid-auto-flow: column;
grid-column-gap: 10px
}
.but a{
text-decoration: none;
background-color: white;
border: 2px solid black;
border-radius: 10px;
padding: 10px 32px;
color: black;
margin: 0px 6px;
}
.r a{
padding: 10px 90px;
margin: 0px 10px;
}
.r, .l {
width: 50%;
display: flex;
/* align-items: center;
justify-content: center; */
}
/* центр - цитаты и отношения */
.cent {
display: flex;
}
.qtat {
width: 50%;
padding: 10px 20px;
text-align: justify;
}
.otp {
width: 40%;
}
.otp div{
display: flex;
padding: 5px 0px;
}
.otp img {
width: 80px;
height: 80px;
border-radius: 100px;
}
.otp p {
padding-left: 10px;
}
/* подарки и награды */
.podar, .ziv {
width: 50%;
display: flex;
/* align-items: center;
justify-content: center; */
}
.cat {
margin: 10px 35px;
background-color: white;
border: 2px solid black;
border-radius: 10px;
padding: 10px 30px;
color: black;
text-align: center;
}
.dar {
margin: 10px 20px;
overflow-y: scroll;
height: 100px;
width: 50%;
}
.pla {
margin: 10px 20px;
overflow-y: scroll;
height: 100px;
}
.but t{
text-decoration: none;
background-color: white;
border: 2px solid black;
border-radius: 10px;
padding: 10px 100px;
margin: 0px 10px;
color: black;
}
/* скроллы*/
.dar::-webkit-scrollbar,
.pla::-webkit-scrollbar {
width: 3px;
}
.dar::-webkit-scrollbar-track ,
.pla::-webkit-scrollbar-track {
-webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset;
background-color: #f9f9fd;
border-radius: 10px;
}
.dar::-webkit-scrollbar-thumb,
.pla::-webkit-scrollbar-thumb{
border-radius: 10px;
background: linear-gradient(180deg, #00c6fb, #005bea);
}
</style>
<div class="infa">
<div class="hader">
<img src="https://forumupload.ru/uploads/001c/3b/0e/12/840902.png">
<span>
<b>Melania Moonlight <sup>202</sup></b> <br>
<center> ◈ ведьма ◈ контроль ◈ врач-исследователь ◈ </center><br>
<i>Она так похожа на луну: не согревает и свет не излучает, отражает, но тем самым покажет заблудившемуся путь (или пошлет на все четыре стороны).</i>
</span>
</div>
<div class="but">
<div class="l"> <a href="https://alterparadox.rusff.me/viewtopic.php?id=92#p2830" target="_blank">Анкета</a> <a href="https://alterparadox.rusff.me/viewtopic.php?id=96#p2979" target="_blank">Дневник</a> </div>
<div class="r"> <a>Отношения</a> </div>
</div>
<div class="cent">
<div class="qtat">
<p>Там, где луна освещает путь<br>
А солнце дарит мудрость свою<br>
Где птицы никогда не споют<br>
О том, что на душе не вернуть.</p>
</div>
<div class="otp">
<div><img src="https://forumupload.ru/uploads/001c/3b/0e/12/798798.png">
<p><b><a href="https://alterparadox.rusff.me/profile.php?id=42">Raymond Moore</a> </b> <br><i>родной брат. Мы нашли друг друга спустя столетия.</i></p></div>
<div><img src="https://forumupload.ru/uploads/001c/3b/0e/12/681408.png">
<p><b><a href="https://alterparadox.rusff.me/profile.php?id=20">Esfira Burns</a></b> <br><i>Единственная близкая и лучшая подруга. Мое солнце, что согреет.</i></p></div>
<div><img src="https://forumupload.ru/uploads/001c/3b/0e/12/392167.png">
<p><b><a href="https://alterparadox.rusff.me/profile.php?id=46">Hwang Yu Jin</a></b> <br><i>Он же Юджин, он же мое небо, он же мой любимый и единственный. </i></p></div>
</div>
</div>
</div>
[/html]
