[html]<!-- Русский  -->
<div id="port-block1" class="saled rus">

<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 rus">
<a class="tip" title="Главная страница сайта"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-1.jpg" class="postimg"></a>
<a class="tip" title="Страница сайта"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-2.jpg" class="postimg"></a>
<a class="tip" title="Страница сайта"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-3.jpg" class="postimg"></a>
<a class="tip" title="Главная страница форума"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-4.jpg" class="postimg"></a>
<a class="tip" title="Главная страница форума"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-5.jpg" class="postimg"></a>
<a class="tip" title="Список тем"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-6.jpg" class="postimg"></a>
<a class="tip" title="Топик"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-7.jpg" class="postimg"></a>
<a class="tip" title="Личные сообщения"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-8.jpg" class="postimg"></a>
<a class="tip" title="Мобильный стиль"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-9.jpg" class="postimg"></a>

</div>

<!-- English  -->
<div id="port-block1" class="saled eng">

<a class="tip" id="cover" title="Responsive design for the guild site">
  <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 eng">
<a class="tip" title="Home page of the site"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-1.jpg" class="postimg"></a>
<a class="tip" title="Website page"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-2.jpg" class="postimg"></a>
<a class="tip" title="Website page"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-3.jpg" class="postimg"></a>
<a class="tip" title="Forum Home"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-4.jpg" class="postimg"></a>
<a class="tip" title="Forum Home"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-5.jpg" class="postimg"></a>
<a class="tip" title="The list of topics"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-6.jpg" class="postimg"></a>
<a class="tip" title="Topic"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-7.jpg" class="postimg"></a>
<a class="tip" title="Private messages"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-8.jpg" class="postimg"></a>
<a class="tip" title="Mobile design"><img src="http://gerda.moy.su/MyBB_files/FD/BGuild/BGuild-9.jpg" class="postimg"></a>
</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);}
</style>

<style>#pun-viewtopic h1 {display:none;}</style>

<!-- Добавляем селекторы  -->
<script type="text/javascript">
$('.spoiler-box:contains("подробное описание")').addClass('rus');
$('.spoiler-box:contains("detailed description")').addClass('eng');
</script>[/html]

подробное описание

Платформа: MyBB
Сайт заказчика

В интерфейсе дизайна использованы элементы стиля официального сайта World of Warcraft и арты по игре.
Постраничная оригинальная верстка дизайна с нуля. От стандартного интерфейса MyBB не осталось ни одного следа, не смотря на бесплатный движок, сайт выглядит как сделанный на профессиональной платформе.
К форуму привязан сайт-визитка на базе функционала форума "страницы". Создано отдельное меню навигации по страницам сайта с юзер-панелью и выпадающим меню навигации форума.
Дизайн страниц сайта отличается от стиля форума. Стилистика дизайна сайта вдохновлена официальным сайтом World of Warcraft, а форум разрабатывался в минималистичном стиле, похожим на Discord, без четкого обозначения принадлежности к игре.
Дизайн сайта и форума полностью адаптивен под все устройства. Вы можете наблюдать изменение стиля, сужая окно браузера.
На форуме встроен фиксированный сайд-бар, который содержит: ссылку на главную страницу, выпадающие меню навигации и юзер-меню, юзер-панель с данными пользователя и стрелками прокрутки страницы вверх/вниз.
Также на главной странице есть дополнительный сайдбар с важными ссылками и последними сообщениями форума.
Категории и правый сайд-бар оборудованы скриптами сворачивания.
Сделана нестандартная верстка сообщений топика с скриптом сворачивания информации профиля и индикатором пользователя онлайн/офлайн.
Фирменная верстка страниц редактирования профиля и личных сообщений.

detailed description

Engine: MyBB
Customer's site

The design interface uses elements of the style of the official site World of Warcraft and game art.
Original coding of design from scratch. From the standard interface MyBB there was not a single trace left. Despite the free engine, the site looks like it was made on a professional platform.
The site is linked to the forum on the basis of the functionality of the "Pages". Created a separate menu to navigate through the pages of the site with the user panel and drop-down forum's menu navigation.
The design of the site pages is different from the style of the forum. Stylistics of design is inspired by the official forum of World of Warcraft, and the forum was developed in a minimalist style, similar to Discord, without a clear indication of belonging to the game.
Site and forum design is fully responsive for all devices. You can watch the style change by narrowing the browser window.
The forum has a fixed sidebar, which contains: a link to the main page, drop-down navigation menus and user menus, a user panel with user's data and page up/down arrows. Also on the main page there is an additional sidebar with important links and the latest forum posts.
Categories and the right side bar are equipped with folding scripts.
A non-standard layout of the topic's messages with the script for expanding profile information and an online/offline user indicator.
Branded layout of profile editing pages and private messages.