Green_Glass
<!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" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type='text/css'>
@charset "utf-8";
/* CSS Document */
*
{
margin: 0;
padding: 0;
}
body
{
background-image:url(Green_Glass-images/bg.png);
background-position:top;
background-repeat:repeat-x;
background-color:#008080;
}
a:link
{
color:#004040;
text-decoration:none;
}
a:visited
{
color:#004040;
text-decoration:inherit;
}
a:hover, a:active
{
text-decoration:underline;
}
#container
{
width:784px;
margin: 0 auto;
position: relative;
}
#header
{
color:#FFFFFF;
font-family:"Times New Roman", Times, serif;
}
#header h1
{
margin:20px 0 0 15px;
font-size:36px;
text-align:center;
}
#menu
{
margin:15px 0 35px 0;
}
#menu a
{
width:87px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
display:inline-block;
width:75px;
}
#menu a:hover, #menu a:active
{
text-decoration:underline;
}
#menu.current a
{
color:#ff6600;
}
#center
{
float:left;
width:569px;
}
.feature
{
margin:5px 5px 10px 10px;
width:549px;
}
.topspacer
{
height:15px;
background-image:url(Green_Glass-images/top.png);
}
.post
{
background-image:url(Green_Glass-images/post.png);
padding:0 15px 20px 15px;
}
.post img
{
background-color:#008080;
padding:3px;
border:1px solid;
border-color:#004040;
margin:3px;
}
.date
{
float:right;
}
.post h2
{
color:#FFFFFF;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
}
.post hr
{
margin:2px 0 5px 0;
border-color:#004040;
border-style:none none dotted;
}
.post img
{
margin:5px;
}
.post p
{
color:#FFFFFF;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
line-height:20px;
}
.post ul
{
list-style-type:none;
list-style-position:inside;
color:#FFFFFF;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12pt;
font-weight:bold;
margin:0 0 5px 30px;
}
.post ol
{
list-style-position:inside;
color:#FFFFFF;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12pt;
font-weight:bold;
margin:0 0 5px 30px;
}
.lowspacer
{
height:15px;
background-image:url(Green_Glass-images/low.png);
}
.blockquote
{
margin:10px 60px 10px 60px;
font-style:italic;
}
.blockquote p
{
padding-left:10px;
}
.blockquote hr
{
margin-left:10px;
}
.quotopen
{
float:left;
width:40px;
height:27px;
background-image:url(Green_Glass-images/quotopen.png);
background-position:top left;
background-repeat:no-repeat;
}
.quotcont
{
width:316px;
margin:0 0 0 40px;
}
.code
{
margin:10px 60px 10px 60px;
}
.code p
{
padding:0 10px 0 10px;
margin:0;
font-family:"Courier New", Courier, monospace;
font-size:14px;
color:#FEFEFE;
}
.codeopen
{
float:left;
width:40px;
height:27px;
background-image:url(Green_Glass-images/code.png);
background-position:top left;
background-repeat:no-repeat;
}
.codecont
{
width:316px;
margin:0 0 0 40px;
}
.notice
{
margin:10px 100px 10px 100px;
border-color:#336699;
border-style:solid;
border-width:2px;
}
.notice p
{
padding:5px 10px 5px 10px;
}
.warning
{
margin:10px 100px 10px 100px;
border-color:#FF6600;
border-style:solid;
border-width:2px;
font-weight:bold;
}
.warning p
{
padding:5px 10px 5px 10px;
}
#right
{
padding: 5px 10px 0px 5px;
float:right;
width:200px;
font-family:Arial, Helvetica, sans-serif;
color:#004040;
}
#right h3
{
line-height:40px;
color:#004040;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
}
#right ul li
{
list-style-type:none;
}
#right strong
{
}
#right p
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
line-height:16px;
padding-bottom:10px;
color:#FFFFFF;
}
#right a:link, #right a:visited, #right a:hover, #right a:active
{
color:#FFFFFF;
display:inline;
line-height:20px;
font-size:14px;
}
#rtop
{
height:15px;
background-image:url(Green_Glass-images/rtop.png);
}
#rcont
{
background-image:url(Green_Glass-images/post.png);
padding:0 15px 0 15px;
}
#rlow
{
height:15px;
background-image:url(Green_Glass-images/rlow.png);
}
#footer
{
float:left;
width:774px;
margin:10px 0 0 0;
padding-left:10px;
color:#FFFFFF;
line-height:20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#footer a:link, #footer a:visited
{
color:#004040;
text-decoration:none;
}
#footer a:hover, #footer a:active
{
text-decoration:underline;
}
#ftop
{
height:15px;
background-image:url(Green_Glass-images/ftop.png);
}
#fcont
{
background-image:url(Green_Glass-images/post.png);
height:60px;
padding:0 15px 0 15px;
}
#flow
{
height:15px;
background-image:url(Green_Glass-images/flow.png);
}
</style>
<title>Green Glass</title>
</head>
<body>
<div id="container">
<div align="center" id="header">
<h1>Green Glass</h1>
<div id="menu">
<a href="#">Home</a> |
<a href="#">Blog</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</div>
</div>
<div id="center">
<div class="feature">
<div class="topspacer"></div>
<div class="post">
<p class="date">July 8, 2008</p>
<h2><a href="#">Post Title</a></h2>
<hr />
<p align="justify"><img align="left" alt="" src="Green_Glass-images/image1.jpg" width="200" height="115" />An open-source blog-like template using trans- parent backgrounds to give it a glass effect. Design inspired by <a href="http://chasethebase.deviantart.com/art/Wordpress-Theme-2-85478456" target="_blank">Chasethebase</a>. Template licensed under <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">Creative Commons 3.0</a>, fell free to use, modify and redistribute it as long as you leave a link back to my page. Any criticism is welcome. Image courtesy by <a href="http://commons.wikimedia.org/" target="_blank">Wikimedia Commons</a>.</p>
<div class="blockquote">
<div class="quotopen"></div>
<div class="quotcont">
<p>Aenean vitae odio vel odio placerat hendrerit. Suspendisse lacus lacus, tempor id, pharetra eget, ornare sit amet, pede. Sed aliquet, justo ac elementum.</p>
</div>
</div>
<hr />
<p style="float:left">Posted in: <a href="#">Single Column</a> · Tags: <a href="#">blog</a>, <a href="#">green</a>, <a href="#">wordpress</a></p>
<p style="float:right"><a href="#">Read More</a> · <a href="#">0 Comments</a></p>
</div>
<div class="lowspacer"></div>
</div>
<div class="feature">
<div class="topspacer"></div>
<div class="post">
<p class="date">July 8, 2008</p>
<h2><a href="#">Post Title</a></h2>
<hr />
<p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id est tincidunt nisl pellentesque tincidunt. Donec in mauris. Mauris neque magna, consectetuer id, malesuada vitae, tincidunt sit amet, mi. Aliquam lacinia. Suspendisse potenti.</p>
<div class="code">
<div class="codeopen"></div>
<div class="codecont">
<p><?php</p>
<p>echo "This is a .code block";</p>
<p>?></p>
</div>
</div>
<p>Proin justo lorem, rutrum ac, facilisis in, malesuada sed, ligula. Mauris lobortis lacus at nibh. Aenean vitae odio vel odio placerat hendrerit. Suspendisse lacus lacus, tempor id, pharetra eget, ornare sit amet, pede.</p>
<hr />
<p style="float:left">Posted in: <a href="#">Single Column</a> · Tags: <a href="#">blog</a>, <a href="#">green</a>, <a href="#">wordpress</a></p>
<p style="float:right"><a href="#">Read More</a> · <a href="#">0 Comments</a></p>
</div>
<div class="lowspacer"></div>
</div>
<div class="feature">
<div class="topspacer"></div>
<div class="post">
<p class="date">July 8, 2008</p>
<h2><a href="#">Post Title</a></h2>
<hr />
<p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id est tincidunt nisl pellentesque tincidunt. Donec in mauris. Mauris neque magna, consectetuer id, malesuada vitae, tincidunt sit amet, mi. Aliquam lacinia. Suspendisse potenti.</p>
<ul>
<li>» list item</li>
<li>» list item</li>
<li>» list item</li>
<li>» list item</li>
<li>» list item</li>
</ul>
<p>Proin justo lorem, rutrum ac, facilisis in, malesuada sed, ligula. Mauris lobortis lacus at nibh. Aenean vitae odio vel odio placerat hendrerit. Suspendisse lacus lacus, tempor id, pharetra eget, ornare sit amet, pede.</p>
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
<p>Sed aliquet, justo ac elementum pretium, arcu leo placerat est, a luctus purus diam eget arcu. Nam augue diam, mollis a, scelerisque eget, aliquet condimentum, pede. Vestibulum tristique lectus sed augue.</p>
<hr />
<p style="float:left">Posted in: <a href="#">Single Column</a> · Tags: <a href="#">blog</a>, <a href="#">green</a>, <a href="#">wordpress</a></p>
<p style="float:right"><a href="#">Read More</a> · <a href="#">0 Comments</a></p>
</div>
<div class="lowspacer"></div>
</div>
</div>
<div id="right">
<div id="rtop"></div>
<div id="rcont">
<h3>Search</h3>
<form method="get" id="searchbox" action="index.html">
<input style="margin:0px" type="text" id="search" value="" />
<input type="image" src="Green_Glass-images/arrow.png" align="top" />
</form>
<h3>Avatar</h3>
<p align="center"><img alt="" src="Green_Glass-images/avatar.png" width="79" height="77" /></p>
<h3>Categories</h3>
<ul>
<li><strong><a href="#">Single Column</a></strong> (5)</li>
<li><strong><a href="#">Two Columns</a></strong> (4)</li>
<li><strong><a href="#">Three Columns</a></strong> (7)</li>
</ul>
<h3>Latest Posts</h3>
<ul>
<li><strong><a href="#">Post Title</a></strong></li>
<li><strong><a href="#">Post Title</a></strong></li>
<li><strong><a href="#">Post Title</a></strong></li>
<li><strong><a href="#">Post Title</a></strong></li>
<li><strong><a href="#">Post Title</a></strong></li>
</ul>
<h3>Archives</h3>
<ul>
<li><strong><a href="#">June 2008</a></strong></li>
<li><strong><a href="#">May 2008</a></strong></li>
<li><strong><a href="#">April 2008</a></strong></li>
<li><strong><a href="#">March 2008</a></strong></li>
<li><strong><a href="#">February 2008</a></strong></li>
<li><strong><a href="#">January 2008</a></strong></li>
</ul>
<h3>Blogroll</h3>
<ul>
<li><strong><a href="#">Blog Name</a></strong></li>
<li><strong><a href="#">Blog Name</a></strong></li>
<li><strong><a href="#">Blog Name</a></strong></li>
<li><strong><a href="#">Blog Name</a></strong></li>
<li><strong><a href="#">Blog Name</a></strong></li>
</ul>
</div>
<div id="rlow"></div>
</div>
<div id="footer">
<div id="ftop"></div>
<div id="fcont">
<p align="center">
<a href="#">Home</a> ·
<a href="#">Blog</a> ·
<a href="#">About</a> ·
<a href="#">Contact</a>
</p>
<p>© 2008 Company Name</p>
<p style="margin-bottom:30px;width:554px;float:left">Designed by <a href="http://crossfadesign.xhost.ro/" target="_blank">Crossfade Design</a> · Released under a <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">Creative Commons 3.0 Licence</a></p>
<p style="float:right;width:180x">Valid <a href="http://validator.w3.org/check?uri=referer" target="_blank"><abbr title="eXtensible Hypertext Markup Language">XHTML</abbr></a> · <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank"><abbr title="Cascading Style Sheet">CSS</abbr></a></p>
</div>
<div id="flow"></div>
</div>
</div>
</body>
</html>
Related examples in the same category