Clear Blu

Designer's Comments

Look carefully for specific instructions

This layout contains notes. Please do not remove credits.

Layout Code

Copy and paste to Template HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

img {
	margin-right: 5px;	
}
#container {
	margin-right: auto;
	margin-left: auto;
	width: 800px;
}
#header {
	float: left;
	width: 796px;
	margin-top: 20px;
}
#header_top_sec {
	background-image: url(http://cbimg6.com/layouts/10/08/36459ak.png);
	float: left;
	height: 14px;
	width: 796px;
}
#header_mid_sec {
	background-image: url(http://cbimg6.com/layouts/10/08/36459al.png);
	background-repeat: repeat-y;
	float: left;
	width: 776px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
#header_bottom_sec {
	background-image: url(http://cbimg6.com/layouts/10/08/36459am.png);
	float: left;
	height: 14px;
	width: 796px;
}
#logo {
	float: left;
	height: 72px;
	width: 284px;
}
#social {
	float: left;
	height: 41px;
	margin-left: 250px;
}
#social_left_sec {
	background-image: url(http://cbimg6.com/layouts/10/08/36459an.png);
	float: left;
	height: 41px;
	width: 18px;
}
#social_mid_sec {
	background-image: url(http://cbimg6.com/layouts/10/08/36459ao.png);
	float: left;
	height: 35px;
	padding-top: 6px;
}
#social_right_sec {
	background-image: url(http://cbimg6.com/layouts/10/08/36459ap.png);
	float: left;
	height: 41px;
	width: 18px;
}
#menu {
	background-image: url(http://cbimg6.com/layouts/10/08/36459aq.png);
	float: left;
	height: 100px;
	width: 700px;
	background-repeat: no-repeat;
	margin-left: 50px;
	background-position: bottom;
}
#social_container {
	float: left;
	height: 100px;
	width: 490px;
}
.menu_btn_home {
	float: left;
	height: 109px;
	width: 67px;
	margin-left: 125px;
	background-repeat: no-repeat;
}
.menu_btn_contact {
	float: left;
	height: 109px;
	width: 67px;
	margin-left: 125px;
}
.menu_btn_about {
	float: left;
	height: 109px;
	width: 67px;
	margin-left: 125px;
}
#cb_body {
	float: left;
	width: 795px;
	margin-top: 10px;
}
#sidebar {
	float: left;
	width: 270px;
}
.sidebar_area {
	float: left;
	width: 267px;
	margin-top: 10px;
}
.sidebar_area_top {
	background-image: url(http://cbimg6.com/layouts/10/08/36459ar.png);
	float: left;
	height: 16px;
	width: 267px;
}
.sidebar_area_bottom {
	background-image: url(http://cbimg6.com/layouts/10/08/36459as.png);
	float: left;
	height: 16px;
	width: 267px;
}
.sidebar_area_mid {
	background-image: url(http://cbimg6.com/layouts/10/08/36459at.png);
	float: left;
	width: 247px;
	background-repeat: repeat-y;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 10px;
}
.sidebar_area_header {
	background-image: url(http://cbimg6.com/layouts/10/08/36459au.png);
	float: left;
	height: 20px;
	width: 240px;
	font-size: 14px;
	font-weight: bold;
	padding-left: 10px;
	margin-left: 1px;
}
.sidebar_area_content {
	float: left;
	width: 225px;
	padding-left: 15px;
	margin-top: 10px;
}
#body_main {
	float: left;
	width: 519px;
	margin-top: 10px;
}
#body_main_top {
	background-image: url(http://cbimg6.com/layouts/10/08/36459av.png);
	float: left;
	height: 15px;
	width: 519px;
}
#body_main_mid {
	background-image: url(http://cbimg6.com/layouts/10/08/36459aw.png);
	background-repeat: repeat-y;
	float: left;
	width: 515px;
	margin-left: 4px;
}
#body_main_bottom {
	background-image: url(http://cbimg6.com/layouts/10/08/36459ax.png);
	float: left;
	height: 15px;
	width: 519px;
}
#body_main_header {
	font-size: 14px;
	font-weight: bold;
	float: left;
	width: 500px;
	margin-left: 10px;
	background-image: url(http://cbimg6.com/layouts/10/08/36459ay.png);
	background-repeat: repeat-x;
	background-position: bottom;
	height: 25px;
}
#body_main_content {
	font-size: 11px;
	float: left;
	width: 485px;
	margin-left: 15px;
	margin-top: 15px;
	margin-right: 15px;
	margin-bottom: 15px;
}
#footer {
	background-image: url(http://cbimg6.com/layouts/10/08/36459az.png);
	float: left;
	height: 26px;
	width: 776px;
	margin-top: 15px;
	padding: 10px;
}
#footer_links {
	float: left;
	width: 400px;
}
#footer_info {
	float: left;
	width: 350px;
	text-align: right;
}

