*наведи на картинку
[html]<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Wire+One' rel='stylesheet' type='text/css'>

<div class="kate1" style="background-image:url(https://i.ibb.co/LQ1xnSJ/400400.jpg);">
    <div class="kate2"><div id="kat">Господин [NPC]</div>
        <table><tr>
            <td>
                <div style="width: 170px; height: 250px; border: 4px solid #1F424E; background-image:url(https://i.ibb.co/jL4fHNS/170250.jpg);"></div>
            </td>
            <td>
                <div class="k2">
                    <div class="kat2"> Искренняя детская, семейная, чистая и не требующая ответа любовь кипит в жилах Ба к этому человеку, а, может, совсем не человеку.
<br>
<br>
Всегда скрывающий лицо, не говорящий ни женским, ни мужским голосом хозяин играет огромную роль в душе раба. Отец, мать, учитель, великий, с большой буквы, Господин, тот, кто заботится о душе Нэргуя. Искренние ли эмоции или нет, испытывает хозяин к своему рабу, – не интересует, но Господин никогда не был жесток! Серьезен, требователен – да, но не жесток.
<br>
<br>
Он купил ребенка в Кафа, воспитал и научил по своему усмотрению, выдрессировал и слепил то, что хотел видеть перед собой: верного пса, что никогда не пойдёт против хозяина, что благоговением ловит каждое слово и доверяет больше, чем себе.
<br>
<br>
Ведёт одному ему известную игру, но кто знает, что на самом деле прячется за фарфоровыми масками Господина.
</div>
                </div>
            </td>
        </tr></table>
        <table><tr>
            <td id="kaat">ВЕЛИКИЙ</td>
            <td id="kaat">МАСТЕР</td>
            <td id="kaat">ИГРАТЬ</td>
            <td id="kaat">НЕИЗВЕСТНОСТЬ</td>
        </tr></table>
        <div id="katf"></div>
    </div>
</div>
<center>
    <a href="https://mystiqueworkshop.tumblr.com/" style="color: #1F424E;"><div style="font-family: 'Pacifico'; font-size: 11px; text-align: center; color: ##1F424E;">Mystique☪ © 2020</div></a>
</center>
<style type="text/css">
    .kat2::-webkit-scrollbar-button:start:decrement, .kat2::-webkit-scrollbar-button:end:increment{display:none;} .kat2::-webkit-scrollbar{  width:5px; height: auto; background-color: #FFF;}
    .kat2::-webkit-scrollbar-track-piece {  background-color: #1F424E;}
    .kat2::-webkit-scrollbar-thumb:vertical{  width: 5px; height:5px; background-color: #FFF;}
   
    .rek3::-webkit-scrollbar-button:start:decrement, .rek3::-webkit-scrollbar-button:end:increment{display:none;} .rek3::-webkit-scrollbar{  width:5px; height: auto; background-color: #FFF;}
    .rek3::-webkit-scrollbar-track-piece {  background-color: #FFF;}
    .rek3::-webkit-scrollbar-thumb:vertical{  width: 5px; height:5px; background-color: #85DD6F;}
   
    .kate1{margin: 0 auto; width: 400px; height: 400px; overflow: hidden; border: 10px solid #1F424E;}
    .kate2{font: 9px century gothic; color: #FFF; padding:5px; background: #1F424E;  width: 390px; height: 390px; position:relative; top:-400px; transition:ease-in-out 0.5s;-webkit-transition:ease-in-out 0.5s;-ms-transition:ease-in-out 0.5s;-moz-transition:ease-in-out 0.5s;} .kate1:hover .kate2{top: 0px;}
    #kat{font-family: 'Pacifico'; font-size: 28px; text-align: center;}
    .kat2{width: 190px; height: 250px; overflow: auto; font: 10px century gothic; padding: 5px; color: #FFF; text-align: justify;}
    #kaat{width:95px; height: 45px; background: #FFF; font: 10px century gothic; color: #000; text-align: center;}
    #katf{font: 18px 'Wire One'; color: #FFF; text-align:center;}
   
   
    .rek1{margin: 0 auto; width: 200px; height: 120px; overflow: hidden; border: 20px solid #1F424E;}
    .rek3{margin: 0 auto; padding: 4px; overflow: auto; color: #fff; font: 10px century gothic; width: 190px; height: 65px;text-align: justify;}
   
    .rek2{font: 9px century gothic; color: #FFF; padding:5px; background: #85DD6F;  width: 190px; height: 110px; position:relative; top:-120px; transition:ease-in-out 0.5s;-webkit-transition:ease-in-out 0.5s;-ms-transition:ease-in-out 0.5s;-moz-transition:ease-in-out 0.5s;} .rek1:hover .rek2{top: 0px;} #reka{font-family: 'Pacifico'; font-size: 15px; text-align: center;}
</style>
[/html]

Отредактировано Nergui Ba (2020-07-02 07:13:33)