[html]<link rel="stylesheet" href="http://gerda.moy.su/MyBB_files/important/rus-port.css">
<div id="port-block1" class="saled">
<a class="tip" id="cover" title="Адаптивный дизайн для сайта гильдии">
<div id="icon"></div>
<img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild_COVER.jpg" class="postimg">
</a>
</div>
<div id="port-block2" class="saled">
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Главная страница сайта"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-1.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Страница сайта"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-2.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Страница сайта"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-3.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Главная страница форума"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-4.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Главная страница форума"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-5.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Список тем"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-6.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Топик"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-7.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Личные сообщения"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-8.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Мобильный стиль"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-9.jpg" class="postimg"></a></section>
</div>
<style>
.punbb .topicpost .post-content .spoiler-box {
border: 1px solid #e63737;
background-color: rgba(230,55,55,0.1);
}
.punbb .post-content .spoiler-box > div:hover {background-color: rgba(230,55,55,0.6);}
.punbb .post-content .spoiler-box > div {background-color: rgba(230,55,55,0.3);}
.post-content .spoiler-box > div.visible {background-color: rgba(230,55,55,0.8) color: #fff !important;;}
</style>[/html]
В интерфейсе дизайна использованы элементы стиля официального сайта World of Warcraft и арты по игре.
Постраничная индивидуальная верстка дизайна с нуля. Полная переработка интерфейса движка под нужды заказщика. Не смотря на бесплатный движок, сайт выглядит как сделанный на профессиональной платформе.
К форуму привязан сайт-визитка. Создано отдельное меню навигации по страницам сайта с юзер-панелью и выпадающим меню навигации форума.
Дизайн страниц сайта отличается от стиля форума. Стилистика дизайна сайта вдохновлена официальным сайтом World of Warcraft, а форум разрабатывался в минималистичном стиле, похожим на Discord, без четкого обозначения принадлежности к игре.
Дизайн сайта и форума полностью адаптивен на любых устройствах.
На форуме встроен фиксированный сайд-бар, который содержит: ссылку на главную страницу, выпадающие меню навигации и юзер-меню, юзер-панель с данными пользователя и стрелками прокрутки страницы вверх/вниз.
Также на главной странице есть дополнительный сайдбар с важными ссылками и последними сообщениями форума.
Категории и правый сайд-бар оборудованы скриптами сворачивания.
Сделана нестандартная верстка сообщений топика с скриптом сворачивания информации профиля и индикатором пользователя онлайн/офлайн.
Фирменная верстка страниц редактирования профиля и личных сообщений.