cleo-studio
<!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>
<title>Cleo Studio</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
background-color:#f1f0f1;
margin:0px;
padding:0px;
font: 12px verdana, arial, helvetica;
color: #777c7c;
}
p{
margin:0px;
padding:0 0 5px 0;
line-height:17px;
text-align:justify;
}
p.tab{
padding:10px 0 10px 0;
font-size:11px;
}
h1{
color:#be52ae;
font-size:12px;
font-weight:bold;
margin:0px;
padding:5px 0 5px 0;
}
h2{
color:#a3659a;
font-size:14px;
font-weight:bold;
margin:0px;
padding:10px 0 10px 0;
}
#main_container{
width:894px;
height:auto;
margin:auto;
background-color:#f1f0f1;
}
#header{
width:894px;
height:91px;
margin:auto;
}
#logo{
padding:20px 0 0 0;
float:left;
}
/*----------------------menu-------------------------*/
#menu{
width:460px;
height:24px;
float:right;
padding:45px 0 0 0;
}
#menu ul{
list-style:none;padding:0px;margin:0px;display:block; font-weight:bold;
}
#menu ul li.divider{
height:24px;width:19px;background:url(cleo-studio-images/menu_divider.gif) no-repeat center; float:left; display:block; padding:8px 0 0 0;
}
#menu ul li{
list-style:none;display:inline;float:left;width:auto;height:24px;padding:0px;line-height:32px; font-family:Arial, Helvetica, sans-serif; font-size:14px;
}
#menu ul li a{
height:24px; width: auto;float:left;text-decoration:none;padding:0 8px 0 8px; margin:0px;color:#9d8f9b;text-align:center;
}
#menu ul li a:hover{
height:24px;width: auto;text-decoration:none;color: #857283;
}
#menu ul li a.current{
height:24px;width: auto;float:left;text-decoration:none;padding:0 8px 0 8px;color: #857283;
}
#middle_box{
width:894px;
height:278px;
clear:both;
margin:auto;
background:url(cleo-studio-images/middle_banner.gif) no-repeat center;
}
.title{
height:26px;
font-size:16px;
font-weight:bold;
padding:5px 0 0 35px;
color:#877685;
background:url(cleo-studio-images/news_icon.gif) no-repeat left;
background-position:0px 0px;
}
a.read_more {
width:150px;
height:27px;
display:block;
background:url(cleo-studio-images/view_all_bg.gif) no-repeat center;
line-height:27px;
color:#428fb8;
font-size:11px;
font-weight:bold;
text-decoration:none;
text-align:center;
float:right;
margin:15px 0 15px 0;
}
/*---------------------main_content------------------*/
#main_content{
width:894px;
height: auto;
margin: auto;
padding:0 0 0 10px 0;
}
.left_content{
width:480px;
height:auto;
float:left;
padding:10px 10px 15px 0;
}
.right_content{
width:390px;
height:auto;
float:left;
padding:10px 0 0 10px;
}
.news_tab{
padding:10px 0 5px 0;
margin:0px;
text-align:justify;
line-height:14px;
border-bottom:1px #b2bbbb dashed;
}
.news_details{
padding:5px 0 0 0;
text-align:right;
font-size:11px;
font-weight:bold;
}
span.date{
color:#be52ae;
}
span.user{
color:#599093;
}
.clear{
clear:both;
}
/*--------------acordion style---------------*/
#basic-accordian{
padding:0px;
width:478px;
height:500px;
}
.accordion_headings{
width:468px;
height:26px;
padding:10px 0 0 10px;
background:url(cleo-studio-images/tab_bg.gif) no-repeat center;
color:#8c7589;
cursor:pointer;
font-weight:bold;
margin:0 0 4px 0;
}
.accordion_headings:hover{
color:#4b2e47;
}
.accordion_child{
padding:0px;
}
.header_highlight{
color:#4b2e47;
}
/*-----------------------------footer------------------*/
#footer{
width:894px;
height:28px;
color: #508aa1;
border-top:1px #b2bbbb dashed;
}
.copyright{
float:left;
padding-left:15px;
padding-top:7px;
}
.footer_links{
float:right;
padding-right:15px;
padding-top:7px;
}
</style>
<script type="text/javascript" src="js.js"></script>
</head>
<body onload="new Accordian('basic-accordian',5,'header_highlight');">
<div id="main_container">
<div id="header">
<div id="logo"><a href="http://www.free-css.com/"><img src="cleo-studio-images/logo.gif" alt="" border="0" /></a></div>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/" class="current">home</a></li>
<li class="divider"></li>
<li><a href="http://www.free-css.com/">webdesign</a></li>
<li class="divider"></li>
<li><a href="http://www.free-css.com/">identity</a></li>
<li class="divider"></li>
<li><a href="http://www.free-css.com/">print</a></li>
<li class="divider"></li>
<li><a href="http://www.free-css.com/">contact</a></li>
</ul>
</div>
</div>
<div id="middle_box"> </div>
<div id="main_content">
<div class="left_content">
<div id="basic-accordian">
<div id="test-header" class="accordion_headings header_highlight" >featured projects</div>
<div id="test-content">
<div class="accordion_child">
<h2>Project name</h2>
<img src="cleo-studio-images/project.gif" alt="" />
<p class="tab"> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
</div>
</div>
<div id="test1-header" class="accordion_headings" >our clients</div>
<div id="test1-content">
<div class="accordion_child">
<h2>our clients</h2>
<p class="tab"> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
<p class="tab"> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
</div>
</div>
<div id="test2-header" class="accordion_headings" >main services</div>
<div id="test2-content">
<div class="accordion_child">
<h2>main services</h2>
<p class="tab"> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
<p class="tab"> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
</div>
</div>
</div>
</div>
<div class="right_content">
<div class="title">Latest news</div>
<div class="news_tab">
<h1>Ut enim ad minim veniam</h1>
<p> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
<div class="news_details"><span class="date">13.02.2008</span> <span class="user">by admin</span></div>
</div>
<div class="news_tab">
<h1>Ut enim ad minim veniam</h1>
<p> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
<div class="news_details"><span class="date">13.02.2008</span> <span class="user">by admin</span></div>
</div>
<div class="news_tab">
<h1>Ut enim ad minim veniam</h1>
<p> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
<div class="news_details"><span class="date">13.02.2008</span> <span class="user">by admin</span></div>
</div>
<a href="http://www.free-css.com/" class="read_more">view all news</a> </div>
<div class="clear"></div>
</div>
<div id="footer">
<div class="copyright"> <img src="cleo-studio-images/footer_logo.gif" alt="" /> </div>
<div class="footer_links"> <a href="http://csstemplatesmarket.com"><img src="cleo-studio-images/csstemplatesmarket.gif" alt="" border="0" /></a> </div>
</div>
</div>
</body>
</html>
Related examples in the same category