Благодарим за выбор нашего сервиса!
Тестовое сообщение
Сообщений 1 страница 19 из 19
Поделиться4Сегодня 01:27:04
[html]<div class="postbattle">
<div class="postbattle-head">
<div class="postbattle-kicker">POST BATTLE</div>
<div class="postbattle-title">choose your side</div>
<div class="postbattle-desc">
три стороны. один город. каждый написанный пост меняет расклад сил.
</div>
</div>
<div class="postbattle-teams">
<!-- STATUS QUO -->
<div class="battle-team team-stillness">
<div class="team-top">
<div>
<div class="team-number">01</div>
<div class="team-name">STILLNESS</div>
<div class="team-rus">стиллеры</div>
</div>
<div class="team-score">
<span>184</span>
<small>балла</small>
</div>
</div>
<div class="team-line"></div>
<div class="team-idea">
сохранить нынешний мистический порядок
</div>
<div class="team-members">
<div class="member">
<span class="member-name">name surname</span>
<span class="member-score">42</span>
</div>
<div class="member">
<span class="member-name">name surname</span>
<span class="member-score">38</span>
</div>
<div class="member">
<span class="member-name">name surname</span>
<span class="member-score">31</span>
</div>
<div class="member">
<span class="member-name">name surname</span>
<span class="member-score">29</span>
</div>
<div class="member">
<span class="member-name">name surname</span>
<span class="member-score">24</span>
</div>
<div class="member">
<span class="member-name">name surname</span>
<span class="member-score">20</span>
</div>
</div>
</div>
<!-- LIBERATION -->
<div class="battle-team team-liberation">
<div class="team-top">
<div>
<div class="team-number">02</div>
<div class="team-name">LIBERATION</div>
<div class="team-rus">либераторы</div>
</div>
<div class="team-score">
<span>207</span>
<small>баллов</small>
</div>
</div>
<div class="team-line"></div>
<div class="team-idea">
вернуть старый мир и освободить прежнюю мистику
</div>
<div class="team-members">
<div class="member">
<span class="member-name">name surname</span>
<span class="member-score">51</span>
</div>
<div class="member">
<span class="member-name">name surname</span>
<span class="member-score">44</span>
</div>
<div class="member">
<span class="member-name">name surname</span>
<span class="member-score">39</span>
</div>
<div class="member">
<span class="member-name">name surname</span>
<span class="member-score">32</span>
</div>
<div class="member">
<span class="member-name">name surname</span>
<span class="member-score">23</span>
</div>
<div class="member">
<span class="member-name">name surname</span>
<span class="member-score">18</span>
</div>
</div>
</div>
<!-- OBLIVION -->
<div class="battle-team team-oblivion">
<div class="team-top">
<div>
<div class="team-number">03</div>
<div class="team-name">OBLIVION</div>
<div class="team-rus">обливиаторы</div>
</div>
<div class="team-score">
<span>163</span>
<small>балла</small>
</div>
</div>
<div class="team-line"></div>
<div class="team-idea">
уничтожить сверхъестественное окончательно
</div>
<div class="team-members">
<div class="member">
<span class="member-name">name surname</span>
<span class="member-score">40</span>
</div>
<div class="member">
<span class="member-name">name surname</span>
<span class="member-score">37</span>
</div>
<div class="member">
<span class="member-name">name surname</span>
<span class="member-score">28</span>
</div>
<div class="member">
<span class="member-name">name surname</span>
<span class="member-score">24</span>
</div>
<div class="member">
<span class="member-name">name surname</span>
<span class="member-score">19</span>
</div>
<div class="member">
<span class="member-name">name surname</span>
<span class="member-score">15</span>
</div>
</div>
</div>
</div>
<div class="postbattle-footer">
<span>NEW YORK</span>
<span>season 01</span>
<span>post battle</span>
</div>
</div>
<style>
.postbattle {
--bg: #111111;
--block: #181818;
--block2: #202020;
--text: #e7e3dc;
--muted: #89857f;
--line: rgba(255,255,255,.09);
width: 100%;
max-width: 980px;
margin: 30px auto;
box-sizing: border-box;
padding: 34px;
background: var(--bg);
color: var(--text);
font-family: Arial, Helvetica, sans-serif;
border: 1px solid var(--line);
}
.postbattle * {
box-sizing: border-box;
}
.postbattle-head {
margin-bottom: 30px;
}
.postbattle-kicker {
font-size: 9px;
font-weight: 700;
letter-spacing: 4px;
color: var(--muted);
text-transform: uppercase;
margin-bottom: 7px;
}
.postbattle-title {
font-family: Georgia, 'Times New Roman', serif;
font-size: 42px;
line-height: 1;
font-style: italic;
text-transform: lowercase;
letter-spacing: -2px;
}
.postbattle-desc {
width: 65%;
max-width: 560px;
margin-top: 12px;
color: var(--muted);
font-size: 11px;
line-height: 1.5;
text-transform: lowercase;
}
.postbattle-teams {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.battle-team {
position: relative;
min-width: 0;
padding: 20px;
background: var(--block);
border: 1px solid var(--line);
overflow: hidden;
}
.battle-team::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 3px;
background: var(--team);
}
.team-stillness {
--team: #8e9695;
}
.team-liberation {
--team: #a48b62;
}
.team-oblivion {
--team: #785d66;
}
.team-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.team-number {
margin-bottom: 13px;
color: var(--muted);
font-size: 8px;
letter-spacing: 2px;
}
.team-name {
color: var(--text);
font-size: 17px;
font-weight: 800;
line-height: 1;
letter-spacing: 1px;
}
.team-rus {
margin-top: 4px;
color: var(--team);
font-family: Georgia, 'Times New Roman', serif;
font-size: 12px;
font-style: italic;
text-transform: lowercase;
}
.team-score {
min-width: 56px;
text-align: right;
}
.team-score span {
display: block;
color: var(--team);
font-family: Georgia, 'Times New Roman', serif;
font-size: 28px;
line-height: 1;
}
.team-score small {
display: block;
margin-top: 4px;
color: var(--muted);
font-size: 7px;
letter-spacing: 1px;
text-transform: uppercase;
}
.team-line {
height: 1px;
margin: 18px 0 13px;
background: var(--line);
}
.team-idea {
min-height: 42px;
margin-bottom: 18px;
color: var(--muted);
font-size: 9px;
line-height: 1.55;
text-transform: lowercase;
}
.team-members {
display: flex;
flex-direction: column;
gap: 5px;
}
.member {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 31px;
padding: 7px 9px;
background: var(--block2);
border-left: 2px solid transparent;
transition: .2s;
}
.member:hover {
border-left-color: var(--team);
padding-left: 12px;
}
.member-name {
overflow: hidden;
color: #bbb7b1;
font-size: 9px;
letter-spacing: .3px;
text-overflow: ellipsis;
white-space: nowrap;
text-transform: lowercase;
}
.member-score {
flex-shrink: 0;
min-width: 26px;
margin-left: 8px;
color: var(--team);
font-size: 10px;
font-weight: 700;
text-align: right;
}
.postbattle-footer {
display: flex;
justify-content: space-between;
margin-top: 22px;
padding-top: 14px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 7px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
@media (max-width: 750px) {
.postbattle {
padding: 20px;
}
.postbattle-teams {
grid-template-columns: 1fr;
}
.postbattle-desc {
width: 100%;
}
.team-idea {
min-height: auto;
}
}
</style>[/html]
Поделиться5Сегодня 02:17:06
проверка
Поделиться6Сегодня 02:18:42
проверка
Поделиться7Сегодня 02:28:14
блаблаба
Поделиться8Сегодня 03:54:32
проверка скрипта
Поделиться9Сегодня 04:03:31
бла бла
Поделиться10Сегодня 04:23:53
проверка
Поделиться11Сегодня 04:38:07
бла бал бал
Поделиться12Сегодня 05:19:24
еще одна проверка
Поделиться13Сегодня 05:23:18
раз раз
Поделиться14Сегодня 05:27:48
хоба
Поделиться15Сегодня 05:33:38
попытка номер 100000000000000000000000
Поделиться16Сегодня 05:49:13
проверка
Поделиться17Сегодня 05:51:55
хоба
Поделиться19Сегодня 12:52:29
*проверка
[hideprofile]
[html]<style>
.text-tabs {
width: 100%;
max-width: auto;
margin: 20px auto;
box-sizing: border-box;
border: 0px solid blue;
}
/* скрываются настоящие radio-кнопки */
.text-tabs > input {
display: none;
}
/* Общая область: кнопки + текст */
.tabs-layout {
display: flex;
align-items: stretch;
margin: 5px;
}
/* верхняя картинка*/
.bigpictureontop {
height: 220px;
width: auto;
background: url('https://upforme.ru/uploads/001c/c6/3d/13/607865.jpg') center center / cover no-repeat;
margin-bottom: -40px;
}
/* боковые кнопочки */
.tabs-buttons {
display: flex;
flex: 1;
flex-direction: column;
gap: 2px;
}
.tabs-buttons label {
display: flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 5px;
background: #6c6960;
box-sizing: border-box;
text-align: center;
cursor: pointer;
font-size: 12px;
color: #c4951d;
}
.tabs-buttons label:hover {
background: #6c6960;
}
/* текстовая область */
.tabs-content {
position: relative;
height: 700px;
max-width: 700px;
padding: 15px;
border: 2px solid #c4951d;
box-sizing: border-box;
overflow-y: auto;
background: #050505;
font-size: 10px;
color: #c4951d;
}
/* все вкладки скрыты по умолчанию */
.tab-panel {
display: none;
}
.big-title {
font-size: 30px;
color: blue;
text-transform: uppercase;
background-color: #332f2c;
text-align: center;
text-color: #050505;
padding: 5px 0px;
margin: 10px 0px;
}
.small-title {
font-size: 20px;
color: blue;
text-transform: uppercase;
background-color: #d79d41;
text-align: center;
text-color: #eae6ca;
padding: 5px 0px;
margin: 10px 0px;
}
/* показ нужной вкладки */
#text-tab-1:checked ~ .tabs-layout .tab-panel-1,
#text-tab-2:checked ~ .tabs-layout .tab-panel-2,
#text-tab-3:checked ~ .tabs-layout .tab-panel-3,
#text-tab-4:checked ~ .tabs-layout .tab-panel-4,
#text-tab-5:checked ~ .tabs-layout .tab-panel-5 {
display: block;
animation: tab-slide-in 2s ease;
}
/* въезд слева */
@keyframes tab-slide-in {
from {
opacity: 0;
transform: translateX(-90px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* активная кнопка */
#text-tab-1:checked ~ .tabs-layout label[for="text-tab-1"],
#text-tab-2:checked ~ .tabs-layout label[for="text-tab-2"],
#text-tab-3:checked ~ .tabs-layout label[for="text-tab-3"],
#text-tab-4:checked ~ .tabs-layout label[for="text-tab-4"],
#text-tab-5:checked ~ .tabs-layout label[for="text-tab-5"] {
background: #3e3b32;
border: 1px solid #f2e8c9;
font-weight: bold;
}
</style>
<div class="text-tabs">
<div class="bigpictureontop"></div>
<!-- переключатели -->
<input type="radio" name="text-tabs" id="text-tab-1" checked>
<input type="radio" name="text-tabs" id="text-tab-2">
<input type="radio" name="text-tabs" id="text-tab-3">
<input type="radio" name="text-tabs" id="text-tab-4">
<input type="radio" name="text-tabs" id="text-tab-5">
<div class="tabs-layout">
<!-- кнопки -->
<div class="tabs-buttons">
<label for="text-tab-1">ГЛАВА 1. ИСТОРИЯ МИРА</label>
<label for="text-tab-2">ГЛАВА 2. БОЖЕСТВА</label>
<label for="text-tab-3">ГЛАВА 3. СУЩЕСТВА</label>
<label for="text-tab-4">ГЛАВА 4. АРТЕФАКТЫ</label>
<label for="text-tab-5">ГЛАВА 5. ДАРЫ ДРЕВНЕГО МИРА (МАГИЯ)</label>
</div>
<!-- содержимое -->
<div class="tabs-content">
<div class="tab-panel tab-panel-1">
<div class="big-title">Проверка1</div>
<div class="panel-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc semper ex at turpis vulputate, eu luctus massa ultricies. Phasellus scelerisque arcu ut nunc luctus, quis egestas risus condimentum. Vivamus varius neque eget leo tempor commodo. Quisque luctus neque diam, sit amet lacinia urna auctor et. Cras ut justo at urna accumsan dignissim. Nulla sit amet nisl sit amet lectus vulputate viverra eget ut lorem. Cras ipsum dui, mollis in tristique vel, imperdiet et odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
sit amet sem sapien. Donec sed risus posuere, euismod nulla in, interdum nulla. Aliquam erat volutpat. Donec eget turpis porttitor, eleifend purus eget, consectetur dui. Cras nec velit nulla. Nulla non tincidunt orci. Nunc quis fringilla lacus, at euismod risus. In congue diam nulla, at interdum nunc rhoncus at.
Donec felis ipsum, congue id laoreet at, laoreet a nisi. Cras vel pretium risus. Duis quis porta nisl. Duis accumsan convallis neque vitae sagittis. Quisque auctor diam dapibus nulla faucibus, a facilisis leo mollis. Cras ut congue leo, vel lacinia dui. Phasellus venenatis, nibh id feugiat luctus, libero ante scelerisque justo, sed malesuada metus nulla a lectus. Suspendisse nec neque et erat viverra efficitur in sit amet risus. Nunc ornare sit amet velit sed accumsan. Nunc non odio arcu. Donec eleifend elementum sollicitudin. Aliquam erat volutpat. Ut euismod rutrum dui, in maximus lacus malesuada sit amet. Nunc ut dui sed felis iaculis hendrerit vel in mi. Aenean porttitor, nibh a blandit luctus, diam augue volutpat nisi, ac pellentesque erat orci et risus. Integer vel tempor nulla, sit amet pharetra libero. Morbi sit amet turpis eros. Curabitur ac accumsan tellus, nec luctus purus. Nunc laoreet nulla cursus fermentum auctor. Sed at ligula sagittis, viverra dui in, suscipit est. Nunc porta ex vel tellus dictum sollicitudin. Etiam sem velit, dignissim et rutrum sed, semper in lorem. Suspendisse potenti. Proin molestie justo id enim vulputate, sit amet blandit ante blandit. Aliquam sed nunc vel est pretium pharetra. Morbi id eros nec felis volutpat tristique ut sit amet justo. Sed efficitur ipsum nec augue aliquam facilisis. Sed suscipit mollis lorem, sit amet facilisis ligula. Nullam viverra nibh in dui bibendum varius. Suspendisse potenti. Quisque tincidunt libero elit, sit amet elementum urna tristique fermentum. Integer luctus arcu condimentum sem varius consectetur. Vivamus quis libero commodo, fringilla risus quis, rhoncus quam. Pellentesque accumsan mollis enim, id tincidunt felis semper fringilla. Praesent pretium ligula ac libero luctus luctus. Vivamus mauris diam, gravida ut ornare vitae, tincidunt vitae arcu. Aliquam ornare arcu quis congue placerat. Etiam consequat placerat sapien maximus iaculis. Phasellus vehicula condimentum eros, quis egestas ipsum malesuada at. Quisque placerat euismod dui, non pulvinar neque mollis efficitur. Nam eleifend diam nibh, non tempus ipsum dictum id. Morbi ut posuere quam. Aliquam quis finibus nisl, eget pretium quam. Vivamus consectetur eros eget nunc fringilla, a pretium eros consequat. Cras at molestie tellus. Aenean ullamcorper fermentum imperdiet. Nam gravida erat at nunc ullamcorper, quis semper tortor ullamcorper. Maecenas ullamcorper, neque quis scelerisque gravida, risus elit aliquam lorem, id faucibus felis mauris vel lectus. Proin eleifend sit amet est in suscipit. Donec sapien metus, pretium nec mi nec, blandit mattis lacus. Sed eu nisl sed ex fringilla congue ut quis sapien. Aenean scelerisque aliquet magna, non feugiat dolor viverra nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis sagittis blandit iaculis. Vestibulum mattis massa quis rutrum ultricies. Duis sit amet libero sed nisl tincidunt sodales.
<br>
<div class="small-title">Проверка2</div></div>
</div>
<div class="tab-panel tab-panel-2">
<div class="panel-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc semper ex at turpis vulputate, eu luctus massa ultricies. Phasellus scelerisque arcu ut nunc luctus, quis egestas risus condimentum. Vivamus varius neque eget leo tempor commodo. Quisque luctus neque diam, sit amet lacinia urna auctor et. Cras ut justo at urna accumsan dignissim. Nulla sit amet nisl sit amet lectus vulputate viverra eget ut lorem. Cras ipsum dui, mollis in tristique vel, imperdiet et odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
sit amet sem sapien. Donec sed risus posuere, euismod nulla in, interdum nulla. Aliquam erat volutpat. Donec eget turpis porttitor, eleifend purus eget, consectetur dui. Cras nec velit nulla. Nulla non tincidunt orci. Nunc quis fringilla lacus, at euismod risus. In congue diam nulla, at interdum nunc rhoncus at.</div>
</div>
<div class="tab-panel tab-panel-3">
<div class="panel-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc semper ex at turpis vulputate, eu luctus massa ultricies. Phasellus scelerisque arcu ut nunc luctus, quis egestas risus condimentum. Vivamus varius neque eget leo tempor commodo. Quisque luctus neque diam, sit amet lacinia urna auctor et. Cras ut justo at urna accumsan dignissim. Nulla sit amet nisl sit amet lectus vulputate viverra eget ut lorem. Cras ipsum dui, mollis in tristique vel, imperdiet et odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
sit amet sem sapien. Donec sed risus posuere, euismod nulla in, interdum nulla. Aliquam erat volutpat. Donec eget turpis porttitor, eleifend purus eget, consectetur dui. Cras nec velit nulla. Nulla non tincidunt orci. Nunc quis fringilla lacus, at euismod risus. In congue diam nulla, at interdum nunc rhoncus at.
Donec felis ipsum, congue id laoreet at, laoreet a nisi. Cras vel pretium risus. Duis quis porta nisl. Duis accumsan convallis neque vitae sagittis. Quisque auctor diam dapibus nulla faucibus, a facilisis leo mollis. Cras ut congue leo, vel lacinia dui. Phasellus venenatis, nibh id feugiat luctus, libero ante scelerisque justo, sed malesuada metus nulla a lectus. Suspendisse nec neque et erat viverra efficitur in sit amet risus. Nunc ornare sit amet velit sed accumsan. Nunc non odio arcu. Donec eleifend elementum sollicitudin. Aliquam erat volutpat. Ut euismod rutrum dui, in maximus lacus malesuada sit amet. Nunc ut dui sed felis iaculis hendrerit vel in mi. Aenean porttitor, nibh a blandit luctus, diam augue volutpat nisi, ac pellentesque erat orci et risus. Integer vel tempor nulla, sit amet pharetra libero. Morbi sit amet turpis eros. Curabitur ac accumsan tellus, nec luctus purus. Nunc laoreet nulla cursus fermentum auctor. Sed at ligula sagittis, viverra dui in, suscipit est. Nunc porta ex vel tellus dictum sollicitudin. Etiam sem velit, dignissim et rutrum sed, semper in lorem. Suspendisse potenti. Proin molestie justo id enim vulputate, sit amet blandit ante blandit. Aliquam sed nunc vel est pretium pharetra. Morbi id eros nec felis volutpat tristique ut sit amet justo. Sed efficitur ipsum nec augue aliquam facilisis. Sed suscipit mollis lorem, sit amet facilisis ligula. Nullam viverra nibh in dui bibendum varius. Suspendisse potenti. Quisque tincidunt libero elit, sit amet elementum urna tristique fermentum. Integer luctus arcu condimentum sem varius consectetur. Vivamus quis libero commodo, fringilla risus quis, rhoncus quam. Pellentesque accumsan mollis enim, id tincidunt felis semper fringilla. Praesent pretium ligula ac libero luctus luctus. Vivamus mauris diam, gravida ut ornare vitae, tincidunt vitae arcu. Aliquam ornare arcu quis congue placerat. Etiam consequat placerat sapien maximus iaculis. Phasellus vehicula condimentum eros, quis egestas ipsum malesuada at. Quisque placerat euismod dui, non pulvinar neque mollis efficitur. Nam eleifend diam nibh, non tempus ipsum dictum id. Morbi ut posuere quam. Aliquam quis finibus nisl, eget pretium quam. Vivamus consectetur eros eget nunc fringilla, a pretium eros consequat. Cras at molestie tellus. Aenean ullamcorper fermentum imperdiet. Nam gravida erat at nunc ullamcorper, quis semper tortor ullamcorper. Maecenas ullamcorper, neque quis scelerisque gravida, risus elit aliquam lorem, id faucibus felis mauris vel lectus. Proin eleifend sit amet est in suscipit. Donec sapien metus, pretium nec mi nec, blandit mattis lacus. Sed eu nisl sed ex fringilla congue ut quis sapien. Aenean scelerisque aliquet magna, non feugiat dolor viverra nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis sagittis blandit iaculis. Vestibulum mattis massa quis rutrum ultricies. Duis sit amet libero sed nisl tincidunt sodales. </div>
</div>
<div class="tab-panel tab-panel-4">
<div class="panel-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc semper ex at turpis vulputate, eu luctus massa ultricies. Phasellus scelerisque arcu ut nunc luctus, quis egestas risus condimentum. Vivamus varius neque eget leo tempor commodo. Quisque luctus neque diam, sit amet lacinia urna auctor et. Cras ut justo at urna accumsan dignissim. Nulla sit amet nisl sit amet lectus vulputate viverra eget ut lorem. Cras ipsum dui, mollis in tristique vel, imperdiet et odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
sit amet sem sapien. Donec sed risus posuere, euismod nulla in, interdum nulla. Aliquam erat volutpat. Donec eget turpis porttitor, eleifend purus eget, consectetur dui. Cras nec velit nulla. Nulla non tincidunt orci. Nunc quis fringilla lacus, at euismod risus. In congue diam nulla, at interdum nunc rhoncus at.</div>
</div>
<div class="tab-panel tab-panel-5">
<div class="panel-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc semper ex at turpis vulputate, eu luctus massa ultricies. Phasellus scelerisque arcu ut nunc luctus, quis egestas risus condimentum. Vivamus varius neque eget leo tempor commodo. Quisque luctus neque diam, sit amet lacinia urna auctor et. Cras ut justo at urna accumsan dignissim. Nulla sit amet nisl sit amet lectus vulputate viverra eget ut lorem. Cras ipsum dui, mollis in tristique vel, imperdiet et odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
sit amet sem sapien. Donec sed risus posuere, euismod nulla in, interdum nulla. Aliquam erat volutpat. Donec eget turpis porttitor, eleifend purus eget, consectetur dui. Cras nec velit nulla. Nulla non tincidunt orci. Nunc quis fringilla lacus, at euismod risus. In congue diam nulla, at interdum nunc rhoncus at.</div>
</div>
</div>
</div>
</div>
[/html]
Отредактировано hunter (Сегодня 13:04:44)





















