illuminated
<!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>Illuminated | Free Web Template by WebTemplateOcean.com</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<style type='text/css'>
/*
designed by WebTemplateOcean.com (http://www.webtemplateocean.com/)
released under Creative Commons Attribution-ShareAlike 3.0 license
*/
* {
margin: 0;
padding: 0;
}
body {
padding-bottom: 20px;
font: 81.25% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #C7D8E8;
background: #272B46;
}
h1 {
padding-top: 30px;
width: 390px;
font-weight: normal;
font-size: 38px;
line-height: 52px;
text-align: center;
color: #F6F6DE;
}
h1 a, h1 a:hover {
text-decoration: none;
font-weight: normal;
color: #F6F6DE;
}
p {
padding: 8px 0;
line-height: 1.4em;
text-align: justify;
}
a {
font-weight: bold;
text-decoration: none;
color: #FBB172;
}
a:hover {
text-decoration: underline;
}
ul {
list-style: none;
}
/* page */
#page {
position: relative;
margin: 0 auto;
width: 950px;
}
#header {
height: 112px;
background: url(images/header.jpg) no-repeat bottom left;
}
/* menu */
#menu {
position: absolute;
top: 30px;
left: 390px;
width: 560px;
height: 52px;
background: #1B2024 url(images/menu.jpg) no-repeat;
}
#menu ul {
list-style: none;
padding: 11px 0;
}
#menu ul li {
margin: 0 0 0 11px;
padding: 0;
display: block;
float: left;
}
#menu ul li a {
display: block;
float: left;
width: 126px;
height: 30px;
margin: 0;
padding: 0;
font-weight: normal;
font-size: 20px;
line-height: 28px;
text-align: center;
text-decoration: none;
color: #FCFFFF;
}
#menu ul li a.active, #menu ul li a:hover {
text-decoration: none;
color: #5E5839;
background: #F5E6A0 url(images/menuover.gif) no-repeat;
}
/* intro */
#intro {
height: 320px;
padding-left: 390px;
background: #B0D9F9 url(images/intro.jpg) no-repeat;
}
#intro h2 {
padding: 40px 0 10px 0;
font-weight: normal;
font-size: 36px;
color: #272B46;
}
#intro p {
padding-right: 50px;
font-size: 16px;
line-height: 21px;
color: #6570B6;
}
a.button {
display: block;
width: 180px;
height: 50px;
margin: 25px 0 0 120px;
font-weight: normal;
font-size: 20px;
line-height: 44px;
text-align: center;
text-decoration: none;
color: White;
background: url(images/button.gif) no-repeat;
}
/* main */
#main {
background: #4C5070 url(images/main.gif) repeat-y;
}
/* sidebar */
#sidebar {
float: left;
width: 244px;
padding: 25px 30px 30px 30px;
background: url(images/sidebar.jpg) no-repeat;
}
#sidebar h2 {
font-weight: normal;
font-size: 24px;
color: #6791B8;
}
#sidebar ul {
padding: 16px 0;
}
#sidebar ul li {
padding: 3px 0;
}
#sidebar ul li a {
display: block;
padding: 0 0 0 18px;
font-weight: normal;
line-height: 1.4em;
text-decoration: none;
color: #EB8400;
background: url(images/li.gif) no-repeat 0 3px;
}
#sidebar ul li a:hover {
text-decoration: none;
color: #6791B8;
}
#sidebar .box {
padding: 8px 0;
}
#sidebar p {
color: #70748D;
}
/* content */
#content {
float: right;
width: 566px;
padding: 20px 40px 20px 40px;
background: url(images/content.jpg) no-repeat;
}
.post {
padding-bottom: 20px;
}
#content h2 {
font-weight: normal;
font-size: 28px;
color: #98B8D5;
}
#content h2 a, #content h2 a:hover {
font-weight: normal;
text-decoration: none;
color: #98B8D5;
}
.postmeta {
padding-top: 30px;
font-size: .923em;
font-weight: bold;
color: White;
}
.entry {
}
#content ul {
padding: 8px 0;
}
#content ul li {
padding: 0 0 0 18px;
line-height: 1.4em;
text-align: justify;
background: url(images/li2.gif) no-repeat 0 3px;
}
#content img {
float: right;
display: block;
margin: 0 0 10px 40px;
border: 4px solid #585C7B;
}
.clearing {
clear: both;
height: 1px;
overflow: hidden;
}
/* footer */
#footer {
clear: both;
background: url(images/footer.gif) repeat-y;
}
#clearingfooter {
clear: both;
height: 2px;
overflow: hidden;
background: url(images/footer2.gif) no-repeat;
}
#footerleft {
float: left;
width: 244px;
padding: 30px;
background: #AECAE0;
}
#footerleft p {
text-align: center;
color: #646883;
}
#footerright {
float: right;
width: 566px;
padding: 30px 40px;
background: #727992;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<h1><a href="#">Illuminated</a></h1>
<div id="menu">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="intro">
<h2>Welcome to Illuminated!</h2>
<p>In sed lacinia nulla. Proin velit libero, vulputate ac hendrerit ut, tempus quis nulla. Fusce rhoncus velit odio, sed adipiscing ipsum. Aliquam purus felis, accumsan a consectetur quis, posuere fringilla leo. Ut pharetra neque eget nisi tristique et feugiat libero lacinia. Aenean sed lectus massa, quis congue arcu.</p> <a href="#" class="button">Enter</a> </div>
<div id="main">
<div id="sidebar">
<h2>Integer rhoncus</h2>
<ul>
<li><a href="#">Cum sociis natoque penatibus</a></li>
<li><a href="#">Nascetur ridiculus mus</a></li>
<li><a href="#">Aenean rutrum tortor a purus</a></li>
<li><a href="#">Etiam convallis enim tincidunt erat dapibus tincidunt</a></li>
<li><a href="#">Magnis dis parturient montes</a></li>
<li><a href="#">Nulla aliquam dui</a></li>
<li><a href="#">Quisque convallis nisl ac augue</a></li>
<li><a href="#">Class aptent taciti sociosqu ad litora torquent per conubia nostra</a></li>
<li><a href="#">Proin lobortis nisi nec nisi</a></li>
</ul>
<h2>Quisque luctus</h2>
<ul>
<li><a href="#">Fusce laoreet, ligula et rhoncus volutpat</a></li>
<li><a href="#">Adipiscing gravida pulvinar eget justo</a></li>
<li><a href="#">Cras consectetur commodo scelerisque</a></li>
<li><a href="#">Vulputate aliquam ipsum dictum id</a></li>
<li><a href="#">Vestibulum imperdiet accumsan leo a aliquet</a></li>
</ul>
<h2>Mauris sagittis</h2>
<div class="box">
<p>Mauris sollicitudin tincidunt magna vitae semper. Curabitur ut pharetra quam. Integer rhoncus convallis urna vitae mattis.</p>
<p>Aenean nec dui quis urna sollicitudin sodales. Fusce laoreet, ligula et rhoncus volutpat, felis magna varius tortor, ac molestie diam lorem in lectus.</p>
</div>
</div><!-- sidebar -->
<div id="content">
<div class="post">
<h2><a href="#">Terms of Use</a></h2>
<p class="postmeta">Posted in <a href="#">Class apent</a> | Feb 08, 2011 | <a href="#">4 comments</a></p>
<div class="entry"><img src="images/image2.jpg" alt="" />
<p>The template is released under <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution</a> license. So you are free to use it for personal or commercial purposes, modify it or redistribute as long as you keep the link back to WebTemplateOcean.com in the footer.</p>
<p>Under no circumstances can you use the template for websites with illegal or immoral (even if legal) content. This includes, but is not limited to pornography, obscenity, homosexuality, abortion, violence, drugs, gambling.</p>
<p>The template contains public domain images from <a href="http://www.publicdomainpictures.net/">PublicDomainPictures.net</a> and <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>. Although public domain pictures are free and with no obligation to credit their authors you should keep in mind that in some cases they may infringe trademark, property or any other rights of others. Therefore, it is you who has to decide whether to use the image, especially if your website will be a commercial one... <a href="#">more</a></p>
</div>
</div>
<div class="post">
<h2><a href="#">Lorem ipsum dolor sit amet</a></h2>
<p class="postmeta">Posted in <a href="#">Class apent</a> | Feb 10, 2011 | <a href="#">6 comments</a></p>
<div class="entry"><img src="images/image3.jpg" alt="" />
<p>Quisque congue lacus sed odio fermentum tincidunt. Proin vitae nulla velit. Cras consectetur commodo scelerisque. Curabitur leo nisl, blandit at tempus et, interdum at risus.</p>
<ul>
<li>Cum sociis natoque</li>
<li>Penatibus et magnis dis parturient montes</li>
<li>Nascetur ridiculus mus</li>
<li>Etiam convallis enim tincidunt erat dapibus tincidunt</li>
<li>Class aptent taciti sociosqu</li>
<li>Morbi mattis fermentum lectus</li>
</ul>
<p>Sed dui augue, pellentesque ac pulvinar id, malesuada eget diam. Integer elementum sem eget tortor faucibus id pellentesque lorem dignissim... <a href="#">more</a></p>
</div>
</div>
</div><!-- content -->
<div class="clearing"> </div>
</div><!-- main -->
<div id="footer">
<div id="footerleft">
<p>Online: 7 viewers</p>
</div>
<div id="footerright">
<p>Copyright © 2011, designed by <a href="http://www.webtemplateocean.com/">WebTemplateOcean.com</a></p>
</div>
<div id="clearingfooter"> </div>
</div><!-- footer -->
</div><!-- page -->
</body>
</html>
Related examples in the same category