Blue 1
<!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>CSS / Free Template</title>
<style type='text/css'>
@charset "UTF-8";
* {
margin:0;
padding:0;
}
body {
font-size:11px;
color:#666666;
background-color: #FFFFFF;
background-image: url(Blue-images/bg-body.jpg);
background-repeat: repeat-x;
background-position: center top;
font-family: Georgia, "Times New Roman", Times, serif;
}
#sidebarbody {
clear:right;
}
#wrapper {
width:810px;
margin:0 auto;
padding:15px 10px 0 10px;
}
#header {
height:140px;
padding-top:10px;
}
img {
border:0;
}
a {
text-decoration:none;
color:#FFFFFF;
}
a:hover {
text-decoration:none;
color:#CCCCCC;
}
p {
line-height:1.8em;
margin-bottom:1.2em;
color: #666666;
}
h1 {
font-weight:bold;
font-size:24px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#1B7C8F;
padding-top: 15px;
padding-right: 0;
padding-bottom: 3px;
padding-left: 0;
}
h1 a {
color: #FFFFFF;
background-color: #00CCFF;
}
h2 {
font-size: 14px;
color: #1992AD;
}
.heading2 {
float:left;
font-size:16px;
margin:5px 0 10px 0;
padding:2px 0 4px 0;
font-family: Georgia, "Times New Roman", Times, serif;
}
h4 {
padding:8px;
border-bottom:1px dashed #888;
font-size:11px;
font-weight:bold;
text-transform:uppercase;
color:#1B7C8F;
background-color: #FFFFFF;
}
#menu {
float:right;
height:30px;
line-height:30px;
}
#content {
float:left;
width:500px;
padding:10px;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
margin-bottom: 15px;
}
.type {
font-size:12px;
margin:0 0 10px 0;
padding:0 0 10px 0;
}
#menu ul {
list-style-type:none;
font-family: Georgia, "Times New Roman", Times, serif;
}
#menu li {
float:left;
}
#menu li a {
display:block;
font-weight:bold;
padding:0 10px;
margin-right:1px;
color:#ffffff;
background-color: #1B7C8F;
}
#menu li a:hover {
float:left;
display:block;
font-weight:bold;
padding:0 10px;
color:#FFFFFF;
background-color: #17A4C2;
}
#sidebar {
float:right;
width:260px;
padding:8px;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
}
#sidebar ul {
list-style-type:none;
margin-bottom:20px;
}
#sidebar li a {
display:block;
padding:6px;
border-bottom:1px solid #5C6362;
color:#666666;
}
#sidebar li a:hover {
display:block;
padding:6px;
border-bottom:1px solid #999;
background:#a3e5fb;
color:#1A7E95;
}
#footer {
text-align:center;
font-size:10px;
clear:both;
background-color: #CCCCCC;
margin-top: 20px;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0;
color: #8B8884;
font-weight: normal;
}
#footer a {
font-weight:normal;
border-bottom:1px dashed #ccc;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #787478;
}
#footer a:hover {
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<a href="index.html"><img src="Blue-images/csslogo.gif" alt="Free Website Template Downloads.co.uk" /></a>
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
</ul>
</div>
<div id="sidebarbody">
<div id="sidebar">
<h4>Services</h4>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
</ul>
</div>
<div id="content">
<div class="type">
<h1>Heading 1...</h1>
<br> </br>
<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. 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>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="heading2">
<h2>Sub Heading</h2>
</div>
<br style="clear:both;" />
<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. 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="footer">
<p><a href="#">Home</a> | <a href="#">Page 1</a> | <a href="#">Page 2</a> |
<a href="#">Page 3</a> | <a href="#">Page 4</a> | <a href="#">Contact Us</a><br />
<span class="smallertext">© Copyright 2008 - Your Web-site - All Rights Reserved -
<!--Please Do Not Remove This Section of The Template It must remain unchanged if you wish to use our free template -->
<a href="http://www.crearedesign.co.uk/" target="_blank">Web Design</a> &
<a href="http://www.freewebsitetemplatedownloads.co.uk/" target="_blank">Free Web Templates</a></span>
<!-- End Of Links -->
<br />
<a href="http://validator.w3.org/check?uri=referer" target="_blank">W3C Compliant XHTML</a> -
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">W3C Compliant CSS</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category