исправьте дизайн добавив множество всяких эффектов шрифт , изображение можно брать с открытых источников, используя все самое новое, надо загромоздить весь дизайн что писать в css html
но цвет сбалансирвоаный сначала каркас кода с моими перемеными а потом что в css писать  <html id="root">
<head>
<meta charset="utf-8">
<title>[TITLE]</title>
<link rel="stylesheet" href="/.s/src/css/1705.css" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script type="text/javascript">
		var browser			= navigator.userAgent;
		var browserRegex	= /(Android|BlackBerry|IEMobile|Nokia|iP(ad|hone|od)|Opera M(obi|ini))/;
		var isMobile		= false;
		if(browser.match(browserRegex)) {
			isMobile			= true;
			addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
			function hideURLbar(){
				window.scrollTo(0,1);
			}
		}
    var currentPageIdTemplate = '$PAGE_ID$';
    var currentModuleTemplate = '$MODULE_ID$';
    var navTitle = 'Navigation';
</script>
</head>

<body>
<!-- <header> -->
<header>
  <div id="header">
    <div class="wrapper">
          <div id="site-logo"><span class="site-l"><span class="site-n"><a href="$HOME_PAGE_LINK$">$SITE_NAME$</a></span></span></div>
          <nav>
           <div id="catmenu">
     	 	                               <!-- <sblock_nmenu> -->CONTENT<!-- </sblock_nmenu> -->
     	 	                         <div class="clr"></div>
     	 	                         </div>
          </nav>
    <div class="clr"></div>
    </div>
  </div>
</header>
<!-- </header> -->
<!-- <global_promo> -->
<?if($URI_ID$='page1')?>
<div id="promo">
	<div class="promo-wrapper">
		<div class="promo-i">
			<div class="promo-cap">
				<div class="promo-ttl">Lorem ipsum dolor sit amet</div>
				<div class="promo-ds">Aliquam cursus tellus at nunc</div>
				<div class="promo-sds">Mauris commodo ante massa, eget feugiat mi dignissim nec</div>
			</div>
		</div>
	</div>
</div>
<?endif?>
<!-- </global_promo> -->
<div id="casing">
	<div class="wrapper">
        <?if($MODULE_ID$='forum')?><div class="forum-box"><?endif?>
         <!-- <middle> -->
	     <div id="content" <?if($HIDE_CLEFTER$)?>class="wide-page"<?endif?>>
	           <section class="module-$MODULE_ID$">[BODY]</section>
	          </div>
						<?if(!$HIDE_CLEFTER$)?>
	          <aside>
       <div id="sidebar">
       <div class="sidebox">
                <div class="inner">
                <div style="text-align:center;"><?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?><span>Hello, <a href="$PERSONAL_PAGE_LINK$"><b>$USERNAME$</b></a>!</span><?else?><span>Hello, <b>$USERNAME$</b>!</span><?endif?><br><?endif?>
      <?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?><a title="Profile page" href="$PERSONAL_PAGE_LINK$">Profile page</a> | <a title="Log out" href="$LOGOUT_LINK$">Log out</a><?else?><a title="Register now" href="$REGISTER_LINK$">Register now</a> | <a title="Log in" href="$LOGIN_LINK$">Log in</a><?endif?><?endif?></div>
                </div>
      <div class="clr"></div>
      </div>
          <!-- <container> --><!-- <block> -->
          <div class="sidebox"><div class="sidetitle"><span>TITLE</span></div>
                    <div class="inner">
                    CONTENT
                    </div>
          <div class="clr"></div>
          </div>
          <!-- </block> --><!-- </container> -->
       </div>
     </aside>
		 <?endif?>
         <!-- </middle> -->
	    <div class="clr"></div>
        <?if($MODULE_ID$='forum')?></div><?endif?>
	</div>
</div>
<!-- <footer> -->
<footer>
 <div id="footer">
  <div class="wrapper">
   <div class="foot-l">
    [COPYRIGHT]. $POWERED_BY$
   </div>
   <div class="foot-r">
    <div id="soc-box">
     <span><a href="https://twitter.com/" class="soc-tw" target="_blank"></a></span>
     <span><a href="https://www.facebook.com/" class="soc-fc" target="_blank"></a></span>
     <span><a href="https://vimeo.com/" class="soc-vi" target="_blank"></a></span>
     <span><a href="http://vk.com/" class="soc-vk" target="_blank"></a></span>
    </div>
   </div>
  <div class="clr"></div>
  </div>
 </div>
</footer>
<!-- </footer> -->
<script type="text/javascript" src="/.s/t/1705/ui.js"></script>
<!-- <popup> -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<div id="casing" class="popuptable">
<div class="popuptitle"><div><span>[TITLE]</span></div></div><div class="popupbody">[BODY]</div>
</div>
<!-- </popup> -->
</body>
</html>
<!-- <config> -->
{
    "rstars_b_image" : "/.s/t/1705/brating.png",
    "rstars_b_size" : "32",
    "rstars_s_image" : "/.s/t/1705/rating.png",
    "rstars_s_size" : "16"
}
<!-- </config> -->