Village
<!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>Village</title>
<style type='text/css'>
body {
text-align:center;
}
a {
text-decoration:none;
color:#000
}
a:hover {
text-decoration: underline;
}
#bg {
background:url(Village-images/bg.jpg);
margin:0 auto;
width:900px;
height:900px;
}
#wrap {
width:800px;
text-align:left;
margin:0 auto;
position: relative;
top:50px;
}
.float-l {
float:left
}
.float-r {
float:right
}
.left {
width:233px;
background:#E7ECEF;
height:780px
}
.right {
width:567px;
height:780px;
background:#fff;
}
#logo {
background:url(Village-images/hdr.jpg);
height:210px
}
#logo h1 {
font-size:34px;
color:#223802;
}
#logo h1 {
padding: 70px 0 0 100px;
}
#logo div {
padding-left:150px
}
ul#nav {
background:url(Village-images/hdl.jpg);
height:176px;
padding:50px 50px 0 50px
}
ul#nav li {
line-height:1.9em;
border-bottom:#fff 1px solid;
}
ul#nav li a {
color:#FFFFFF
}
#meun h2 {
font-size:24px;
padding:30px 0 0 40px
}
#meun ul {
padding:10px 50px 0 50px
}
#meun li {
line-height:1.9em;
border-bottom:#88bcbc 1px solid;
list-style: inside disc;
color:#336666
}
#meun li a {
color:#336666
}
#main h2 {
font-size:36px;
color:#669900;
padding: 50px 50px 0 50px;
}
#main p {
padding: 20px 50px 0 50px;
}
/* footer */
#footer {
clear:both;
height:60px
}
#footer a {color:#FFFFFF}
#footer {
color: #fff;
left: 20px;
position:relative;
top:10px
}
#xhtml {
position: absolute;
left:550px
}
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="bg">
<div id="wrap">
<div class="float-l left">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Production</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="meun">
<h2>Sections</h2>
<ul>
<li><a href="#">Latin literature </a></li>
<li><a href="#">making over years </a></li>
<li><a href="#">Richard Clintock </a></li>
<li><a href="#">Latin professor </a></li>
<li><a href="#">Hampden Sydney </a></li>
</ul>
</div>
</div>
<div class="float-r right">
<div id="logo">
<h1>Village</h1>
<div>short slogan here</div>
</div>
<div id="main"><img src="Village-images/img.jpg" alt="" />
<h2>Free CSS Templates</h2>
<p>This is Village, a free, fully standards-compliant CSS template designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>.
This free template is released under a Creative Commons Attributions 2.5 license, so you?re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) </p>
</div>
</div>
<div id="footer">
<div class="float-l">
<div id="ftlink"> <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Production</a> | <a href="#">Submission</a> | <a href="#">Contact</a> </div>
<p id="copyright"> 2008. All Rights Reserved. <br/>
<a href="http://www.templatesold.com/" target="_blank">Website Templates</a> by <a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a></p>
</div>
<div id="xhtml" class="float-r"><img src="Village-images/xhtml.jpg" alt=" xhtml valid" /> <img src="Village-images/css.jpg" alt="css valid" /></div>
</div>
<!-- /footer -->
</div>
</div>
</body>
</html>
Related examples in the same category