[html]<!-- СТИЛЬ -->
<div class="SQA"><!-- КОПИРАЙТ, ПЕРЕВОД И КОММЕНТАРИИ ОТ forumd.ru, НЕ УДАЛЯЙТЕ, ПОЖАЛУЙСТА -->
<a class="cdtSQA" href="http://crushcrushcrush.actifforum.com/" target="_blank"><img src="https://i.imgur.com/VHYyELL.png" /></a>
<!-- ТИТУЛЬНЫЙ БЛОК С ЛОГО, НАЗВАНИЕМ И ОПИСАНИЕМ -->
<div class="topSQA">
<!-- КАРТИНКА 100*100 -->
<img src="https://forumstatic.ru/files/001c/0a/b2/55521.png" />
<!-- НАЗВАНИЕ И ОПИСАНИЕ -->
<div class="ALSQA"><div class="npSQA">CROSSOVER MINIMAL</div>
<div class="abtSQA">мы тут просто для поиграть</div></div></div>
<!-- ИНФОРМАЦИОННЫЕ БЛОКИ-->
<div class="rpSQA">
<!-- ПОДЗАГОЛОВОК --><div class="pSQA">Навигация</div>
<!-- КОНТЕНТ БЛОКА -->
<a href="..." target="_blank">занятые роли</a>
<table> <tr>
<td style="
font: 600 11px tahoma;
background: #0d0d0d24;
color: #172122;"> придержанные роли:<br> Zhongli (genshin impact) - SD до 00.00.<br>Victor Petrov (Atomic Heart) - krktrs до 00.00.<br> Dmitriy Sechenov (Atomic Heart) - nic до 00.00.<br>Charles (Atomic Heart) - wolfy до 00.00.<br>Larisa Filatova (Atomic Heart) - SD до 00.00.<br>Sirius Black (Harry Potter) - star до 00.00.<br>Remus Lupin (Harry Potter) - moony до 00.00.<br></td>
<td width="250">выкупленные роли:<br>Alhaitham (genshin impact) - Kaveh до 00.00.<br></td>
</table>
<a href="..." target="_blank">нужные персонажи</a>
фандом месяца<br> </div>
<!-- ПОДЗАГОЛОВОК --><div class="pSQA">Администрация</div></div>
[/html]
[html]<style>
/*ОСНОВНОЕ*/
.RRPTANG {
margin:auto; /*отступ*/
width:500px; /*ширина*/
text-align:left; /*текст слева*/
}
/*КОПИРАЙТ*/
.cdtRRPTANG {
position:absolute; /*позиционирование*/
margin-top:60px; /*отступ сверху*/
margin-left:-12px; /*отступ слева*/
/*анимация появления копирайта*/
transform:scale(0); -webkit-transform:scale(0); transition:all 0.75s ease-in-out; -webkit-transition:all 0.75s ease-in-out;
}
.RRPTANG:hover .cdtRRPTANG {
transform:scale(1); -webkit-transform:scale(1);
}
.RRPTANG a {
text-decoration:none !important; /*убрать подчёркивание у ссылок*/
}
.rpTANG {
margin-bottom:10px; /*отступ снизу*/
width:500px; /*ширина*/
height:100px; /*высота*/
overflow:hidden;
}
/* КАРТИНКА И СТАТУС */
.ISTANG {
float:left;
margin-left:25px; /*отступ слева*/
margin-right:10px; /*отступ справа*/
width:100px; /*ширина*/
height:100px; /*высота*/
text-align:center; /*текст по центру*/
/*анимация*/
transition:all 0.55s; -webkit-transition:all 0.55s;
transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
}
.iconTANG {
width:100px; /*ширина*/
height:100px; /*высота*/
overflow:hidden;
transform:translateZ(50px); -webkit-transform:translateZ(50px); /*анимация*/
}
.iconTANG img {/*картинка*/
width:100px; /*ширина*/
height:100px; /*высота*/
}
.ndeTANG { /*то что появляется при наведении на картинку*/
width:90px; /*ширина*/
height:95px; /*высота*/
padding:5px 5px 0; /*отступы*/
transform:rotateX(-90deg) translateZ(-50px); -webkit-transform:rotateX(-90deg) translateZ(-50px); /*анимация*/
background:#CCC; /*цвет фона*/
}
/* СТАТУС ЭПИЗОДА */
.ndeTANG span {
display:block;
margin-top:33px; /*отступ сверху*/
padding:5px; /*отступ*/
text-align:center; /*текст по центру*/
text-transform:uppercase; /*все буквы заглавные*/
font-size:10px; /*размер шрифта*/
font-family:tahoma; /*шрифт*/
line-height:14px; /*высота линии*/
background:white; /*цвет фона*/
color:grey; /*цвет текста*/
}
.ISTANG:hover {
transform:rotateX(90deg); -webkit-transform:rotateX(90deg); /*анимация при наведении*/
}
/* НАЗВАНИЕ ЭПИЗОДА */
.tleTANG {
display: block;
width: 440px;
height: 15px;
padding: 5px 10px 5px 0;
text-align: right;
font-style: italic;
font-size: 22px;
font-family: tahoma;
line-height: 16px;
background: #df9653;
color: #F8F8F8 !important;
}
.tleTANG a {color:#F8F8F8; /*цвет ссылки*/}
.ftTANG {
margin-top:5px; /*отступ сверху*/
width:440px; /*ширина*/
height:15px; /*высота*/
padding-right:10px; /*отступ справа*/
text-align:right; /*текст справа*/
font-size:10px; /*размер шрифта*/
font-family:tahoma; /*шрифт*/
line-height:15px; /*высота линии*/
background:#F3F3F3; /*цвет фона*/
color:black; /*цвет шрифта*/
}
/* ОПИСАНИЕ */
.storyTANG {
margin-top:5px; /*отступ сверху*/
width:500px; /*ширина*/
height:40px; /*высота*/
padding:5px 0; /*отступы*/
background:#F8F8F8; /*цвет фона*/
color:black; /*цвет текста*/
}
.storyTANG p {/*текст описания*/
margin:0; /*отступы*/
width:358px; /*ширина*/
height:40px; /*высота*/
padding-right:5px; /*отступ справа*/
overflow-y:auto; /*прокрутка*/
font-size:10px; /*размер шрифта*/
text-align:justify; /*текст по ширине*/
font-family:tahoma; /*шрифт*/
line-height:13px; /*высота линии*/
}
</style>
<div class="RRPTANG"><!-- КОПИРАЙТ, ПОЖАЛУЙСТА НЕ УДАЛЯЙТЕ! --><a class="cdtRRPTANG" href="http://crushcrushcrush.actifforum.com/" target="blank"><img src="https://i.imgur.com/VHYyELL.png" /></a>
<!-- ЭПИЗОД I --><div class="rpTANG"><!-- КАРТИНКА & СТАТУС ЭПИЗОДА --><div class="ISTANG"><!--КАРТИНКА 100*100 --><div class="iconTANG"><img src="https://forumstatic.ru/files/001c/0a/b2/84177.jpg" /></div><!-- СТАТУС ЭПИЗОДА --><div class="ndeTANG"><span>администратор</span></div></div>
<!-- НАЗВАНИЕ ЭПИЗОДА --><a href="https://minimalcross.rusff.me/profile.php?id=3" target="_blank" class="tleTANG">Долтон Ламберт</a>
<!-- УЧАСТНИКИ --><div class="ftTANG">Если бы я мог не орать, я бы не ОРАЛ.</div>
<!-- ОПИСАНИЕ --><div class="storyTANG"><p>Разруливает приемку анкет по заявкам и помимо них, занимается партнеркой, отвечает в гостевой внятными ответами, общителен до зубного скрежета. </p></div></div>
<!-- ЭПИЗОД II --><div class="rpTANG"><!-- КАРТИНКА & СТАТУС ЭПИЗОДА --><div class="ISTANG"><!--КАРТИНКА 100*100 --><div class="iconTANG"><img src="https://forumstatic.ru/files/001c/0a/b2/90653.jpg" /></div><!-- СТАТУС ЭПИЗОДА --><div class="ndeTANG"><span>Администратор</span></div></div>
<!-- НАЗВАНИЕ ЭПИЗОДА --><a href="..." target="_blank" class="tleTANG">Реми ЛеБо</a>
<!-- УЧАСТНИКИ --><div class="ftTANG">У меня в буквальном смысле есть туз в рукаве</div>
<!-- ОПИСАНИЕ --><div class="storyTANG"><p>Кидает предупреждения, удаляет пропажи, бронирует столики, вносит записи о новоприбыших. Просто красивый.</p></div></div>
<!-- ЭПИЗОД III --><div class="rpTANG"><!-- КАРТИНКА & СТАТУС ЭПИЗОДА --><div class="ISTANG"><!--КАРТИНКА 100*100 --><div class="iconTANG"><img src="https://forumstatic.ru/files/001c/0a/b2/73161.jpg" /></div><!-- СТАТУС ЭПИЗОДА --><div class="ndeTANG"><span>Администратор</span></div></div>
<!-- НАЗВАНИЕ ЭПИЗОДА --><a href="..." target="_blank" class="tleTANG">Кавех</a>
<!-- УЧАСТНИКИ --><div class="ftTANG">Ну че ты говоришь со мной, как с Бузовой? </div>
<!-- ОПИСАНИЕ --><div class="storyTANG"><p>Занимается в углу графикой, кодами и странными конкурсами, в гостевой немного бесполезен - аллергия на внятные ответы. Общается с миром через тему мыслей.</p></div></div>
<!-- ЭПИЗОД III --><div class="rpTANG"><!-- КАРТИНКА & СТАТУС ЭПИЗОДА --><div class="ISTANG"><!--КАРТИНКА 100*100 --><div class="iconTANG"><img src="https://forumupload.ru/uploads/001c/0a/b2/2/991946.png" /></div><!-- СТАТУС ЭПИЗОДА --><div class="ndeTANG"><span>Администратор</span></div></div>
<!-- НАЗВАНИЕ ЭПИЗОДА --><a href="https://minimalcross.rusff.me/profile.php?id=4" target="_blank" class="tleTANG">Сэм Винчестер</a>
<!-- УЧАСТНИКИ --><div class="ftTANG">Я кроссовок потерял</div>
<!-- ОПИСАНИЕ --><div class="storyTANG"><p>Пиарит так же, как продолжает семейное дело. Принимает анкеты и является голосом разума в сглаживании конфликтов.</p></div></div>
[/html]