springsawakening
<!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>Springs Awakening</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
margin: 0px;
padding: 0px;
background-image: url(springsawakening-images/backtop.jpg);
background-repeat: repeat-x;
background-position: center 70px;
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #979797;
}
#header {
height: 200px;
width: 740px;
font-family: "calligraph421 BT", "bodoni MT", sans-serif;
margin-right: auto;
margin-left: auto;
}
#header h1 {
margin: 0px;
padding: 0px;
color: #008b81;
}
#wrapper {
height: 975px;
width: 766px;
margin-right: auto;
margin-left: auto;
background-image: url(springsawakening-images/top.jpg);
background-repeat: no-repeat;
margin-top: 9px;
padding-top: 20px;
background-position: center top;
}
#content {
width: 766px;
height: 710px;
background-image: url(springsawakening-images/content.jpg);
background-repeat: repeat-y;
}
#footer {
background-image: url(springsawakening-images/footer.jpg);
height: 65px;
width: 766px;
text-align: center;
font-size: 12px;
padding-top: 45px;
background-repeat: no-repeat;
}
#footer p {
}
#footer a {
text-decoration: none;
color: #660099;
}
#footer a:hover {
text-decoration: underline;
}
#logo {
height: 89px;
width: 174px;
top: 83px;
position: absolute;
left: 6px;
}
span#white {
color: #FFFFFF;
}
#topnav {
width: 425px;
height: 40px;
float: right;
}
#topnav ul {
height: 126px;
width: 425px;
list-style-image: none;
list-style-type: none;
margin-top: 0px;
float: right;
}
#topnav ul li {
height: 126px;
width: 85px;
float: left;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
}
#topnav ul li a {
display: block;
text-align: center;
height: 24px;
width: 100px;
line-height: 14px;
text-decoration: none;
color: #FFFFFF;
font-family: "Comic Sans MS", Arial, serif;
font-size: 15px;
float: left;
padding-top: 105px;
}
#topnav ul li a:hover {
color: #660099;
background-color: #FFFFFF;
}
#topnav ul li a.active {
color: #008B81;
background-color: #FFFFFF;
}
#maincontent {
width: 500px;
float: right;
margin-right: 10px;
height: 700px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #660099;
margin-bottom: 5px;
}
a {
color: #660099;
}
#creativecommons {
visibility: hidden;
}
#links ul {
list-style-type: none;
padding: 0px;
width: 200px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #660099;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#links ul li {
list-style-type: none;
}
#links ul li a {
text-decoration: none;
color: #660099;
display: block;
height: 20px;
margin-top: 4px;
}
#links ul li a:hover {
text-decoration: none;
background-color: #EBEBEB;
}
#links ul li a.active {
color: #008B98;
}
h1, h2, h3{
color: #660099;
margin-top: 10px;
}
#menu {
float: left;
width: 200px;
margin-left: 10px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #660099;
height: 350px;
}
#links {
height: 280px;
width: 200px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Spring's Awakening </h1>
<div id="topnav">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a class="active" href="http://www.free-css.com/">Active</a></li>
<li><a href="http://www.free-css.com/">Link 3</a></li>
<li><a href="http://www.free-css.com/">Link 4</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="maincontent">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eget lorem. Sed libero lectus, consectetuer id, hendrerit vel, ullamcorper tincidunt, nisl. Sed faucibus consectetuer ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse potenti. Donec augue nulla, mattis id, faucibus ac, pharetra sed, massa. In hac habitasse platea dictumst. Aliquam massa urna, porttitor sed, adipiscing vel,<img src="springsawakening-images/imageplace.jpg" alt="Some Image" width="179" height="145" hspace="2" vspace="5" align="left" /> placerat vitae, mi. Integer ac lectus vitae tellus dictum adipiscing. Quisque semper diam vel orci. Vivamus nulla est, mollis euismod, nonummy consectetuer, ultricies id, ligula. Duis eleifend, nulla vel aliquam aliquam, enim sapien semper lacus, nec tempus augue arcu pulvinar dui. Ut varius. In mollis ante. Duis dui. Nunc aliquam. Donec at lacus nec neque rutrum viverra. </p>
<p>Ut tortor turpis, ultrices eget, aliquet a, mollis id, turpis. Phasellus auctor, mi vel placerat convallis, elit velit aliquam diam, id mollis metus ante eu libero. Nullam vulputate quam sit amet justo. Sed ac nulla. Fusce diam sapien, vestibulum at, mattis vel, molestie non, odio. Donec dapibus varius sem. Donec enim odio, sollicitudin nec, faucibus sed, ultrices ut, quam. Fusce tempus orci. Proin ac sapien vitae sem eleifend convallis. Mauris aliquet nisl et nisi. Pellentesque non justo. Sed ante. Aliquam erat volutpat. Integer eget est a nulla volutpat vehicula. </p>
<p>Quisque tincidunt, ante vel dignissim porta, justo ligula sagittis quam, id suscipit arcu lectus at felis. Vestibulum sollicitudin. Aenean ornare sem id velit. In iaculis, ante id dictum suscipit, purus ante hendrerit orci, sed accumsan risus metus vitae est. Nulla facilisi. Curabitur ut orci. In hac habitasse platea dictumst. Morbi sollicitudin ultrices dui. Mauris id metus sed turpis ultricies rhoncus. Cras tortor. Pellentesque ornare augue sed ante. Donec in odio a enim bibendum fermentum. Vestibulum tempor pharetra mauris. Fusce vestibulum consectetuer est. Suspendisse potenti.</p>
<div id="creativecommons"><a rel="license" href="http://creativecommons.org/licenses/by-nd/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nd/3.0/88x31.png" /></a> <br />
This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nd/3.0/">Creative Commons Attribution-No Derivative Works 3.0 License</a>.</div>
<p> </p>
</div>
<div id="menu">
<h2>Go To... </h2>
<div id="links">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a class="active" href="http://www.free-css.com/">Active</a></li>
<li><a href="http://www.free-css.com/">Link 3</a></li>
<li><a href="http://www.free-css.com/">Link 4 </a></li>
</ul>
<ul>
<li><a href="http://www.free-css.com/">Connor Mckelvey</a></li>
<li><a href="http://www.free-css.com/">Con(A)rtist Designs</a></li>
</ul>
</div>
</div>
</div>
<div id="footer"> Property Of Connor Mckelvey of <a href="http://www.connorm.gknu.com">Con(A)rtist Designs</a> © 2007</div>
</div>
</body>
</html>
Related examples in the same category