[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="Responsive design for gaming forum">
<div id="icon"></div>
<img src="http://gerda.moy.su/MyBB_files/FD/TZgh/TZgh_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: categories-tabs, block layout of forums"><img src="http://gerda.moy.su/MyBB_files/FD/TZgh/TZgh_1.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s"><a class="tip" title="Topic list page: block layout of topics"><img src="http://gerda.moy.su/MyBB_files/FD/TZgh/TZgh_2.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s"><a class="tip" title="Topic page + response form preview script"><img src="http://gerda.moy.su/MyBB_files/FD/TZgh/TZgh_3.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s"><a class="tip" title="User profile"><img src="http://gerda.moy.su/MyBB_files/FD/TZgh/TZgh_4.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/TZgh/TZgh_5.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s"><a class="tip" title="Custom administration style"><img src="http://gerda.moy.su/MyBB_files/FD/TZgh/TZgh_6.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s"><a class="tip" title="Tablets: Home Page"><img src="http://gerda.moy.su/MyBB_files/FD/TZgh/TZgh_t1.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s"><a class="tip" title="Tablets: Topic List Page"><img src="http://gerda.moy.su/MyBB_files/FD/TZgh/TZgh_t2.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s"><a class="tip" title="Tablets: Topic Page"><img src="http://gerda.moy.su/MyBB_files/FD/TZgh/TZgh_t3.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s"><a class="tip" title="Mobile: Home Page"><img src="http://gerda.moy.su/MyBB_files/FD/TZgh/TZgh_m1.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s"><a class="tip" title="Mobile: Topic List Page"><img src="http://gerda.moy.su/MyBB_files/FD/TZgh/TZgh_m2.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s"><a class="tip" title="Mobile: Topic Page"><img src="http://gerda.moy.su/MyBB_files/FD/TZgh/TZgh_m3.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 code is written from scratch. Painstaking page-by-page coding - each element of the engine has its own individual style.
Most of the design is done in code. Graphic elements include a pattern on the background, a header, a logo, a tab sprite and a few icons. Everything else is styled through css - this makes the forum load quickly.
Made a custom navigation menu. Categories on the main page are switched by tabs. Forum statistics are framed as a footer element.
Block layout of forum list and topic list. Added a blinking new message indicator. Highlighting forum and topic titles on hover.
The quick response form has a built-in and styled script for previewing the text of post on the current page.
All fields and forms for data entry are stylized and have a selection on hover and upon activation (data entry) in the form. For buttons to send posts or save data, there is an animation on hover.
Each page of the forum has its own unique features. Made a style for user-list tables and uploads with highlighting lines when hovering, for a full response form and topic overview in it, for private messages, for displaying search results, etc.
The admin panel has its own unique style with convenient fixed navigation menus in the admin panel.
Design is fully responsive for all screen resolutions.