Character Status
Код:
<!--HTML--><div id="spiritworkroom"> <div class="spiritsecond"> <div class="tabsi"> <input id="tab1" type="radio" name="tabsi" checked> <label for="tab1">❖ Учёт персонажей</label> <input id="tab2" type="radio" name="tabsi"> <label for="tab2">❖ Занятость</label> <section id="content-tab1"> <table> <tbody> <tr> <td><strace>Vampires</strace> <strace1> ❖ <a href="https://unholymess.rusff.me/profile.php?id=11">Xavier Arden</a><br> </strace1></td> <td><strace>Valkyries</strace> <strace1> ❖ <a href="https://unholymess.rusff.me/profile.php?id=7">fox sinclair</a> <br> </strace1></td> <td><strace>Werewolves</strace> <strace1> ❖ <a href="https://unholymess.rusff.me/profile.php?id=5">mike sloan</a> <br> ❖ <a href="https://unholymess.rusff.me/profile.php?id=12">John Sinclair</a> <br> </strace1></td> </tr> <tr> <td><strace>Witches & Warlocks</strace> <strace1> ❖ <a href="https://unholymess.rusff.me/profile.php?id=9">Eva Knox</a><br> </strace1></td> <td><strace>Succubi</strace> <strace1> ❖ <a href="https://unholymess.rusff.me/profile.php?id=6">mars mayers</a> <br> </strace1></td> <td><strace>Filomorts </strace> <strace1>❖ <a href="https://unholymess.rusff.me/">name surname</a><br> </strace1></td> </tr> <tr> <td><strace>Cambions</strace> <strace1> ❖ <a href="https://unholymess.rusff.me/profile.php?id=4">leo ricci</a> <br> ❖ <a href="https://unholymess.rusff.me/profile.php?id=8">parker daniels</a> <br> ❖ <a href="https://unholymess.rusff.me/profile.php?id=10">Rafaella Darling</a> <br> </strace1></td> <td><strace>Humans</strace> <strace1> ❖ <a href="https://unholymess.rusff.me/profile.php?id=13">morgan ransom</a><br> </strace1></td> <td></td> </tr> </tbody> </table></blockquote> </figure> </section> <section id="content-tab2"> <table> <tbody> <tr> <td> <strace>Стражи (СМС)</strace> <strace2> ❖ <a href="https://unholymess.rusff.me/profile.php?id=4">leo ricci</a><br> </strace2></td> <td><strace>Закон и порядок</b></strace> <strace2> ❖ Полиция, отдел по чрезвычайным происшествиям: <a href="https://unholymess.rusff.me/profile.php?id=5">mike sloan</a><br> </strace2></td> </tr> <tr> <td><strace>Медицина</strace> <strace2> ❖ <a href="https://unholymess.rusff.me/">name surname</a><br> </strace2> </td> <td><strace>Образование и культура</strace> <strace2> ❖ <a href="https://unholymess.rusff.me/">name surname</a><br> </strace2></td> </tr> <tr> <td><strace>Масс-медиа</strace> <strace2> ❖ Утреннее шоу «The Big Easy Morning», ведущая: <a href="https://unholymess.rusff.me/profile.php?id=6">Mars Myers</a><br> ❖ Ведущая true crime подкаста <a href="https://unholymess.rusff.me/profile.php?id=8">parker daniels</a> <br> ❖ Медийная личность, актриса, модель: <a href="https://unholymess.rusff.me/profile.php?id=10">Rafaella Darling</a> <br> </strace2></td> <td><strace>Сфера услуг</strace> <strace2> ❖ Антикварная лавка “Saint & Sinner Curiosities”, владелец: <a href="https://unholymess.rusff.me/profile.php?id=7">Fox Sinclair</a><br> ❖ Бойцовский клуб для сверхъестественных существ "Vortex", владелец: <a href="https://unholymess.rusff.me/profile.php?id=11">Xavier Arden</a><br> ❖ горничная в Hotel Monteleone: <a href="https://unholymess.rusff.me/profile.php?id=9">Eva Knox</a><br> ❖ совладелица «Ransom charter & treks»: <a href="https://unholymess.rusff.me/profile.php?id=13">morgan ransom</a><br> </strace2></td> </tr> <tr> <td><strace>Криминал</strace> <strace2> ❖ Чёрный рынок сверхъестественного, браконьер: <a href="https://unholymess.rusff.me/profile.php?id=5">mike sloan</a><br> </strace2></td> <td><strace>Другое</strace> <strace2> ❖ <a href="https://unholymess.rusff.me/">name surname</a><br> </strace2></td> </tr> </tbody> </table> </section> </div> </div> </div> <div class="clearer"></div> <style>/* код от вещего духа */ @import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Prata&subset=cyrillic'); @import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Old+Standard+TT:400,700|Oranienbaum|Oswald:300,400,700|PT+Sans:400,700|Roboto+Condensed:300,400,700|Roboto:300,400,700'); #spiritworkroom {width: 640px; height: 700px; margin:auto;} .spiritfirst {float: left; margin: 10px; width: 190px; height: 490px; box-shadow: 0 0 0 1px rgba(0,0,0,.2); overflow: hidden; position: relative; border: 5px solid #fefefe} .spiritfirstpic {margin:auto; width: 190px; height: 490px;} .spiritfirsttitle {font-family: playfair display; font-weight: 900; width: 190px; color: #dfdfdf; text-shadow: 1px 1px 0px #000; font-size: 18px; height: 73px; margin: -80px 0 0 0px; z-index: 10; position: relative; padding-left: 10px; background: rgba(0,0,0,.65); transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1) .15s} .spiritfirsttitle subtitle {box-shadow: 0 -2px 0 0 rgba(255,255,255,.1); font-family: pt sans; font-weight: normal; color: #cecece; text-shadow: 1px 1px 0px #333; font-size: 9px; display: block; text-align: right; letter-spacing: 1px; margin-top:4px; margin-right: 20px} .spiritfirsttitle:before {background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.65)); content: ""; display: block; position: absolute; width: 100%; height: 50px; top: -50px; margin-left: -10px} .spiritfirsttext { z-index:8; position: relative; background: rgba(0,0,0,.65); width: 190px; margin: 0px 0 0 0px; font-family: pt sans; font-size: 10px; text-align: justify; padding: 1px 0px; color: #efefef;} .spiritfirsttext about {margin: 10px 15px; display: block; box-shadow: 0 -2px 0 0 rgba(255,255,255,.1); padding-top:10px} .spiritfirsttext:after {background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0)); content: ""; display: block; position: absolute; width: 100%; height: 100px; bottom: -100px; margin-left: 0px} .spiritfirsttext subtitle { text-align: center; display: block; width: 190px; font-size: 9px; font-family: pt sans; color: #999; opacity: 0; transform: translate(0,400px); transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) .15s } .spiritfirst:hover .spiritfirsttitle {margin-top: -530px; } .spiritfirst:hover subtitle {opacity:1; transform: translate(0,0px)} .spiritsecond { background: #a5a19f; width: 645px; margin: 0px; height: 680px; border-radius: 10px; /* box-shadow: 0px 1px 5px 1px; */ border: solid 1px #968484; margin-top: 9px; position: absolute; } .tabsi { padding: 0px; margin: 0 auto; } .tabsi>section { display: none; padding: 15px 15px 15px 20px; height: 600px; overflow-y: auto; margin-right: 3px; color: #000000; font-size: 11px; text-align: left; } .tabsi>section strace{ text-align: center !important; font: 500 12px Alice !important; display: block; text-transform: uppercase; color: #21130f !important; border-radius: 4px; padding: 5px; background: url(https://forumstatic.ru/files/0014/e8/8c/55204.png); } .tabsi>section strace1{ color: #21130f !important; display: block; height: 155px; overflow: auto; text-transform: lowercase; padding: 4px; background: #b7b2af59; border-radius: 10px; } .tabsi>section strace2{ color: #21130f !important; display: block; height: 105px; overflow: auto; text-transform: lowercase; padding: 4px 6px; background: #b7b2af59; border-radius: 10px; } .tabsi>section>p { margin: 0 0 5px; line-height: 1.5; color: #383838; } @keyframes fadeIn { from { transform: translate(-400px,0); transform-origin: 50% 0%; } to { transform: translate(0px,0); } } .tabsi>input { display: none; position: absolute; } .tabsi>label:first-of-type {box-shadow: none} .tabsi>label {display: inline-grid ; margin: 0 -3px -10px; padding: 17px 0px; font-weight: 600; text-align: center; color: #000; /* border-bottom: solid 1px #3c2d2d; */ width: 320px; left: 6px; top: 0px; position: relative; /* background: #000; */ cursor: pointer; font-family: philosopher; text-transform: uppercase; letter-spacing: 1px; font-weight: lighter; } .tabsi>label:after {content: ""; display: block; transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s} .tabsi>label:hover:after {transform: scaleX(1);} .tabsi>label:hover { color: #000000; cursor: pointer; transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s } .tabsi>input:checked+label { color: #804510; } .tabsi>input:checked+label:after {content: ""; display: block; position:absolute; transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s} #tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3 { display: block; } #tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3 { display: block; } </style>