Код:
<!--HTML--><div class='postcolor'> <style type="text/css">@import url('https://fonts.googleapis.com/css2?family=Cormorant+Unicase:wght@300;400;500;600;700&display=swap');
/*font-family: 'Cormorant Unicase', serif;*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Unicase:wght@500&family=Spectral:ital,wght@1,400;1,600&display=swap');
.xxth {
--beige:#FFFAFA;
--orange:#A52A2A;
--black:#363636;
--ttl:'Spectral', serif;
--txt:'Spectral', serif;
--script:'Spectral', cursive;
--img:url(https://i.imgur.com/QhkEoaD.gif);
--face:url(https://i.imgur.com/tdyQdmq.gif);
position:relative;
margin:auto;
width:550px;
height:550px;
background:var(--beige);
color:var(--orange);
font-family:var(--txt);
overflow:hidden;
}
.xxth::before{
content:"";
position:absolute;
top:10px;
left:10px;
width:calc(100% - 26px);
height:calc(100% - 26px);
border:3px double var(--black);
}
.xxth ttl {
position:absolute;
top:20px;
left:20px;
width:530px;
height:80px;
text-align:center;
font-family:var(--ttl);
font-size:40px;
line-height:100%;
overflow:hidden;
}
.xxth subttl {
display:block;
font-family:var(--script);
color:var(--black);
font-size:25px;
line-height:30px;
margin-top:-10px;
}
.xxthbox {
position:absolute;
bottom:23px;
left:28px;
width:494px;
height:434px;
overflow:hidden;
}
.xxth ccorner {
position:absolute;
bottom:-6px;
left:-6px;
width:calc(100% + 6px);
height:calc(100% + 6px);
background:var(--beige);
border:3px double var(--black);
border-radius:100%;
transition-duration:0.6s;
transition-delay:1s;
}
.xxth ccorner::before{
content:"";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:calc(100% + 6px);
height:120px;
background:var(--beige);
}
.xxth ccorner::after{
content:"";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
height:calc(100% + 6px);
width:120px;
background:var(--beige);
}
.xxth:hover ccorner {
transform:scale(1.4);
transition-delay:0s;
}
.xxth scorner {
position:absolute;
bottom:0px;
left:0px;
width:calc(100% - 6px);
height:calc(100% - 6px);
border:3px double var(--black);
}
.xxth pic {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0.8);
width:120%;
height:120%;
background-size:cover;
background-image: var(--img);
background-color: white;
background-blend-mode:normal;
border-radius:100%;
overflow:hidden;
transition-duration:1s;
transition-delay:0.6s;
}
.xxth pic::before {
content:"";
position:absolute;
width:100%;
height:100%;
background:var(--beige);
mix-blend-mode:multiply;
}
.xxth pic::after {
content:"";
position:absolute;
width:100%;
height:100%;
background:var(--);
mix-blend-mode:normal;
}
.xxth:hover pic {
transform:translate(-50%,-50%) scale(2);
opacity:0.1;
-webkit-filter:blur(1px);
transition-delay:0.1s;
}
.xxthtab {
position:absolute;
z-index:100;
bottom:43px;
left:23px;
width:524px;
height:464px;
background:transparent;
overflow:hidden;
opacity:0;
transition-delay:0s;
transition-duration:0.5s;
}
.xxth:hover .xxthtab {
opacity:1;
transition-delay:1s;
}
.xxth input {
display: none;
}
.xxthtxt1,
.xxthtxt2,
.xxthtxt3,
.xxthtxt4{
position:absolute;
bottom:-500px;
right:0px;
width:280px;
height:400px;
padding-right:20px;
border-width:20px 20px 0px 20px;
border-style:solid;
border-color:transparent;
text-align:justify;
color:var(--black);
font-size:16px;
word-spacing:-2px;
line-height:22px;
overflow:auto;
opacity:0;
z-index:-100;
transition-duration:0.6s;
}
.xxthtxt1::-webkit-scrollbar,
.xxthtxt2::-webkit-scrollbar,
.xxthtxt3::-webkit-scrollbar,
.xxthtxt4::-webkit-scrollbar,-webkit-scrollbar{
width:3px;
}
.xxthtxt1::-webkit-scrollbar-track,
.xxthtxt2::-webkit-scrollbar-track,
.xxthtxt3::-webkit-scrollbar-track,
.xxthtxt4::-webkit-scrollbar-track{
background:transparent;
border:1px solid transparent;
box-shadow: inset 0px 0px 0px 1px var(--orange);
}
.xxthtxt1::-webkit-scrollbar-thumb,
.xxthtxt2::-webkit-scrollbar-thumb,
.xxthtxt3::-webkit-scrollbar-thumb,
.xxthtxt4::-webkit-scrollbar-thumb{
background:var(--beige);
border-width:2px 0px 2px 0px;
border-style:solid;
border-color:var(--beige);
box-shadow: inset 0px 0px 0px 1px var(--black);
}
#ichi:checked ~ .xxthtxt1,
#ni:checked ~ .xxthtxt2,
#san:checked ~ .xxthtxt3,
#yon:checked ~ .xxthtxt4{
opacity:1;
bottom:0px;
z-index:1;
transition-duration:0.8s;
transition-delay:0.3s;
}
#ichi + label,
#ni + label,
#san + label,
#yon + label{
position:absolute;
top:210px;
left:20px;
width:150px;
height:50px;
line-height:30px;
text-align:center;
font-family:var(--ttl);
font-size:24px;
font-weight:500;
color:var(--black);
cursor: pointer;
z-index:100;
transition-duration:0.3s;
}
#ni + label {
top:calc(190px + 50px + 20px);
}
#san + label {
top:calc(170px + 50px * 2 + 20px * 2);
}
#yon + label {
top:calc(190px + 50px * 3 + 20px * 3);
}
#ichi:checked + label,
#ni:checked + label,
#san:checked + label,
#yon:checked + label{
transform:skewX(-20deg);
font-weight:600;
}
#ichi+ label::before,
#ni + label::before,
#san+ label::before,
#yon + label::before{
content:"[";
opacity:0;
font-weight:600;
transition-duration:0.3s;
}
#ichi + label::after,
#ni + label::after,
#san + label::after,
#yon + label::after {
content:"]";
opacity:0;
font-weight:600;
transition-duration:0.3s;
}
#ichi:checked + label::before,
#ni:checked + label::before,
#san:checked + label::before,
#yon:checked + label::before{
opacity:1;
}
#ichi:checked + label::after,
#ni:checked + label::after,
#san:checked + label::after,
#yon:checked + label::after {
opacity:1;
}
.xxth face {
position:absolute;
top:70px;
left:30px;
width:120px;
height:120px;
background-size:cover;
background-image: var(--face);
background-color: var(--black);
background-blend-mode:screen;
border-radius: 100px;
}
.xxth face::before {
content:"";
position:absolute;
width:100%;
height:100%;
mix-blend-mode:multiply;
}
.xxth line {
position:absolute;
top:170px;
left:95px;
width:1px;
background:var(--orange);
transition-duration:0.5s;
}
#ichi:checked ~ line {
height:30px;
transition-duration:0.5s;
}
#ni:checked ~ line {
height:100px;
transition-duration:0.5s;
}
#san:checked ~ line {
height:170px;
transition-duration:0.5s;
}
#yon:checked ~ line {
height:240px;
transition-duration:0.5s;
}
.xxth p {
margin: 0px 0px 20px 0px;
}
.xxth p::first-letter {
margin-left:20px;
}
.xxth i {
text-shadow:1px 0px var(--orange);
}
.xxth u {
text-decoration:none;
border-width:0px 0px 3px 0px;
border-style:double;
border-color:var(--orange);
box-shadow:0px 1px var(--orange);
}
.xxth a:link,
.xxth a:visited,
.xxth a:active {
text-decoration:underline;
color:var(--orange);
transition-duration:0.3s;
}
.xxth a:hover {
text-decoration:underline;
color:var(--black);
}
.xxth x {
display:block;
margin:0px 0px 10px 10px;
font-family:var(--script);
font-size:24px;
color:var(--orange);
line-height:100%;
width:calc(100% - 20px);
background:transparent;
z-index:1;
}
.xxth x::before{
content:"";
position:absolute;
margin-left:-20px;
width:calc(100% - 20px);
height:24px;
background:transparent;
border-width: 0px 0px 1px 0px;
border-style:solid;
border-color:var(--beige);
z-index:-1;
}</style><div class="xxth">
<ttl>Tian Guan Ci Fu<subttl>Благословение небожителей </subttl>
</ttl>
<div class="xxthbox">
<scorner></scorner>
<ccorner></ccorner>
<pic></pic>
</div>
<div class="xxthtab">
<input type="radio" id="ichi" name="xxth" checked>
<label for="ichi">Story</label>
<input type="radio" id="ni" name="xxth">
<label for="ni">Main</label>
<input type="radio" id="san" name="xxth">
<label for="san">AU - crossfandom</label>
<input type="radio" id="yon" name="xxth">
<label for="yon">babai poetry nights</label>
<line></line>
<face></face>
<div class="xxthtxt1"><x>Story</x><p>В Небесной столице после свержения Цзюнь У воцарилась демократия, образовался некий совет во главе наследным принцем <i>Сяньлэ,</i> начались амнистии и более строгий контроль над возносящимися. Вскоре Медная печь вновь открылась, и поскольку все в прошлый раз проморгали перерожденного Ши Уду, то троица ныне существующих непревзойденных демонов отправилась запечатывать ее. В последний момент что-то пошло не так, и Ши Уду “случайно” скинул туда Хуа Чэна, который из-за мощной наложенной печати так и застрял там в бесконечном кошмаре.
<br>После исчезновения Хуа Чэна потерял всякий интерес к совету и тому шаткому спокойствию, к которому так стремился. Многие небесные чиновники сразу начали целиться на трон Императора, начался беспорядок, борьба за власть, которая была неизбежна, но эти события лишь ускорили ее. В ходе этого совет распался совсем, а Се Лянь отстранился от дел насколько возможно. Новые небожители стали возноситься все реже, и отсутствие свежей крови и сменяемости власти лишь усугубляло неразбериху на Верхних небесах. Пользуясь ситуацией, нечисть из нижнего мира отбилась от рук и немножко позабыла свое место.
<br>В надежде восстановить порядок кто-то из близких друзей Се Ляня накладывает на него чары забвения, чтобы позабыл возлюбленного и вернулся к своим обязанностям, и принц на самом деле забывает, но в Небесную столицу так и не возвращается, осев в мире смертных и поддерживая связь преимущественно лишь с Цинсюанем, который еще задолго до этого начал вести более отрешенный образ жизни.</p></div>
<div class="xxthtxt2"><x>Main</x><p><br><a href="https://barcross.rusff.me/viewtopic.php?id=428">• Be there for you • </a><span> Обычные будни никогда не бывают обычными...
<br>Xie Lian | Hua Cheng</span>
<br><a href="https://barcross.rusff.me/viewtopic.php?id=1628#p108270">Want</a> <span> Kенивое утро в чертоге сумрачных вод [спустя множество лет после всего]
<br>He Xuan | Shi Qingxuan </span>
<br><a href="https://barcross.rusff.me/viewtopic.php?id=1689#p113095">Shoot me</a> <span> небожитель болеет и говорит в бреду запрещенные вещи, что ранят демона больнее любого клинка [осень не счесть какого года]
<br>Shi Qingxuan | He Xuan</span>
<br><a href="https://barcross.rusff.me/viewtopic.php?id=1982#p137705">I’ll give you birthday cake</a> <span> демону, отвыкшему от праздников, не повезло родиться в один день с повелителем ветров [день рождения шуансюаней]
<br>Shi Qingxuan | He Xuan </span>
<br><a href="https://barcross.rusff.me/viewtopic.php?id=2326#p161848">We beautiful now</a> <span> ночь <s>первого</s> возвращения Хуа Чэна
<br>Hua Cheng | Xie Lian </span>
<br><a href="https://barcross.rusff.me/viewtopic.php?id=3110">Deepest in my heart</a> <span> современный мир, 700 лет спустя после падения Небес
<br>Hua Cheng | Xie Lian </span></p>
<x>AU</x><p><br><a href="https://barcross.rusff.me/viewtopic.php?id=2588">За двумя блохэй погонишься - застрянешь на всю ночь</a> <span> Икеа, канун рождества и лютейший снегопад [modern!au]
<br>Xie Lian | Hua Cheng </span>
<br><a href="https://barcross.ru/viewtopic.php?id=3782">Watching for comets</a> <span>никто никогда не переписывал их судьбы, меняя звезды местами, и все идет так, как и было им предначертано
<br>Shi Qingxuan | He Xuan </span>
<br><a href="https://barcross.ru/viewtopic.php?id=3099#p210654">Say you'll stay</a> <span> Хэ Сюаню слишком плохо и тошно, Цинсюань пытается понять [мокрая осень, modrn!au]
<br>Shi Qingxuan | He Xuan</span>
<br><a href="https://barcross.rusff.me/viewtopic.php?id=1631#p108443">Curtain call</a> <span> о разрушенных храмах и мести [modern!au]
<br>Shi Wudu | Shi Qingxuan </span>
<br><a href="https://barcross.rusff.me/viewtopic.php?id=1630#p108369">Согрей, согрей, согрей</a> <span> о хорноте и кинках [modern!au]
<br>Shi Qingxuan | He Xuan </span></p></div>
<div class="xxthtxt3"><x>AU</x><p></p>
<x>Crossfandom</x><p></p></div>
<div class="xxthtxt4"><x>Babai poetry nights</x><p>.</p></div>
</div>кто-то ленив поэтому оно пустое хд
код для ленивых
Код:<a href="ссылка">название эпизода</a><span>что, о чем, в двух словах. [время действия если есть] <br>кто | с кем </span>
для важных переговоров
Отредактировано Xie Lian (2023-02-26 21:23:19)
