[html]<!-- мироописание от духа -->
<script type="text/javascript" src="https://forumstatic.ru/files/001b/36/d6/94544.js"></script>
<div class="world-container">
<div class="world-block">
<div class="header">
<span>НАРУТО</span>
</div>
<img src="https://i.imgur.com/eWmwYoy.jpg">
</div>
<div class="info1 closed">
<div class="close-btn">выйти</div>
<div>
<hr>
<h5>ПЕРСОНАЖИ</h5>
<hr>
ИГРАЮ ЗА: Учиха Изуна, Сенджу Тобирама, Хатаке Какаши. <br>
ИГРАЮ С: Седжу Тобирамой, Учиха Мадарой, Обито.
<hr>
ИГРОВЫЕ ПРЕДПОЧТЕНИЯ: мне нравится драма, дарк, насилие физическое\психологическое, люблю играть развитие взаимоотношений персонажей, лавхейт.
не очень люблю чисто разговорные отыгрыши, драки ради драки. если агрессия обусловлена ситуацией, характером, то я это съем с удовольствием.
<hr>
<h3>ЭПИЗОДЫ</h5>
<hr>
<em>🢆<a href="ссылка"> название</a></em>
<style>
/* css мироописания от духа */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&family=Rubik:wght@500;600;800;900&display=swap');
.world-container {
column-gap: 4px; /* отступ между колонками */
margin: 0px auto 20px auto;
column-count: 2; /* количество столбцов*/
width: 580px; /* ширина контейнера с блоками*/
position: relative;
text-align: center;
}
.world-block {
margin: 1px 0px; /* нижний и верхний отступ между блоками*/
padding: 0px;
display: inline-block;
line-height: 0;
width: 580px; /* ширина блоков */
overflow: hidden;
position: relative;
cursor: pointer;
transition: all .9s cubic-bezier(.63,.34,.09,.96) 0s;
}
.world-block .header {
position: absolute;
background: (to bottom, rgba(41,154,11,0) 0%, rgba(0,0,0,0.29) 18%,rgba(0,0,0,0.48) 39%,rgba(0,0,0,0.69) 74%,rgba(0,0,0,0.85) 100%);
color: #b2231d; /* цвет шрифта заголовков на картинках */
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
font: 800 22px/150% 'Rubik'; /* шрифт заголовков на картинках */
text-transform: uppercase;
z-index: 1;
}
.world-block:hover {
filter: grayscale(100%)
}
.world-block img {
transition: all .3s cubic-bezier(.63,.34,.09,.96) 0s;
}
.world-block:hover img {
transform: scale(1.1);
filter: blur(1px)
}
.world-block .header span {
display: block;
margin-bottom: 20px;
text-align: center;
}
.closed{
background: #fefefe; /* фон выпадающего описания */
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: calc(100% - 50px);
height: calc(100% - 50px);
padding: 25px;
text-align: center;
display: none;
box-shadow: 0 0 0 9px #1b0c1e inset, 0 0 0 10px rgba(0,0,0,.1) inset /* обводка */
}
.closed > div:not(.close-btn) {
overflow-y: auto;
height: calc(100% - 35px);
padding-right: 5px;
}
.close-btn {
background: rgba(0,0,0,.04); /* фон кнопки закрытия */
border: 1px solid rgba(0,0,0,.06); /* бордер кнопки закрытия */
height: 15px;
text-transform: uppercase;
font: 300 10px/15px merriweather; /* шрифт кнопки закрытия*/
text-align: center;
margin-bottom: 20px;
cursor: pointer;
letter-spacing: 2px
}
.closed h5 {
font: 700 20px merriweather; /* шрифт заголовков описания */
margin: 20px 0px 10px;
position: ;
padding-left: px;
}
.closed h5:before {
content: "";
height: 2px;
width: 30px;
background: rgba(0,0,0,.7);
position: ;
left: 10;
top: 50%;
transform: translateY(-50%)
}
.closed h5:first-child {
margin-top: 0
}
.closed em {
font: 300 11px georgia; /* шрифт мини цитаток */
display: block;
border-right: 5px solid rgba(0,0,0,.1); /* правый бордер мини цитаток*/
padding-right: 10px;
text-align: left;
margin: 10px 0;
}
</style>
[/html]
[html]<!-- мироописание от духа -->
<script type="text/javascript" src="https://forumstatic.ru/files/001b/36/d6/94544.js"></script>
<div class="world-container">
<div class="world-block">
<div class="header">
<span>МАГИЧЕСКАЯ БИТВА</span>
</div>
<img src="https://i.imgur.com/lf1wXMe.jpg">
</div>
<div class="info1 closed">
<div class="close-btn">выйти</div>
<div>
<hr>
<h5>ПЕРСОНАЖИ</h5>
<hr>
ИГРАЮ ЗА: Мегуми Фушигуро, Оккоцу Юта <br>
ИГРАЮ С: со всеми
<hr>
ИГРОВЫЕ ПРЕДПОЧТЕНИЯ: мне нравится драма, дарк, насилие физическое\психологическое, люблю играть развитие взаимоотношений персонажей, лавхейт.
не очень люблю чисто разговорные отыгрыши, драки ради драки. если агрессия обусловлена ситуацией, характером, то я это съем с удовольствием.
<hr>
<h3>ЭПИЗОДЫ</h5>
<hr>
<em>🢆<a href="ссылка"> название</a></em>
<style>
/* css мироописания от духа */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&family=Rubik:wght@500;600;800;900&display=swap');
.world-container {
column-gap: 4px; /* отступ между колонками */
margin: 0px auto 20px auto;
column-count: 2; /* количество столбцов*/
width: 580px; /* ширина контейнера с блоками*/
position: relative;
text-align: center;
}
.world-block {
margin: 1px 0px; /* нижний и верхний отступ между блоками*/
padding: 0px;
display: inline-block;
line-height: 0;
width: 580px; /* ширина блоков */
overflow: hidden;
position: relative;
cursor: pointer;
transition: all .9s cubic-bezier(.63,.34,.09,.96) 0s;
}
.world-block .header {
position: absolute;
background: (to bottom, rgba(41,154,11,0) 0%, rgba(0,0,0,0.29) 18%,rgba(0,0,0,0.48) 39%,rgba(0,0,0,0.69) 74%,rgba(0,0,0,0.85) 100%);
color: #b2231d; /* цвет шрифта заголовков на картинках */
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
font: 800 22px/150% 'Rubik'; /* шрифт заголовков на картинках */
text-transform: uppercase;
z-index: 1;
}
.world-block:hover {
filter: grayscale(100%)
}
.world-block img {
transition: all .3s cubic-bezier(.63,.34,.09,.96) 0s;
}
.world-block:hover img {
transform: scale(1.1);
filter: blur(1px)
}
.world-block .header span {
display: block;
margin-bottom: 20px;
text-align: center;
}
.closed{
background: #fefefe; /* фон выпадающего описания */
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: calc(100% - 50px);
height: calc(100% - 50px);
padding: 25px;
text-align: center;
display: none;
box-shadow: 0 0 0 9px #1b0c1e inset, 0 0 0 10px rgba(0,0,0,.1) inset /* обводка */
}
.closed > div:not(.close-btn) {
overflow-y: auto;
height: calc(100% - 35px);
padding-right: 5px;
}
.close-btn {
background: rgba(0,0,0,.04); /* фон кнопки закрытия */
border: 1px solid rgba(0,0,0,.06); /* бордер кнопки закрытия */
height: 15px;
text-transform: uppercase;
font: 300 10px/15px merriweather; /* шрифт кнопки закрытия*/
text-align: center;
margin-bottom: 20px;
cursor: pointer;
letter-spacing: 2px
}
.closed h5 {
font: 700 20px merriweather; /* шрифт заголовков описания */
margin: 20px 0px 10px;
position: ;
padding-left: px;
}
.closed h5:before {
content: "";
height: 2px;
width: 30px;
background: rgba(0,0,0,.7);
position: ;
left: 10;
top: 50%;
transform: translateY(-50%)
}
.closed h5:first-child {
margin-top: 0
}
.closed em {
font: 300 11px georgia; /* шрифт мини цитаток */
display: block;
border-right: 5px solid rgba(0,0,0,.1); /* правый бордер мини цитаток*/
padding-right: 10px;
text-align: left;
margin: 10px 0;
}
</style>
[/html]
[html]<!-- мироописание от духа -->
<script type="text/javascript" src="https://forumstatic.ru/files/001b/36/d6/94544.js"></script>
<div class="world-container">
<div class="world-block">
<div class="header">
<span>КЛИНОК РАССЕКАЮЩИЙ ДЕМОНОВ</span>
</div>
<img src="https://i.imgur.com/xwkRDCU.jpg">
</div>
<div class="info1 closed">
<div class="close-btn">выйти</div>
<div>
<hr>
<h5>ПЕРСОНАЖИ</h5>
<hr>
ИГРАЮ ЗА: Шинобу Кочо, Аой Канзаки, Танджиро Камадо, Иноске Хашибира, Канаэ Кочо <br>
ИГРАЮ С: Томиока Гию, Иноске Хашибира, Кёджуро Ренгоку, Танджиро Камадо, Санеми Шинадзугава
<hr>
ИГРОВЫЕ ПРЕДПОЧТЕНИЯ: очень сильно зависит от того за кого и с кем играть. клинок сам по себе довольно стекольный и трагичный, так что кто я, чтобы отказываться от этого?
<hr>
<h3>ЭПИЗОДЫ</h5>
<hr>
<em>🢆<a href="ссылка"> название</a></em>
<style>
/* css мироописания от духа */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&family=Rubik:wght@500;600;800;900&display=swap');
.world-container {
column-gap: 4px; /* отступ между колонками */
margin: 0px auto 20px auto;
column-count: 2; /* количество столбцов*/
width: 580px; /* ширина контейнера с блоками*/
position: relative;
text-align: center;
}
.world-block {
margin: 1px 0px; /* нижний и верхний отступ между блоками*/
padding: 0px;
display: inline-block;
line-height: 0;
width: 580px; /* ширина блоков */
overflow: hidden;
position: relative;
cursor: pointer;
transition: all .9s cubic-bezier(.63,.34,.09,.96) 0s;
}
.world-block .header {
position: absolute;
background: (to bottom, rgba(41,154,11,0) 0%, rgba(0,0,0,0.29) 18%,rgba(0,0,0,0.48) 39%,rgba(0,0,0,0.69) 74%,rgba(0,0,0,0.85) 100%);
color: #b2231d; /* цвет шрифта заголовков на картинках */
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
font: 800 22px/150% 'Rubik'; /* шрифт заголовков на картинках */
text-transform: uppercase;
z-index: 1;
}
.world-block:hover {
filter: grayscale(100%)
}
.world-block img {
transition: all .3s cubic-bezier(.63,.34,.09,.96) 0s;
}
.world-block:hover img {
transform: scale(1.1);
filter: blur(1px)
}
.world-block .header span {
display: block;
margin-bottom: 20px;
text-align: center;
}
.closed{
background: #fefefe; /* фон выпадающего описания */
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: calc(100% - 50px);
height: calc(100% - 50px);
padding: 25px;
text-align: center;
display: none;
box-shadow: 0 0 0 9px #1b0c1e inset, 0 0 0 10px rgba(0,0,0,.1) inset /* обводка */
}
.closed > div:not(.close-btn) {
overflow-y: auto;
height: calc(100% - 35px);
padding-right: 5px;
}
.close-btn {
background: rgba(0,0,0,.04); /* фон кнопки закрытия */
border: 1px solid rgba(0,0,0,.06); /* бордер кнопки закрытия */
height: 15px;
text-transform: uppercase;
font: 300 10px/15px merriweather; /* шрифт кнопки закрытия*/
text-align: center;
margin-bottom: 20px;
cursor: pointer;
letter-spacing: 2px
}
.closed h5 {
font: 700 20px merriweather; /* шрифт заголовков описания */
margin: 20px 0px 10px;
position: ;
padding-left: px;
}
.closed h5:before {
content: "";
height: 2px;
width: 30px;
background: rgba(0,0,0,.7);
position: ;
left: 10;
top: 50%;
transform: translateY(-50%)
}
.closed h5:first-child {
margin-top: 0
}
.closed em {
font: 300 11px georgia; /* шрифт мини цитаток */
display: block;
border-right: 5px solid rgba(0,0,0,.1); /* правый бордер мини цитаток*/
padding-right: 10px;
text-align: left;
margin: 10px 0;
}
</style>
[/html]
Отредактировано Skye (2023-04-23 21:50:59)
