[html]
<center>
<div class='war1'><div class='warheader'>How much sorrow can I <span>take?</span></div><div class="warbgimg"></div>

<li1></li1>

<div class='wartextbox'><div class='wartxt'>Тонатос[Асшех] ✧ Эйяфьялла<P>

2920 год, сон<P>

Мастер игры не вступит в игру, эпизод является игрой в мире Энтерос и закрыт для вступления любых других персонажей. Если в данном эпизоде будут боевые элементы, мы предпочтем официальную систему боя.<P>


<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Oxygen&family=Poiret+One&display=swap" rel="stylesheet">
<style>

.war1 {
background: rgb(0,0,0);
background: linear-gradient(240deg, rgba(0,1,1,0) 23%, rgba(38,17,17,1) 90%);
width: 450px;
height: 450px;
margin-left: -550px;
overflow: hidden;
}

.war1 li1 {height: 1px; background: #fff; position: absolute; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); width: 400px; margin-left: -230px; margin-top: 220px; transition: 2s;}

.war1:hover li1 {height: 1px; background: #fff; position: absolute; width: 350px; margin-left: -10px; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg);}

.warheader {
color: #fff;
margin-top: 200px;
margin-left: 50px;
position: absolute;
border-bottom: 1px solid #fff;
font-family: 'Poiret One', cursive;
font-size: 20px;
z-index: 10;
transition: 2s;
transition-delay: 0s;
transition-delay: 2s;
}

.warheader span {
color: #fff;
position: absolute;
border-bottom: 1px solid #fff;
font-family: 'Lobster', cursive;
font-size: 45px;
z-index: 10;
}

.war1:hover .warheader {
margin-top: 360px;
margin-left: 160px;
position: absolute;
letter-spacing: 3px;
}

.wartag {
color: #fff;
font-size: 20px;
font-family: 'Lobster', cursive;
z-index: 10;
float: center;
margin-top: 13px;
}

.wartag a {
color: #fff;
text-decoration: none;
text-transform: lowercase;
}

.wartextbox {
background-color: rgba(0,0,0,.3);
margin: 40px;
width: 280px;
height: 280px;
border-bottom: 1px solid rgba(158,17,17,1);
position: absolute;
opacity: 0;
transition: 2s;
transition-delay: 2s;
z-index: 20;
}

.wartxt {
color: #fff;
font-family: 'Oxygen', sans-serif;
font-size: 13px;
height: 240px;
overflow: auto;
text-align: justify;
padding: 20px;
opacity: 0;
transition: 2s;
transition-delay: 2s;
z-index: 20;
}

.war1:hover .wartextbox, .war1:hover .wartxt {opacity: 1;}

.warimg2 {
background-image: url(https://pa1.narvii.com/5783/a6ac3b6073c … 60e_hq.gif);
width: 75px;
height: 75px;
margin-top: 335px;
margin-left: 40px;
background-position:top;background-repeat: no-repeat; background-size: cover;
position: absolute;
z-index: 1;
opacity: 0;
border: 1px solid rgba(158,17,17,1);
transition: 2s;
transition-delay: 2s;
}

.war1:hover .warimg2 {
opacity: .9;
}

.wartxt::-webkit-scrollbar {width: 5px; background: transparent}
.wartxt::-webkit-scrollbar-track { background: transparent;}
.wartxt::-webkit-scrollbar-thumb {background: rgba(158,17,17,1); border-left: 4px solid #000; border-top: 10px solid #000;}

.wardouble-border {
border: 10px solid transparent;
box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 10px rgba(0,0,0,.0), inset 0 0 0 11px #fff;
height: 430px;
z-index: 6;
position: relative;
mix-blend-mode: overlay;
}

.warbgimg {
background-image: url(https://i.imgur.com/hRNkKz8.jpg);
width: 450px;
height: 450px;
background-position:top;background-repeat: no-repeat; background-size: cover;
filter: grayscale(100%);
position: absolute;
z-index: 1;
mix-blend-mode: soft-light;
opacity: .8;
}

.skcred, .skcred a {
font-family: 'calibri';
font-size: 8px;
text-transform: uppercase;
letter-spacing: 5px;
text-decoration: none;
padding-top: 2px;
}

</style>[/html]

Отредактировано Эйяфьялла (18.11.22 17:01:22)