.[html]<style>
    /* основа */
         .infa {
            width: 600px;
            height: 800px;
            background-color: #9b9b9b;
            border-radius: 20px;
        }

    /* вверхний блок */
        .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);
    }
   
   
    /* Настройки рамки*/
    .mask{
        --uiMaskClipPath: var(--maskClipPath);
        box-sizing: var(--maskBoxSizing, border-box);
        display: var(--maskDisplay, inline-flex);
        padding: var(--maskStrokeThickness, 3px);
        clip-path: var(--uiMaskClipPath);
        background-color: var(--maskStrokeColor, currentColor);
        --maskStrokeColor: #ab7445; /* Цвет рамки */
        --maskStrokeThickness: 5px; /* Ширина рамки */
    }
    .mask-img{
        max-width: 100%;
        display: block;
        clip-path: var(--uiMaskClipPath);
    }
   
    .mask,
    .mask-img{
        transition: clip-path var(--maskAnimationDuration, .2s) var(--maskAnimationTimingFunction, ease-out);
    }
   
   
    /* ромб рамка */
    .mask-four{
        --maskClipPath: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    }
   
    .tooltip_2 img {
    width: 90px;
    }
         
   /* подсказки */ 
    span.tooltip_2 {
      position: relative;
      display: inline-block;
      color: red;
      cursor: pointer;
   
    }
    .tooltip_link {
      display: none;
    }
    span.tooltip_2:hover .tooltip_link {
      display: block;
      position: absolute;
      width: 80px;
      color: #fff;
      background: rgba(0,0,0,0.5);
      padding: 8px 10px;
      border-radius: 4px;
      top: 70px;
      z-index: 1;
    }
   
   
    </style>
    <div class="infa">
   
   
    <div class="hader">
        <img src="https://forumupload.ru/uploads/001c/29/ca/4/216597.jpg">
        <span>
            <b>Name Familia ²⁰</b> <br>
             <center> ◈ раса ◈ организация ◈ должность ◈ </center><br>
            <i>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum nesciunt, eaque fuga cum fugit voluptatum quam pariatur! Ad laboriosam asperiores.</i>
        </span>
    </div>
   
    <div class="but">
        <div class="l"> <a  href="#" target="_blank">Анкета</a> <a href="#" target="_blank">Дневник</a> </div>
        <div class="r"> <a href="#" target="_blank">Отношения</a> </div>
    </div>
   
   
    <div class="cent">
        <div class="qtat">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi quam deserunt eveniet iure maiores culpa ad omnis suscipit dolore, fugiat dolores modi impedit, obcaecati, officiis error deleniti non soluta repellendus.</p>
        </div>
   
        <div class="otp">
            <div><img src="https://forumupload.ru/uploads/001c/29/ca/4/216597.jpg">
            <p><b>Name Familia</b> <br><i>описание </i></p></div>
           
            <div><img src="https://forumupload.ru/uploads/001c/29/ca/4/216597.jpg">
            <p><b>Name Familia</b> <br><i>описание </i></p></div>
        </div>
    </div>
   
   
   
    <div class="but">
    <div class="podar"> <t>подарки </t></div>  <div class="ziv"><t>ачивки</t> </div></div>

    <div class="cent">

        <div class="dar">

    <span class="tooltip_2"><span class="tooltip_link">подсказка со ссылкой </span>
    <div class="mask mask-four mask-four-frame"><img src="https://forumupload.ru/uploads/001c/29/ca/3/t323428.png" class="mask-img" alt="">
    </div></span>

    <span class="tooltip_2"><span class="tooltip_link">подсказка со ссылкой </span>
    <div class="mask mask-four mask-four-frame"><img src="https://forumupload.ru/uploads/001c/29/ca/3/t721585.png" class="mask-img" alt="">
    </div></span>
   
     <span class="tooltip_2"><span class="tooltip_link">подсказка со ссылкой </span>
    <div class="mask mask-four mask-four-frame"><img src="https://forumupload.ru/uploads/001c/29/ca/4/625150.jpg" class="mask-img" alt="">
    </div></span>

        </div>
   
        <div class="dar">
    <img src="https://forumupload.ru/uploads/001c/29/ca/4/53001.png"> <img src="https://forumupload.ru/uploads/001c/29/ca/4/303640.png"> <img src="https://forumupload.ru/uploads/001c/29/ca/4/53001.png"> <img src="https://forumupload.ru/uploads/001c/29/ca/4/303640.png"> <img src="https://forumupload.ru/uploads/001c/29/ca/4/53001.png"> <img src="https://forumupload.ru/uploads/001c/29/ca/4/303640.png">
        </div>
    </div>
   
        <div class="cat"> плашки </div>
        <div class="pla"> <img src="https://forumupload.ru/uploads/001c/29/ca/4/273824.png"> <img src="https://forumupload.ru/uploads/001c/29/ca/4/444176.png"><img src="https://forumupload.ru/uploads/001c/29/ca/4/273824.png"> <img src="https://forumupload.ru/uploads/001c/29/ca/4/444176.png"><img src="https://forumupload.ru/uploads/001c/29/ca/4/273824.png"> <img src="https://forumupload.ru/uploads/001c/29/ca/4/444176.png">
        </div>

   
    </div>[/html]

Отредактировано Джери (2024-08-11 20:44:34)