[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 role-playing game Enirin in dark fantasy style">
<div id="icon"></div>
<img src="http://gerda.moy.su/MyBB_files/FD/Enirin/Eni_COVER.jpg" class="postimg">
</a>
</div>
<div id="port-block2" class="saled">
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Site header and announcement"><img src="http://gerda.moy.su/MyBB_files/FD/Enirin/Eni_1.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Categories and sections of the forum"><img src="http://gerda.moy.su/MyBB_files/FD/Enirin/Eni_2.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Topic list page"><img src="http://gerda.moy.su/MyBB_files/FD/Enirin/Eni_3.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Topic page"><img src="http://gerda.moy.su/MyBB_files/FD/Enirin/Eni_4.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Quotations style"><img src="http://gerda.moy.su/MyBB_files/FD/Enirin/Eni_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 layout is made in the style of dark fantasy according to preferences of the customer. The design used a lot of textures and lighting effects.
Forum tables are provided with background images and outlines. Detailed style of posts on the topic page.
The design is made with a complex double outline of the body of the forum. In the header there is an additional menu with navigation through important sections of the forum.
The navigation menu and user menu are located vertically on the sides of the announcement block.
The announcement has a built-in and stylized container with switching tabs.
Selection of active rows of forum tables when hovering over the cursor.
All types of topic icons have active (there are new messages) and inactive (no new messages) style.