инфо[html]<style>
/* основа */
.infa {
width: 710px;
height: 500px;
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: 50%;
}
.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/2/405740.jpg">
<span>
<b>Alan Howard <sup>23</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=39#p86">Анкета</a> <a href="https://alterparadox.rusff.me/viewtopic.php?id=48#p455">Дневник</a> </div>
<div class="r"> <a>Отношения</a> </div>
</div>
<div class="cent">
<div class="qtat">
<p>Мой милёнок под забором кол осиновый нашёл.
Все вампиры примеряли - никому не подошёл! </p>
</div>
<div class="otp">
<div><img src="ссылка на картинку">
<p><b><a href="ссылка">Ник</a> </b> <br><i>важный человек для персонажа 1 </i></p></div>
<div><img src="ссылка на картинку">
<p><b><a href="ссылка">Ник</a></b> <br><i>важный человек для персонажа 2 </i></p></div>
</div>
</div>
</div>
[/html]
