инфо[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="ссылка на картинку">
        <span>
            <b>German Richter ³⁷</b> <br>
             <center> ◈ Хуман ◈ Полиция и Контроль ◈ Прокурор, следователь ◈ </center><br>
            <i>После третьего стакана все стало черно-белым.</i>
        </span>
    </div>
   
    <div class="but">
        <div class="l"> <a  href="https://alterparadox.rusff.me/viewtopic.php?id=175" target="_blank">Анкета</a> <a href="https://alterparadox.rusff.me/viewtopic.php?id=176" target="_blank">Дневник</a> </div>
        <div class="r"> <a>Отношения</a> </div>
    </div>
   
   
    <div class="cent">
        <div class="qtat">
            <p>Осторожно, злая собака. </p>
        </div>
   
        <div class="otp">

        </div>
    </div>
   
    </div>
[/html]