snowy
<!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>snowy</title>
<style type='text/css'>
body {
text-align:center;
}
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
#bg { background:url(snowy-images/bg.jpg);
margin:0 auto;
width:939px;
height:1100px;
}
#wrap {
width:789px;
text-align:left;
margin:0 auto;
position: relative;
top:90px;
}
#logo {
position: absolute;
top:20px;
color:#fff;
padding-left:100px
}
#logo h1 {
font-size:34px;
}
#logo div {
padding-left:100px;
color:#85c471
}
#nav {background:url(snowy-images/nav.jpg) repeat-x; height:31px; }
#nav li{display: inline; border-right:#FFFFFF 1px solid; padding:0 30px; line-height:30px}
#nav li a{color:#FFFFFF}
.float-l{ float:left}
.folat-r{ float:right}
.clearfix{ clear:both}
/* header */
#header { background:url(snowy-images/hd.jpg); height:122px }
/* content */
#content {height: 780px;}
.left {background:url(snowy-images/side.jpg) no-repeat; height:764px}
.left ul { width:200px; margin:0 0 0 40px}
.left ul li {border-bottom: #1e3a07 1px solid; line-height:30px; width:180px}
.left li a {color:#1e3a07}
.right {width:520px}
.right p{width:500px; margin-bottom:10px}
.right img {padding:5px}
.right h2 {font-size:34px; padding:20px 0}
/* footer */
#footer { clear:both; color:#fff}
#footer a{color:#fff}
#xhtml{float:right}
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="bg">
<div id="logo">
<h1>snowy</h1>
<div>short slogan here</div>
</div>
<div id="wrap">
<div id="nav">
<ul >
<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>
<div id="header"> </div>
<!-- /header -->
<div id="content">
<div class="left float-l">
<ul>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Nunc euismod eleifend sem.</a></li>
<li><a href="#">Praesent ullamcorper </a></li>
<li><a href="#">Nullam pellentesque elit.</a></li>
<li><a href="#">Donec euismod mollis velit.</a></li>
<li><a href="#">Vestibulum bibendum tellus.</a></li>
<li><a href="#">Maecenas egestas sapien ac .</a></li>
<li><a href="#">Nam volutpat ante.</a></li>
<li><a href="#">Curabitur rhoncus leo in nisi.</a></li>
<li><a href="#">Nulla fringilla eros at sem.</a></li>
<li><a href="#">Integer euismod id est.</a></li>
<li><a href="#">Aenean viverra mi eu justo.</a></li>
<li><a href="#">In adipiscing lorem.</a></li>
<li><a href="#">Curabitur blandit velit.</a></li>
<li><a href="#">Quisque egestas et est.</a></li>
<li><a href="#">Aliquam aliquam mi quis nisl.</a></li>
<li><a href="#"> ornare non dolor.</a></li>
<li><a href="#">Aenean lectus vel tellus.</a></li>
<li><a href="#">Duis rhoncus dolor.</a></li>
</ul>
</div>
<div class="right folat-r">
<h2>Free CSS Templates</h2>
<p>This is snowy, 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 youre 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>
<p> Lorem Ipsum is not simply random text. It has roots in a piece of classical McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the Extremes of Good and Evil) by Cicero, written in 45 BC. </p>
<img src="snowy-images/1.jpg" alt="" /> <img src="snowy-images/2.jpg" alt="" /> <img src="snowy-images/3.jpg" alt="" /> <img src="snowy-images/4.jpg" alt="" /> <br/>
<img src="snowy-images/5.jpg" alt="" /> <img src="snowy-images/6.jpg" alt="" /> <img src="snowy-images/7.jpg" alt="" /> <img src="snowy-images/8.jpg" alt="" /><br/>
<img src="snowy-images/9.jpg" alt="" /> <img src="snowy-images/10.jpg" alt="" /> <img src="snowy-images/11.jpg" alt="" /> <img src="snowy-images/12.jpg" alt="" /> </div>
</div>
<!-- /content -->
<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"><img src="snowy-images/xhtml.jpg" alt=" xhtml valid" /> <img src="snowy-images/css.jpg" alt="css valid" /></div>
</div>
<!-- /footer -->
</div>
</div>
</body>
</html>
Related examples in the same category