[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 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>
<div id="port-block2" class="saled">
<section class="wow bounceIn" data-wow-duration="1s">
<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></section>
<section class="wow bounceIn" data-wow-duration="1s">
<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></section>
<section class="wow bounceIn" data-wow-duration="1s">
<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></section>
<section class="wow bounceIn" data-wow-duration="1s">
<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></section>
<section class="wow bounceIn" data-wow-duration="1s">
<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></section>
<section class="wow bounceIn" data-wow-duration="1s">
<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></section>
<section class="wow bounceIn" data-wow-duration="1s">
<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></section>
<section class="wow bounceIn" data-wow-duration="1s">
<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></section>
<section class="wow bounceIn" data-wow-duration="1s">
<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></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 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.
Detailed page-by-page coding has been completed.
In the announcement i made blocks for additional menus and built a recruiting blocks with detailed information. In the navigation menu i 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.
Unique style of categories of the forum and 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 special category (category of class mechanics).
Added branding style on the pages of Personal Messages.
Highlighting of the user's online profile.
Different styles for submit forms, glow of active forms on CSS3.
Also, the style is optimized for mobile devices.
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.