Skyvalley
<!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>Skyvalley</title>
<style type='text/css'>
/* CSS RESET */
html {
color:#000;
background:#222222;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal;
}
li {
list-style:none;
}
caption, th {
text-align:left;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
q:before, q:after {
content:'';
}
abbr, acronym {
border:0;
font-variant:normal;
}
sup {
vertical-align:text-top;
}
sub {
vertical-align:text-bottom;
}
input, textarea, select {
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}
legend {
color:#000;
}
body {
font:13px/1.231 arial, helvetica, clean, sans-serif;
}
table {
font-size:inherit;
font-size:100%;
}
pre, code, kbd, samp, tt {
font-family:monospace;
line-height:100%;
}
/* CSS RESET */
body {
text-align:center;
color:#000;
}
a {
text-decoration:none;
color:#D8D800
}
a:hover {
text-decoration: underline;
color: #CC0000
}
#bg {
background: url(Skyvalley-images/bg.jpg) no-repeat;
width:1028px;
margin:0px auto;
height:768px;
position:relative;
}
#wrap {
width:710px;
text-align:left;
background:#fff;
margin:0px auto;
}
#b {
padding-top: 30px;
}
.fl {
float:left
}
.fr {
float:right
}
.clearfix {
clear:both
}
#header {
margin:0px auto;
margin-bottom:35px
}
/* header */
#header {
position:relative;
height:189px;
background:url(Skyvalley-images/hd.jpg) repeat-x bottom;
width:696px
}
#nav {
position:absolute;
top:151px;
right:10px;
width:421px;
height:35px;
line-height:35px;
}
#nav li {
float:left;
font-weight:700;
width:100px
}
#nav a {
text-decoration:none;
display:block;
text-align:center;
}
#nav a:hover {
color:#000000;
background:#D8D800
}
/* content */
#content {
margin:0 auto;
}
.main {
width:440px;
font-family:Verdana, Arial, Helvetica, sans-serif;
background:url(Skyvalley-images/box.gif);
color:#000;
margin-left:40px
}
.text {
margin-bottom:20px
}
.text p {
margin:0 auto;
width:420px;
}
.text h2 {
font-size:20px;
padding:8px 0 20px 5px;
background:url(Skyvalley-images/t.gif) repeat-x;
color:#4f4f1d
}
.text img {
margin:50px 0 0 65px
}
#col {
margin:0 0 10px 0;
width:300px;
background:url(Skyvalley-images/m.jpg);
width: 879px;
height:104px;
}
#col div {
width: 220px;
margin: 20px 0 0 70px;
display:inline
}
#col .first {
margin: 20px 0 0 50px
}
#col li {
line-height:20px;
}
.side {
width:170px;
display: inline;
margin-right:30px
}
.side h2 {
font-size:22px
}
.side li {
line-height:24px;
color:#000;
padding:0 0 0 5px
}
li.grey {
background: url(Skyvalley-images/s.jpg)
}
.side ul {
margin:20px 0 30px 0px
}
.side li a {
color:#d0aa6d
}
/* footer */
#footer {
height:65px;
position:relative;
background:url(Skyvalley-images/ft.jpg) repeat-x;
width:690px;
margin:0px auto;
color:#D8D800
}
#ftinner {
position:absolute;
bottom:20px;
margin-left:20px;
}
.ftlink {
width:500px;
}
</style>
</head>
<body>
<div id="bg">
<div id="b">
<div id="wrap">
<div id="header">
<ul id="nav">
<li ><a href="#">HOME</a></li>
<li ><a href="#">PORTOFOLIO</a></li>
<li ><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<!-- /header -->
<div id="content">
<div class="side fr">
<div id="bm">
<h2><img src="Skyvalley-images/menu.jpg" alt="Extra Menu" /></h2>
<ul class="meun">
<li class="grey"><a href="#">Vestibulum bibendum</a></li>
<li><a href="#">Maecenas egestas</a></li>
<li class="grey"><a href="#">volutpat ante</a></li>
<li><a href="#">Curabitur rhoncus</a></li>
<li class="grey"><a href="#">Nulla fringilla</a></li>
<li><a href="#">Integer euismod</a></li>
<li class="grey"><a href="#">Aenean viverra</a></li>
</ul>
</div>
</div>
<div class="main fl">
<div class="text">
<h2>Free CSS Templates</h2>
<p> Skyvalley is a CSS template that is free and fully standards compliant. Free CSS Templates designed this template. <br/>
<br/>
This template is allowed for all uses, including commercial use, as it is released under the Creative Commons Attributions 2.5 license. The only stipulation to the use of this free template is that the links appearing in the footer remain intact. Beyond that, simply enjoy and have fun with it!</p>
</div>
<div class="text">
<h2>Our Services</h2>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis porttitor odio. Etiam lacinia viverra ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin tincidunt. Aliquam eros eros, imperdiet vitae, volutpat id, semper sed, lorem. Praesent ullamcorper quam eget dolor. Suspendisse potenti. Proin et nunc ac metus adipiscing pretium. Phasellus eu erat. Curabitur nisl tortor, ornare nec, dictum at, vehicula eu, arcu. Ut nec est. Sed rutrum lacinia nisl. Duis at tellus. Quisque dignissim sodales odio. Quisque quam. Pellentesque tortor. Proin dictum.</p>
</div>
</div>
<!-- /content -->
</div>
<div class="clearfix"></div>
<div id="footer">
<div id="ftinner">
<div class="ftlink fl">
<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>
</div>
<!-- /footer -->
</div>
</div>
</div>
</body>
</html>
Related examples in the same category