[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="Design for the guild site on the MyBB engine in Wowhead site style">
<div id="icon"></div>
<img src="http://gerda.moy.su/MyBB_files/FD/WoW-wowhead/WoW-wowhead_COVER.jpg" class="postimg">
</a>
</div>
<div id="port-block2" class="saled">
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Main page of the site: a post feed from the forum, a recruiting panel, a guild progress tab and a user panel like on the Wowhead site."><img src="http://gerda.moy.su/MyBB_files/FD/WoW-wowhead/WoW-wowhead_1.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Site pages: example content of one of the pages of the site."><img src="http://gerda.moy.su/MyBB_files/FD/WoW-wowhead/WoW-wowhead_2.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Main page of the forum: individual icons for forums, forum menu, layout of categories sections."><img src="http://gerda.moy.su/MyBB_files/FD/WoW-wowhead/WoW-wowhead_3.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="View forum page: layout of forum tables and theme icons."><img src="http://gerda.moy.su/MyBB_files/FD/WoW-wowhead/WoW-wowhead_4.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="View topic page: layout of the user's posts, custom style of the post rating, user profile and the date of the post."><img src="http://gerda.moy.su/MyBB_files/FD/WoW-wowhead/WoW-wowhead_5.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]
The site is created in the stylistics style of the site http://www.wowhead.com/ 2015-2016.
The page-by-page coding of the design.
Responsive design (the display of the site is adjusted to the width of the user's screen).
The header has a built-in clickable site logo.
Navigation "bread crumbs" is moved over the forum header, also added drop-down user menu in the style of the wowhead site.
The site is linked to the forum. A separate navigation menu has been created on the site pages.
The main page contains a script for displaying the latest forum posts, as well as a block of "recruiting to the guild" and graphic design of the current progress of the guild. Also the site contain with pop-up tooltips.
When switching to the forum, the forum navigation menu and other links of the user menu are displayed.
Tables of categories of forums and the list of topics are made in the wowhead forums style, the standard layout of these elements has been completely changed. Individual icons for sections on the forum's main page and minimalistic icons of topics on the topic list page.
The topics are also re-formatted according to the style of the wowhead site.