</style>
</head>

<body onload="MM_preloadImages('http://the-perception.com/clear_blu/images/home_ico_hover.png','http://the-perception.com/clear_blu/images/contact_ico_hover.png','http://the-perception.com/clear_blu/images/about_ico_hover.png')">

<div id="container">
  <div id="header">
    <div id="header_top_sec"></div>
    <div id="header_mid_sec">
      <div id="logo"><img src="http://cbimg6.com/layouts/10/08/36459aa.png" width="284" height="72" alt="Logo" /></div>
      <div id="social_container">
        <div id="social">
          <div id="social_left_sec"></div>
          <div id="social_mid_sec"><img src="http://cbimg6.com/layouts/10/08/36459ab.png" alt="twitter" width="30" height="30" align="left" /> <img src="http://cbimg6.com/layouts/10/08/36459ac.png" alt="facebook" width="31" height="31" align="left" />  <img src="http://cbimg6.com/layouts/10/08/36459ad.png" width="50" height="15" align="left" />  <img src="http://cbimg6.com/layouts/10/08/36459ae.png" alt="RSS" width="31" height="31" align="left" /></div>
          <div id="social_right_sec"></div>
        </div>
      </div>
      <div id="menu">
        <div class="menu_btn_home"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','http://the-perception.com/clear_blu/images/home_ico_hover.png',1)"><img src="http://cbimg6.com/layouts/10/08/36459af.png" alt="Home" name="Home" border="0" id="Home" /></a></div>
        <div class="menu_btn_contact"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','http://the-perception.com/clear_blu/images/contact_ico_hover.png',1)"><img src="http://cbimg6.com/layouts/10/08/36459ag.png" alt="Contact" name="Contact" border="0" id="Contact" /></a></div>
        <div class="menu_btn_about"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About','','http://the-perception.com/clear_blu/images/about_ico_hover.png',1)"><img src="http://cbimg6.com/layouts/10/08/36459ah.png" alt="About" name="About" border="0" id="About" /></a></div>
      </div>
    </div>
    <div id="header_bottom_sec"></div>
    <div id="cb_body">
      <div id="sidebar">
        <div class="sidebar_area">
          <div class="sidebar_area_top"></div>
          <div class="sidebar_area_mid">
            <div class="sidebar_area_header">Header Here</div>
            <div class="sidebar_area_content"><img src="http://cbimg6.com/layouts/10/08/36459ai.jpg" alt="random" width="88" height="90" border="0" align="left" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non dui quis massa laoreet pharetra. Fusce eget nunc massa. Duis et risus ut tellus viverra adipiscing. Sed eu vestibulum odio. Nulla dictum vehicula urna et aliquam. Mauris quis leo a elit elementum auctor. Donec ac nisi leo. In augue tellus, tincidunt ac malesuada ac, semper quis arcu. Etiam viverra adipiscing purus ac pharetra. Phasellus sodales, purus sit amet consequat molestie, purus urna laoreet diam, vitae sagittis arcu magna et est. Ut gravida iaculis gravida. </div>
          </div>
          <div class="sidebar_area_bottom"></div>
        </div>
        <div class="sidebar_area">
          <div class="sidebar_area_top"></div>
          <div class="sidebar_area_mid">
            <div class="sidebar_area_header">Header Here</div>
            <div class="sidebar_area_content">Content for  class "sidebar_area_mid" Goes Here</div>
          </div>
          <div class="sidebar_area_bottom"></div>
        </div>
      </div>
      <div id="body_main">
        <div id="body_main_top"></div>
        <div id="body_main_mid">
          <div id="body_main_header">Content for  id "body_main_header" Goes Here</div>
          <div id="body_main_content"> This "body_main" may be altered and improved based on the users ability.</div>
          <div id="body_main_header">Header Article 2</div>
          <div id="body_main_content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non dui quis massa laoreet pharetra. Fusce eget nunc massa. Duis et risus ut tellus viverra adipiscing. Sed eu vestibulum odio. Nulla dictum vehicula urna et aliquam. Mauris quis leo a elit elementum auctor. Donec ac nisi leo.<a href="#"> In augue</a> tellus, tincidunt ac malesuada ac, semper quis arcu. Etiam viverra adipiscing purus ac pharetra. Phasellus sodales, purus sit amet consequat molestie, purus urna laoreet diam, vitae sagittis arcu magna et est. Ut gravida iaculis gravida.
