light-blue
<!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>free CSS website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com
*/
body {
margin: 0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.5em;
color: #444444;
background: #000000;
}
a:link, a:visited { color: #83bb0a; text-decoration: none; font-weight: bold;}
a:active, a:hover { color: #83bb0a; text-decoration: none; font-weight: bold; }
h1 {
margin:0px 0px 10px 0px;
padding-bottom: 8px;
font-weight: bold;
font-size: 18px;
color:#05cce1;
}
h2 {
margin:0px 0px 10px 0px;
font-weight: bold;
font-size: 14px;
color:#fff;
height: 26px;
width: 366px;
padding-top: 3px;
padding-left: 25px;
background: url(light-blue-images/h2.jpg) no-repeat;
}
h3 {
margin:0px 0px 0px 0px;
padding-top: 15px;
padding-left: 15px;
font-weight: bold;
font-size: 12px;
width: 227px;
height: 52px;
color:#fff;
background: url(light-blue-images/box.jpg) no-repeat;
}
#container {
margin: auto;
width: 800px;
}
#header {
margin: auto;
width: 800px;
height: 171px;
color: #fff;
background: url(light-blue-images/header.jpg) no-repeat;
}
#header_upper {
float: left;
padding-left: 180px ;
padding-top: 50px;
width: 500px;
height: 40px;
line-height: normal;
font-size: 24px;
font-weight: bold;
}
#header_lower {
float: left;
padding-left: 180px ;
width: 300px;
height: 50px;
}
#header_lower span {
font-weight: bold;
}
.menu {
margin: auto;
width: 800px;
height: 49px;
background: url(light-blue-images/menu.jpg) no-repeat;
color: #FFFFFF;
font-weight: bold;
}
.menu ul {
margin: 0px;
list-style: none;
padding-left: 100px;
}
.menu li {
display: inline;
}
.menu li a{
float: left;
padding: 10px 0px;
width: 98px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
}
.menu li a:hover, .menu li .current{
color: #000;
background: url(light-blue-images/hover.jpg) no-repeat;
}
#content {
float: left;
width: 800px;
background: url(light-blue-images/pg_bg.jpg) repeat-y;
}
#top {
width: 800px;
height: 32px;
}
#left {
margin: 0px;
float: left;
margin-left: 80px;
width: 380px;
text-align: justify;
}
#left img {
float: left;
padding-right: 10px;
}
#right {
float: right;
width: 230px;
margin-right: 80px;
text-align: justify;
}
#right p {
padding-left: 15px;
margin-top: 5px;
}
#footer {
float: left;
width: 800px;
height: 32px;
text-align: center;
font-size: 12px;
font-weight: bold;
padding-top: 40px;
background: url(light-blue-images/footer.jpg) no-repeat;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="header_upper">Free CSS Website</div>
<div id="header_lower"><span>YOUR COMPANY SLOGAN TEXT GOES HERE</span><br />
You are free to modify this layout to suit your tastes in any way you prefer.</div>
</div>
<div class="menu">
<ul>
<li><a href="http://www.free-css.com/" class="current">Main Page</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Projects</a></li>
<li><a href="http://www.free-css.com/">Exhibitions</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
</ul>
</div>
<div id="top"><img src="light-blue-images/top.jpg" alt="" width="800" height="32" /></div>
<div id="content">
<div id="left">
<h1>WELCOME TO OUR WEBSITE</h1>
<p>This is a free CSS website provided by TemplateMo.com. You may use this template for your websites. Credit goes to PDPhoto.org for photos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt. Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum. Pellentesque vitae magna. Sed nec est. Suspendisse a nibh tristique justo rhoncus volutpat.</p>
<h2>ABOUT US</h2>
<p>Quisque in diam a justo condimentum molestie. Vivamus a velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur quis velit quis tortor tincidunt aliquet. Vivamus leo velit, convallis id, ultrices sit amet, tempor a, libero. Quisque rhoncus nulla quis sem. Mauris quis nulla sed ipsum pretium sagittis. Suspendisse feugiat. Ut sodales libero ut odio.</p>
<h2>OUR SERVICES</h2>
<p><img src="light-blue-images/photo.jpg" alt="" width="144" height="98" />Maecenas venenatis metus eu est. In sed risus ac felis varius bibendum. Nulla imperdiet congue metus. Vestibulum dapibus tortor vel orci. Maecenas vulputate, arcu id fermentum eleifend, tortor enim tincidunt mauris, fringilla tincidunt purus urna vel risus. Fusce vulputate tellus ac felis. Praesent mauris. Quisque gravida faucibus ligula. Aliquam magna. Phasellus id felis.</p>
<p>Aliquam tristique lacus in sapien. Suspendisse potenti. Ut sed pede. Nullam vitae tellus. Sed ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur velit tellus, placerat et, dapibus varius, aliquet quis, purus.</p>
<p><a target="_blank" href="http://validator.w3.org/check?uri=referer"><img height="31" alt="" src="http://www.w3.org/Icons/valid-xhtml10" width="88" vspace="8" border="0" /></a><a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"><img alt="" src="http://jigsaw.w3.org/css-validator/light-blue-images/vcss-blue" vspace="8" border="0" /></a></p>
</div>
<div id="right">
<h1>EXHIBITIONS</h1>
<p><img src="light-blue-images/bird.jpg" alt="" width="195" height="94" /></p>
<p>Suspendisse vitae neque eget ante tristique vestibulum. Pellentesque dolor nulla, congue vitae, fringilla in, varius a, orci. Mauris convallis. Proin vel libero id erat venenatis accumsan. Nunc blandit orci sit amet risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h3>LATEST NEWS & EVENTS</h3>
<p><strong>Post Date: 21-10-2010<br />
</strong> Nulla enim nibh, consectetuer sed, vestibulum elementum, sagittis nec, diam. Mauris blandit vehicula neque. Proin consectetuer. Donec venenatis. Cras urna metus, feugiat non, consectetuer quis, pretium quis, nunc.</p>
<h3>QUICK CONTACT</h3>
<p>Tel: 000-100-1000<br />
Fax: 000-300-3000<br />
Mobile: 000-200-2000<br />
Email: info[at]templatemo.com</p>
</div>
</div>
<div id="footer">Copyright Company Name Designed by <a href="http://www.templatemo.com">TemplateMo.com</a></div>
</div>
</body>
</html>
Related examples in the same category