thesite
<!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>TheSite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
margin: 0;
padding: 0;
line-height: 1.5em;
letter-spacing: 1px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #333;
background: #d7c88e url(thesite-images/body.jpg) repeat-x top;
}
a:link, a:visited { color: #dd0034; text-decoration: none; font-weight: normal;}
a:active, a:hover { color: #dd0034; text-decoration: underline;}
p { margin: 0px; padding: 0px; }
img { margin: 0px; padding: 0px; border: none; }
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }
.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }
.button a{
clear: both;
display: block;
width: 86px;
height: 22px;
padding: 4px 0 0 0;
font-size: 12px;
text-align: center;
text-decoration: none;
color: #f8e392;
background: url(thesite-images/button_hover.png) no-repeat;
}
.button a:hover {
color: #d20030;
background: url(thesite-images/button.png) no-repeat;
}
#wrapper {
width: 980px;
margin: 0 auto;
}
#left_column {
float: left;
width: 250px;
}
#left_column #site_title {
width: 200px;
height: 156px;
padding: 50px 0 0 50px;
margin-bottom: 20px;
background: url(thesite-images/site_title.png) repeat;
}
#site_title #site_title h1 {
margin: 0;
padding: 0;
}
#site_title h1 a{
margin: 0px;
padding: 0px;
font-size: 30px;
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
#site_title h1 a:hover {
font-weight: bold;
text-decoration: none;
}
#site_title h1 a span {
display: block;
font-size: 14px;
color: #C30;
font-weight: normal;
margin-top: 10px;
letter-spacing: 2px;
background: url(thesite-images/site_header_under.png) no-repeat top center;
}
#left_column #sidebar {
clear: both;
padding-left: 30px;
}
#sidebar .service_section {
clear: both;
padding-bottom: 20px;
margin-bottom: 15px;
border-bottom: 1px dotted #333;
}
.service_list {
margin: 0;
padding: 0;
list-style: none;
}
.service_list li {
padding: 0;
margin: 0;
}
.service_list li a {
display: block;
color: #201f1c;
padding: 5px 0 7px 20px;
background:url(thesite-images/list.png) no-repeat center left;
}
.service_list li a:hover {
color: #C30;
text-decoration: none;
}
.news_section {
clear: both;
}
.news_box {
clear: both;
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #999;
}
.news_box h3 {
padding: 2px 0;
margin: 0;
}
.news_box h3 a {
font-size: 12px;
font-weight: bold;
color: #e04034;
}
#right_column {
float: right;
width: 670px;
margin-right: 30px;
padding-top: 70px;
}
#right_column p {
text-align: justify;
}
/* menu */
#menu {
clear: both;
width: 670px;
height: 44px;
background: url(thesite-images/menu.png) no-repeat bottom;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
padding: 0;
margin: 0;
display: inline;
}
#menu ul li a{
float: left;
display: block;
width: 94px;
height: 35px;
padding: 7px 0 0 0;
margin-right: 5px;
text-align: center;
font-size: 13px;
text-decoration: none;
color: #ffffff;
font-weight: normal;
outline: none;
}
#menu li a:hover, #menu li .current{
color: #C30;
background: url(thesite-images/menu_hover.png) repeat;
}
#content_wrapper {
clear: both;
background: url(thesite-images/content.jpg) repeat-y;
}
#content {
padding: 30px 40px;
background: url(thesite-images/content_top.jpg) no-repeat top;
}
#content_bottom {
width: 670px;
height: 5px;
background: url(thesite-images/content_bottom.png) no-repeat;
}
#content h2 {
color: #d0002f;
}
#content .fl_img {
float: left;
margin: 3px 15px 0 0;
}
#content p {
clear: both;
margin-bottom: 20px;
}
#content .em_text {
color: #e4672f;
}
#content .latest_work_gallery {
padding: 0;
margin: 0;
list-style: none;
}
.latest_work_gallery li {
padding: 0;
margin: 0;
display: inline;
}
.latest_work_gallery li a{
display: block;
float: left;
width: 120px;
height: 120px;
margin: 0 14px 14px 0;
border: 5px solid #d7c88e;
padding: 0;
}
/* end of menu */
/* footer */
#footer_wrapper {
clear: both;
width: 100%;
background: #6e643d url(thesite-images/footer.jpg) top repeat-x;
}
#footer {
width: 970px;
padding: 60px 10px 30px 10px;
margin: 0 auto;
text-align: center;
color: #aea68c;
}
#footer a {
color: #ffffff;
}
#footer .footer_menu {
margin: 0 0 10px 0;
padding: 0px;
list-style: none;
}
.footer_menu li {
margin: 0px;
padding: 0 20px;
display: inline;
border-right: 1px solid #aea68c;
}
.footer_menu li a {
color: #ffffff;
}
.footer_menu .last_menu {
border: none;
}
/* end of footer */
</style>
</head>
<body>
<div id="wrapper">
<div id="left_column">
<div id="site_title">
<h1><a href="#"> <img src="thesite-images/logo.png" alt="" /> <span>free css templates</span> </a></h1>
</div>
<!-- end of site_title -->
<div id="sidebar">
<div class="service_section">
<h2>Services</h2>
<ul class="service_list">
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Phasellus eget lorem</a></li>
<li><a href="#">Sed sit amet sem</a></li>
<li><a href="#">Cras eget est vel</a></li>
<li><a href="#">Quisque in ligula</a></li>
<li><a href="#">Donec a massa dui</a></li>
<li><a href="#">Aenean facilisis</a></li>
</ul>
</div>
<div class="news_section">
<h2>Our News</h2>
<div class="news_box">
<h3><a href="#">Lorem ipsum dolor sit amet consectetur </a></h3>
<p>Maecenas tellus erat, dictum vel semper a, dapibus ac elit. Nunc rutrum pretium porta.</p>
</div>
<div class="news_box">
<h3><a href="#">Cras eget est vel magna gravida lacinia habitasse platea </a></h3>
<p>Cras eget est vel magna gravida lacinia. In hac habitasse platea dictumst. Quisque in ligula lectus, non faucibus purus.</p>
</div>
<div class="cleaner_h20"></div>
<div class="button"><a href="#">Read all</a></div>
</div>
</div>
</div>
<!-- end of left column -->
<div id="right_column">
<div id="menu">
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Flash Files</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- end of menu -->
<div id="content_wrapper">
<div id="content">
<h2>Free CSS Templates</h2>
<p><a href="#">Free CSS Templates</a> are provided by <a href="#">TemplateMo.com</a> website for everyone. You may download, edit and apply this template for your websites. Credits go to <a href="#">brushthis.com</a> for pattern and <a href="#">Free Photos</a> for photos.</p>
<p><img class="fl_img" src="thesite-images/image_02.jpg" alt="" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Nulla aliquet</a>, ipsum bibendum pretium volutpat, diam magna facilisis ante, at lobortis nisl purus ac ipsum. Mauris purus augue, <a href="#">ullamcorper</a> ac pharetra et, varius vitae sapien. Duis sed purus rutrum purus ultrices <a href="#">condimentum</a>.Nulla aliquet, ipsum bibendum pretium volutpat, diam magna facilisis ante, at lobortis nisl purus ac ipsum. Mauris purus augue, ullamcorper ac <a href="#">pharetra</a> et, varius vitae sapien.</p>
<div class="cleaner_h20"></div>
<h2> Popular Web Templates</h2>
<p class="em_text">Suspendisse adipiscing, mauris at pretium tincidunt, dui ligula venenatis odio, nec ultricies sapien felis in libero.</p>
<p>Vivamus ut ante. Suspendisse rutrum ipsum est, sed iaculis.Mauris dictum leo quis lacus venenatis at semper quam laoreet. Donec molestie libero id arcu laoreet ac consectetur enim blandit. Nulla ut nunc lorem, at porttitor nunc.</p>
<ul class="latest_work_gallery">
<li><a href="#"><img src="thesite-images/image_03.jpg" alt="" /></a></li>
<li><a href="#"><img src="thesite-images/image_04.jpg" alt="" /></a></li>
<li><a href="#"><img src="thesite-images/image_05.jpg" alt="" /></a></li>
<li><a href="#"><img src="thesite-images/image_06.jpg" alt="" /></a></li>
</ul>
<div class="button"><a href="#">Read more</a></div>
</div>
</div>
<!-- end of content_wrapper -->
<div id="content_bottom"></div>
</div>
</div>
<!-- end of wrapper -->
<div id="footer_wrapper">
<div id="footer">
<ul class="footer_menu">
<li><a href="#">Home</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Flash Files</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Gallery</a></li>
<li class="last_menu"><a href="#">Contact Us</a></li>
</ul>
Copyright © 2048 <a href="#">Your Company Name</a> | Designed by <a href="#">CSS Templates</a></div>
<!-- end of footer -->
</div>
<!-- end of footer_wrapper -->
</body>
</html>
Related examples in the same category