<p>Suspendisse nisl odio, facilisis nec porta at, viverra quis diam. Praesent nec massa sit amet odio luctus aliquam. In id leo in quam vestibulum commodo. Praesent pellentesque ultrices nisi molestie pharetra. Praesent non nunc quam, sed posuere magna. Nullam quis arcu a enim fringilla posuere at a orci. In ultrices condimentum euismod. Nunc congue rhoncus tincidunt. Fusce dignissim adipiscing arcu eget aliquam. Etiam a lacinia lectus. <a href="#">This is a link</a> tortor arcu, commodo eu viverra ut, dictum at purus. Fusce vulputate laoreet feugiat. Donec dolor dolor, lacinia adipiscing suscipit ac, luctus suscipit mauris. Mauris urna ligula, ornare et auctor ac, faucibus vel purus. Vestibulum egestas diam quis arcu egestas vestibulum. Vestibulum et augue turpis. Suspendisse egestas accumsan mauris, eget molestie diam posuere ut. Sed vehicula condimentum velit, non mattis ligula volutpat at. Nunc tortor felis, suscipit eget porta ut, viverra vitae felis.</p>
            <p>In hac habitasse platea dictumst. Nulla consequat suscipit ipsum, vel elementum sapien venenatis eu. Suspendisse ac quam sed tellus ornare elementum eget eget risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi feugiat mauris sit amet purus vestibulum ultricies. Nunc quis ipsum velit, et volutpat odio. Fusce tincidunt luctus accumsan. Nam tincidunt consequat neque et ultrices. Integer tempus sodales risus, egestas condimentum libero aliquam in. Quisque feugiat leo et tortor tincidunt tincidunt. Praesent nulla lorem, vestibulum id mollis id, aliquet vel ligula. Praesent vitae ante id mauris sagittis egestas eu at orci.</p>
            <p>In nisi mauris, commodo vitae imperdiet at, tincidunt et nulla. Phasellus velit lacus, cursus in condimentum nec, cursus ac tortor. Duis ultricies pretium tincidunt. Pellentesque eget nisl velit, at vulputate risus. In interdum metus eget orci gravida feugiat tincidunt erat condimentum. Vivamus purus neque, vestibulum id interdum sit amet, pulvinar sit amet orci. Curabitur non congue purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Nulla eleifend, lorem a interdum porttitor, lectus nibh egestas massa, non placerat leo purus quis est. Duis porta sapien id est dictum id auctor nisi ullamcorper.</p>
          </div>
        </div>
        <div id="body_main_bottom"></div>
      </div>
    </div>
    <div id="footer">
      <div id="footer_links">( <a href="#">Home</a> ) ( <a href="#">Contact</a> ) ( <a href="#">About</a> ) ( <a href="#">Link</a> )</div>
      <div id="footer_info">Layout design by<a href="http://jesj.createblog.com/"> James</a></div>
    </div>
  </div>
</div>
</body>
</html>

Layout Comments

Showing latest 3 of 3 comments

Very "2.0". Vibrant colors too. It has a simple, yet very sophisticated design...I like it! ^_^

By cynthiachioma on Aug 5, 2010 5:09 am

YAY JAMES!

By JustLeah on Aug 2, 2010 8:25 pm

Layout Details

Designer	ddddaa
Submitted on	Jul 28, 2010
Page views	5,409
Favorites	6
Comments	3
Reviewer	tokyo-rose
Approved on	Aug 2, 2010

Clear Blu

Designer's Comments

Layout Code

Layout Comments

Layout Details

Layout Colors

Layout Tags

Layout Tools

Layout Affiliates