[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="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">
<section class="wow bounceIn" data-wow-duration="1s">
<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></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Website page"><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="Website page"><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="Forum Home"><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="Forum Home"><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="The list of topics"><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="Topic"><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="Private messages"><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="Mobile design"><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]

detailed description

Customer's site

The design interface uses elements of the style of the official site World of Warcraft and game art.
Individual coding of every page from scratch. Complete redesign of the engine interface to customer needs. Despite the free engine, the site looks like it was made on a professional platform.
The site is linked to the forum. 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.
The design of the site and forum is fully responsive on any device.
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.