<inco><a href="ссылка на профиль">name</a> - внешность - должность</inco>
[html]<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i" rel="stylesheet">
</style>
<div id="all">
<ttl>list of
<br>roles</ttl>
<img1 style="background-image: url(http://forumstatic.ru/files/0019/78/a5/76018.jpg)"></img1>
<scr></scr>
<quot>Славно, ты прошел все предыдущие инстанции, осталось только внести тебя в списки
</quot>
<main>
<h1>ОРДЕН ОХОТНИКОВ</h1>
<inco><a href="link">name</a> - внешность - должность</inco>
<inco><a href="link">name</a> - внешность - должность</inco>
<h1>ОРДЕН ИСКАТЕЛЕЙ</h1>
<inco><a href="link">name</a> - внешность - должность</inco>
<inco><a href="link">name</a> - внешность - должность</inco>
<h1>ЦЕРКОВНИКИ</h1>
<inco><a href="link">name</a> - внешность - должность</inco>
<inco><a href="link">name</a> - внешность - должность</inco>
<h1>ОРДЕН ЧУДОТВОРЦЕВ</h1>
<inco><a href="link">name</a> - внешность - должность</inco>
<inco><a href="link">name</a> - внешность - должность</inco>
<h1>ПРОСТЫЕ ГРАЖДАНЕ</h1>
<inco><a href="link">name</a> - внешность - должность</inco>
<inco><a href="link">name</a> - внешность - должность</inco>
</main>
</div>
<a href="http://wecode.jcink.net/index.php?showuser=4918"><div style="width: 450px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">liv's codes</div></a>
<style>
#all { height: 500px; width: 500px; background: #D5DADA; margin: auto; position: relative; overflow: hidden}
#all img1 {height: 500px; width: 305px; background-size: cover; background-position: center; position: absolute; left: 0px}
#all scr { height: 500px; width: 305px; position: absolute; background: #adacac;; mix-blend-mode: screen; left: 0}
#all img1, #all scr {-webkit-transition: 0.6s ease 0.4s; -moz-transition: 0.6s ease 0.4s; -ms-transition: 0.6s ease 0.4s; -o-transition: 0.6s ease 0.4s}
#all input {display: none}
#all ttl {height: 110px; width: 308px; background: none; position: absolute; left: 0px; bottom: -40px; font-family: abril fatface; font-size: 50px; line-height: 34px; text-transform: uppercase; color: #474542; z-index: 10; opacity: 0.4; text-align: right; -webkit-transition: 0.6s ease 0.7s; -moz-transition: 0.6s ease 0.7s; -ms-transition: 0.6s ease 0.7s; -o-transition: 0.6s ease 0.7s}
#all quot {width: 200px; background: #f0f0f0; position: absolute; box-sizing: border-box; padding: 20px; text-align: center; font-family: lora; font-style: italic; font-weight: 400; font-size: 10px; letter-spacing: 1px; line-height: 16px; text-align: justify; text-align-last: center; left: 200px; top: 150px; -webkit-transition: 0.6s ease 0.7s; -moz-transition: 0.6s ease 0.7s; -ms-transition: 0.6s ease 0.7s; -o-transition: 0.6s ease 0.7s}
#all quot::before {height: 1px; width: 100px; background: #474542; content: ""; position: absolute; top: 5px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg);left: -30px; }
#all:hover ttl, #all:hover quot {-webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; }
#all:hover ttl {opacity: 0}
#all:hover quot {opacity: 0}
#all:hover img1, #all:hover scr {left: -150px; -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; -ms-transition-delay: 0.7s; -o-transition-delay: 0.7s;}
#all main {z-index: 11; background: none; height: 500px; width: 300px; position: absolute; right: 0; box-sizing: border-box; border: 25px solid transparent; border-right: 15px solid transparent; padding-right: 10px; font-family: noto serif; font-size: 9px; text-transform: lowercase; letter-spacing: 3px; line-height: 15px; opacity: 0; -webkit-transition: 0.6s ease; -moz-transition: 0.6s ease; -ms-transition: 0.6s ease; -o-transition: 0.6s ease; font-style: italic;overflow: auto; color: #adacac}
#all h1 {font-family: abril fatface; font-size: 20px; margin: 20px 0px 20px 0px; letter-spacing: 0; color: #000000; font-style: normal; text-transform: uppercase}
#all a { text-decoration: none; font-weight: 700; display: block}
#all:hover main {opacity: 1; -webkit-transition-delay: 1.1s; -moz-transition-delay: 1.1s; -ms-transition-delay: 1.1s; -o-transition-delay: 1.1s;}
#all inco {color: #75807B}
#all updt {color: #B0B9B8}
#all inco > a {color: #75807B}
#all updt > a {color: #B0B9B8}
#all main::-webkit-scrollbar {width: 5px}
#all main::-webkit-scrollbar-thumb {background: #D5DADA; border: 1px solid #B0B9B8; }
#all main::-webkit-scrollbar-track {background: #D5DADA!important; border: none!important; }
[/html]
