[html]
<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);}
</style>

[/html]

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.