[html]
<div id="port-block1" class="saled">
<a class="tip" id="cover" title="Design for mybb forum of the guild Storm Hearts in the style of the Alliance faction">
<div id="icon"></div>
<img src="http://gerda.moy.su/MyBB_files/FD/WoW-all/WoW-all_COVER.jpg" class="postimg">
</a>
<div id="cover-block">
Date: 01.09.2016<br>
Creators: <a href="http://forumd-eng.ru/profile.php?id=2" target="_blank">Gerda</a><br>
Engine: MyBB<br>
Cost: 100$<br>
Description: Design for mybb forum of the guild Storm Hearts in the style of the Alliance faction
</div>
</div>
<div id="port-block2" class="saled">
<a class="tip" title="Main Page of the Forum: header and announcement"><img src="http://gerda.moy.su/MyBB_files/FD/WoW-all/WoW-all_1.jpg" class="postimg"></a>
<a class="tip" title="Main Page of the Forum: layout of categories"><img src="http://gerda.moy.su/MyBB_files/FD/WoW-all/WoW-all_2.jpg" class="postimg"></a>
<a class="tip" title="Bottom of the forum and statistics"><img src="http://gerda.moy.su/MyBB_files/FD/WoW-all/WoW-all_3.jpg" class="postimg"></a>
<a class="tip" title="View forum Page"><img src="http://gerda.moy.su/MyBB_files/FD/WoW-all/WoW-all_4.jpg" class="postimg"></a>
<a class="tip" title="View topic Page"><img src="http://gerda.moy.su/MyBB_files/FD/WoW-all/WoW-all_5.jpg" class="postimg"></a>
<a class="tip" title="Submit form and a post preview script"><img src="http://gerda.moy.su/MyBB_files/FD/WoW-all/WoW-all_6.jpg" class="postimg"></a>
<a class="tip" title="Editing user profile page"><img src="http://gerda.moy.su/MyBB_files/FD/WoW-all/WoW-all_7.jpg" class="postimg"></a>
<a class="tip" title="Private Messages Page"><img src="http://gerda.moy.su/MyBB_files/FD/WoW-all/WoW-all_8.jpg" class="postimg"></a>
<a class="tip" title="Private Messages Page"><img src="http://gerda.moy.su/MyBB_files/FD/WoW-all/WoW-all_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>[/html]
GRAPHICS
The design is made in the style of the Alliance faction from World of Warcraft.
Created a detailed page layout of the forum in the style of rpg games. Each style element contains background textures and lineouts.
The guild logo is moved to the top flag, the site header and the ad block are decorated by collage backgrounds in the Alliance theme.LAYOUT
A detailed layout from scratch has been completed.
The width of the forum is fixed, and the header and copyright blocks are responsive.
In the announcement we made blocks for additional menus and built a recruiting blocks with detailed information. In the navigation menu we added a link to information about the guild, stylized as a banner of the guild.
A large area of the forum's copyright has been issued with links to the important information about the guild. Statistics moved to the forum copyright zone.
Unique style of categories: description is moved to the right, and columns with forums statistics and links are moved to the left. On other pages of the forum, there is also an original layout of the forum tables. Also, selection of the rows of the tables is done when the cursor is hovered. The main page also has a unique style for displaying sections of the category of class mechanics.
Added branding style on the pages of Personal Messages.
User profile in topic is stylized as flags with the highlighting of the user's online profile. The posts content mirroring the dialog boxes. The style of posts, including quotes, codes, tables and so on, is made.
Different styles for submit forms, glow of active forms on CSS3.
Also, the style is optimized for mobile devices.SCRIPTS
Script for importing avatars of user's characters and colors of usenames from World of Warcraft Armory, as well as Wowhead tooltips is built in. Added a script for previewing posts in a submit form.