Website templates

greenery/css/screen.css

@@ -0,0 +1,387 @@
+/***************************************************
+     AUTHOR: Pat Heard ( FullAhead.org )
+   TEMPLATE: Greenery
+       DATE: 2005.11.30
+  COPYRIGHT: none
+ ***************************************************/
+
+
+/***************************************************
+   HTML Element Styles
+ ***************************************************/
+
+body {
+  margin: 0;  
+  text-align: center;
+  font: 0.62em verdana, arial, sans-serif;  
+  line-height: 170%;
+  color: #EEE;
+  background: #585858 url(../images/bg_body.jpg) repeat-y top center;
+}
+
+p { 
+  padding-top: 10px !important;
+  padding-top: 3px;
+  padding-bottom: 10px !important;
+  padding-bottom: 3px;
+}
+
+
+a {
+  color: #86E160;
+}
+
+a:visited {
+  color: #AAA;
+}
+
+a:hover {
+  color: #FFF;
+}
+
+acronym {
+  cursor: help;
+  border-bottom: 1px solid #777;
+}
+
+input {
+  width: 70%;
+}
+
+textarea {
+  width: 98%;
+  /* 
+    IE specific to eliminate scroll bar when not needed. 
+    Uncomment if wanted, but it is not valid CSS
+     
+  scrollbar-3dlight-color : #777;
+  scrollbar-arrow-color : #EEE;
+  scrollbar-darkshadow-color : #777;
+  scrollbar-face-color : #777;
+  scrollbar-highlight-color : #777;
+  scrollbar-shadow-color : #777;
+  scrollbar-track-color : #777;    
+  */
+}
+
+input,
+textarea {
+  padding: 1px 3px;
+  margin: 5px 0;
+  font: 1em verdana, arial, sans-serif;
+  color: #EEE;
+  background-color: #777;
+  border: 1px solid #999;
+}
+
+input:hover,
+input:focus,
+textarea:hover,
+textarea:focus {
+  color: #FFF;
+  background-color: #999;
+  border: 1px solid #EEE;
+}
+
+
+h1 {
+  clear: both;
+  margin: 10px 0;
+  font: 700 1em verdana, sans-serif;
+  text-transform: uppercase;
+  color: #7BD32C;
+  background: #686868 url(../images/rounded_tr.gif) no-repeat top right;
+}
+
+h1 span {
+  display: block;
+  padding: 2px;
+  background: url(../images/rounded_br.gif) no-repeat bottom right;
+}
+
+#sideBar h1 {
+  text-align: right;
+  background: #686868 url(../images/rounded_tl.gif) no-repeat top left;
+}
+
+#sideBar h1 span {
+  display: block;
+  padding: 2px;
+  background: url(../images/rounded_bl.gif) no-repeat bottom left;
+}
+
+
+#content ol li { 
+  color: #9BE4FF;
+}
+
+#content ol li span {
+  color: #EEE;
+}
+
+#content ul {
+  padding-bottom: 10px;
+}
+
+#content ul li {
+  list-style-image: url(../images/li_bullet.gif);
+}
+
+blockquote {  
+  margin: 0;
+  background: #686868 url(../images/rounded_tr.gif) no-repeat top right;
+} 
+
+blockquote span {
+  display: block;
+  padding: 5px;
+  background: url(../images/rounded_br.gif) no-repeat bottom right;
+}
+
+/***************************************************
+  Layout Element Styles
+ ***************************************************/
+
+
+#header {  
+  width: 100%;
+  height: 3em;
+  background: #585858 url(../images/bg_header.jpg) repeat-y top center;  
+}
+
+/***************************************************
+  Header Menu
+ ***************************************************/
+
+#menu {
+  width: 767px;
+  margin: 0 auto;
+  text-align: left;  
+}
+
+#menu ul {
+  margin: 0;
+  padding: 0;
+  line-height: normal;  
+}
+
+#menu ul li {
+  width: 8em;
+  display: inline;
+  float: left;
+  padding-top: 0.8em;  
+  list-style: none;
+  text-align: center;
+}
+
+#menu ul li a {
+  display: block;
+  text-decoration: none;
+  text-transform: uppercase;
+  padding-bottom: 1.0em;
+  color: #222;
+}
+
+#menu ul li a:hover,
+#menu ul li a.active {
+  font-weight: bold;
+  color: #111;
+  background: url(../images/menu_tab.gif) no-repeat bottom center;
+}
+
+
+/***************************************************
+  Site Title
+ ***************************************************/
+
+#title {
+  padding: 0.6em 55px 0.6em 0;
+  margin-right: 0.5em;
+  float: right;
+  background: url(../images/logo_greenery.gif) no-repeat top right;
+}
+
+#title h1 {
+  display: inline;
+  color:  #222;
+  background-color: #86E160;
+  background-image: none;
+}
+
+
+/***************************************************
+ Page Content
+ ---------------------------------------------------
+ 1. Left side text
+ 2. Dropdown image
+ 3. Right side bar 
+ ***************************************************/
+
+
+#content {  
+  clear: both;
+  width: 767px;
+  margin: 0 auto;
+  text-align: left;
+}
+
+#text {
+  float: left;
+  width: 410px !important;
+  width: 437px;
+  padding: 10px 5px 20px 20px !important;
+  padding: 20px 5px 20px 20px;
+}
+
+#image {
+  float: left;
+  width: 170px;  
+  vertical-align: top;
+}
+
+#sideBar {
+  float: right;
+  width: 145px !important;
+  width: 160px;
+  padding: 10px 15px 20px 0 !important;
+  padding: 20px 15px 20px 0;
+}
+
+
+/***************************************************
+ Sidemenu Styles
+ ***************************************************/
+
+.sideMenu {
+  padding: 10px 0;
+}
+
+.sideMenu a {
+  display: block;
+  text-align: right;
+  text-decoration: none;
+  margin-bottom: 1px;  
+}
+
+.sideMenu a span {
+  display: block;
+  padding: 1px;
+}
+
+.sideMenu a:hover {
+  background: #686868 url(../images/rounded_tl.gif) no-repeat top left;
+}
+
+.sideMenu a:hover span {
+  background: url(../images/rounded_bl.gif) no-repeat bottom left;
+}
+
+/***************************************************
+ Comment Styles
+ ***************************************************/
+
+#comments p {
+  padding: 0 5px;
+  margin-bottom: 0;
+  background: #686868 url(../images/rounded_tl.gif) no-repeat top left;
+}
+
+#comments p span.author {
+  display: block;
+  margin-top: 5px;
+  text-align: right;
+  font-weight: 700;
+}
+
+#comments img {
+  margin-top: -1px;
+}
+
+#comments a {
+  color: #7BD32C;
+}
+
+#comments a:visited {
+  color: #AAA;
+}
+
+#comments a:hover {
+  color: #FFF;
+}
+
+/***************************************************
+ Footer
+ ***************************************************/
+
+#footer {
+  clear: both;
+  float: left;
+  width: 500px;
+  padding: 10px 20px;
+  color: #888;
+}
+
+#footer p {
+  padding-top: 0 !important;
+  padding-top: 10px;
+}
+
+#footer a {
+  color: #888;
+}
+
+#footer a:hover {
+  color: #EEE;
+}
+
+a.fullAhead {
+  float: left;
+  width: 30px;
+  height: 34px;  
+  margin-right: 10px;
+  background: url(../images/logo_fullahead.gif) no-repeat 0 0;
+}
+
+a:hover.fullAhead  {
+  background-position: -30px 0;
+}
+
+
+/***************************************************
+ Generic Display Classes
+ ***************************************************/
+
+.center {
+  text-align: center;
+}
+
+.noPad {
+  padding: 0;
+  margin: 0;
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}
+
+img.left {
+  padding: 5px 5px 5px 0;
+}
+
+img.right {
+  padding: 5px 0 5px 5px;
+}
+
+.button {
+  width: auto;
+  cursor: pointer;
+}
+
+.date {
+  display: block;
+  font-weight: 700;
+}

greenery/index.html

@@ -0,0 +1,144 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<!--
+ ____________________________________________________________
+|                                                            |
+|    DESIGN + Pat Heard { http://fullahead.org }             |
+|      DATE + 2005.11.30                                     |
+| COPYRIGHT + Free use if this notice is left in place       |
+|____________________________________________________________|
+
+-->
+
+<head>
+
+
+  <title>{ Greenery } Open Web Design</title>
+
+  <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
+  <meta name="author" content="fullahead.org" />
+  <meta name="keywords" content="Open Web Design, OWD, Free Web Template, Greenery, Fullahead" />
+  <meta name="description" content="A free web template designed by Fullahead.org and hosted on OpenWebDesign.org" />
+  <meta name="robots" content="index, follow, noarchive" />
+  <meta name="googlebot" content="noarchive" />
+
+  <link rel="stylesheet" type="text/css" href="css/screen.css" media="screen, print" />
+
+</head>
+
+
+<body>
+
+  <div id="header">
+
+    <div id="menu">
+
+      <ul>
+        <li><a href="index.html" title="learn about the site" class="active">About</a></li>
+        <li><a href="http://openwebdesign.org" title="free web templates">Download</a></li>
+        <li><a href="index.html" title="get help" style="width: 8.7em;">Support</a></li>
+        <li><a href="index.html" title="view photos">Photos</a></li>
+        <li><a href="http://fullahead.org/contact.html" title="contact FullAhead" style="width: 7em;">Contact</a></li>
+      </ul>
+
+      <div id="title">
+        <h1>Greenery</h1>
+      </div>
+
+    </div>
+
+  </div>
+
+  <div id="content">
+
+    <div id="text">
+
+      <h1><span>Greenish Template</span></h1>
+
+      <p>
+        This template is tableless <acronym title="eXtensible Hypertext Markup Language">XHTML</acronym>/<acronym title="Cascading Style Sheet">CSS</acronym> that validates as 1.1 strict.  It uses relative widths so that it handles browser font <acronym title="CTRL + Mousewheel">+/-</acronym> without any troubles.  The vertical plant image is easy to switch for one of your own, as is the accent colour.  To change the green header, you'll need to update these two images:
+      </p>
+
+      <ul>
+        <li><b>bg_header.jpg</b>: the top, tiling, header background.</li>
+        <li><b>menu_tab.gif</b>: the menu tab that comes up onmouseover.</li>
+      </ul>
+
+      <h1><span>Features</span></h1>
+
+      <p>
+        Included in the template are styles for a right side <a href="menu.html" title="view submenu version">news &amp; submenu section</a> or a comments section (shown in this version).  The code is <acronym title="coded as the markup was designed to be used">semantically</acronym> written so it's clean and easy to modify.  The CSS is coded so that elements derive their style from their context, rather than classes.  This adds to the readability of the source.
+      </p>
+
+      <p>
+        The plant photo was taken by <a href="http://sxc.hu/browse.phtml?f=profile&amp;l=icefront" title="view sxc.hu portfolio">icefront</a> and has no usage restrictions.  The repeating pattern is from <a href="http://squidfingers.com/" title="visit squidfingers.com/">squidfingers</a> and is also free use, but I'm sure both of them would appreciate a link back.  The rest was created by me and is open source.  If you use any of it, I'd appreciate credit, but it isn't required.
+      </p>
+
+      <h1><span>Winter Blues</span></h1>
+    <p> This template was started on the day it began snowing....it's going to 
+      be a long 6 months before I see this colour again. If you do end up finding 
+      a use for the template, send me a <a href="http://fullahead.org/contact.html" title="FullAhead contact form">message</a>. 
+      It's always interesting to see my templates in action. </p>
+    <p>
+<!--This theme is free for distriubtion,  so long as  link to openwebdesing.org and florida-villa.com  stay on the theme-->
+Courtesy  <a href="http://www.openwebdesign.org" target="_blank">Open Web 
+      Design</a><a href="http://www.dubaiapartments.biz" target="_blank"><img src="spacer.gif" width="5" height="5" border="0"/></a>Thanks 
+      to <a href="http://www.florida-villa.com" target="_blank">Florida Vacation Homes</a> </p>
+
+    </div>
+
+    <div id="image"><img src="images/plants.jpg" alt="plants"/></div>
+
+    <div id="sideBar">
+
+      <h1><span>Comments</span></h1>
+
+      <div id="comments">
+
+        <p>
+          This would be some comment text.  Thrilling.
+          <span class="author"><a href="http://fullahead.org">Pat</a>, Nov 23rd</span>
+        </p>
+        <img src="images/comment_bg.gif" alt="comment bottom"/>
+
+        <p>
+	      Goodness, more comment text?  That's crazy talk...
+	      <span class="author"><a href="http://openwebdesign.org/userinfo.phtml?user=snop">snop</a>, Nov 24th</span>
+        </p>
+        <img src="images/comment_bg.gif" alt="comment bottom"/>
+
+        <p>
+          Comments are hawt, but if you wanted a submenu, you could <a href="menu.html" title="menu version">look here</a>.
+          <span class="author"><a href="http://google.com">Bort</a>, Nov 29th</span>
+        </p>
+        <img src="images/comment_bg.gif" alt="comment bottom"/>
+
+      </div>
+
+
+      <h1><span>Your Turn</span></h1>
+
+
+      <p>
+        <input type="text" value="Name"/>
+        <input type="text" value="URL"/>
+        <textarea rows="5" cols="">Comment</textarea>
+        <input type="submit" value="Submit" class="button" />
+      </p>
+
+
+    </div>
+
+    <div id="footer">
+      <a href="http://fullahead.org" title="designed by fullahead.org" class="fullAhead"></a>
+      <p>Valid <a href="http://validator.w3.org/check?uri=referer" title="validate XHTML">XHTML</a> &amp; <a href="http://jigsaw.w3.org/css-validator" title="validate CSS">CSS</a></p>
+    </div>
+
+  </div>
+
+</body>
+
+</html>

greenery/menu.html

@@ -0,0 +1,136 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<!--
+ ____________________________________________________________
+|                                                            |
+|    DESIGN + Pat Heard { http://fullahead.org }             |
+|      DATE + 2005.11.30                                     |
+| COPYRIGHT + Free use if this notice is left in place       |
+|____________________________________________________________|
+
+-->
+
+<head>
+
+
+  <title>{ Greenery } Open Web Design</title>
+
+  <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
+  <meta name="author" content="fullahead.org" />
+  <meta name="keywords" content="Open Web Design, OWD, Free Web Template, Greenery, Fullahead" />
+  <meta name="description" content="A free web template designed by Fullahead.org and hosted on OpenWebDesign.org" />
+  <meta name="robots" content="index, follow, noarchive" />
+  <meta name="googlebot" content="noarchive" />
+
+  <link rel="stylesheet" type="text/css" href="css/screen.css" media="screen, print" />
+
+</head>
+
+
+<body>
+
+  <div id="header">
+
+    <div id="menu">
+
+      <ul>
+        <li><a href="index.html" title="learn about the site" class="active">About</a></li>
+        <li><a href="http://openwebdesign.org" title="free web templates">Download</a></li>
+        <li><a href="index.html" title="get help" style="width: 8.7em;">Support</a></li>
+        <li><a href="index.html" title="view photos">Photos</a></li>
+        <li><a href="http://fullahead.org/contact.html" title="contact FullAhead" style="width: 7em;">Contact</a></li>
+      </ul>
+
+      <div id="title">
+        <h1>Greenery</h1>
+      </div>
+
+    </div>
+
+  </div>
+
+  <div id="content">
+
+    <div id="text">
+
+      <h1><span>Greenish Template</span></h1>
+
+      <p>
+        This template is tableless <acronym title="eXtensible Hypertext Markup Language">XHTML</acronym>/<acronym title="Cascading Style Sheet">CSS</acronym> that validates as 1.1 strict.  It uses relative widths so that it handles browser font <acronym title="CTRL + Mousewheel">+/-</acronym> without any troubles.  The vertical plant image is easy to switch for one of your own, as is the accent colour.  To change the green header, you'll need to update these two images:
+      </p>
+
+      <ul>
+        <li><b>bg_header.jpg</b>: the top, tiling, header background.</li>
+        <li><b>menu_tab.gif</b>: the menu tab that comes up onmouseover.</li>
+      </ul>
+
+      <h1><span>Features</span></h1>
+
+      <p>
+        Included in the template are styles for a right side news &amp; submenu section (shown in this version) or a <a href="index.html" title="view comments version">comments section</a>.  The code is <acronym title="coded as the markup was designed to be used">semantically</acronym> written so it's clean and easy to modify.  The CSS is coded so that elements derive their style from their context, rather than classes.  This adds to the readability of the source.
+      </p>
+
+      <p>
+        The plant photo was taken by <a href="http://sxc.hu/browse.phtml?f=profile&amp;l=icefront" title="view sxc.hu portfolio">icefront</a> and has no usage restrictions.  The repeating pattern is from <a href="http://squidfingers.com/" title="visit squidfingers.com/">squidfingers</a> and is also free use, but I'm sure both of them would appreciate a link back.  The rest was created by me and is open source.  If you use any of it, I'd appreciate credit, but it isn't required.
+      </p>
+
+      <h1><span>Winter Blues</span></h1>
+
+      <p>
+        This template was started on the day it began snowing....it's going to be a long 6 months before I see this colour again.  If you do end up finding a use for the template, send me a <a href="http://fullahead.org/contact.html" title="FullAhead contact form">message</a>.  It's always interesting to see my templates in action.
+      </p>
+
+    </div>
+
+    <div id="image"><img src="images/plants.jpg" alt="plants"/></div>
+
+    <div id="sideBar">
+
+      <h1><span>Submenu</span></h1>
+
+      <div class="sideMenu">
+
+        <a href="index.html" title="view comments version"><span>Comments Version</span></a>
+        <a href="http://openwebdesign.org" title="visit Open Web Design"><span>Free Web Templates</span></a>
+        <a href="http://fullahead.org" title="visit FullAhead"><span>FullAhead</span></a>
+        <a href="http://csszengarden.com" title="visit CSS Zen Garden"><span>CSS Zen Garden</span></a>
+        <a href="http://deviantart.com" title="visit DeviantART"><span>DeviantART</span></a>
+
+      </div>
+
+      <p>
+        You could also put some news in this side bar very easily. Just use &lt;p&gt; tags and the custom CSS class date.
+      </p>
+
+
+      <h1><span>Login</span></h1>
+
+      <p>
+        <input type="text" value="Username"/>
+        <input type="password" value="Password"/>
+        <input type="submit" value="Login" class="button" />
+      </p>
+
+      <h1><span>Search</span></h1>
+
+      <p>
+        <input type="text" value=""/>
+        <input type="submit" value="Search" class="button" />
+      </p>
+
+
+    </div>
+
+    <div id="footer">
+      <a href="http://fullahead.org" title="designed by fullahead.org" class="fullAhead"></a>
+      <p>Valid <a href="" title="validate XHTML">XHTML</a> &amp; <a href="" title="validate CSS">CSS</a></p>
+    </div>
+
+  </div>
+
+</body>
+
+</html>

greenery/readme.md

@@ -0,0 +1,5 @@
+## Project Description
+
+* [live example](https://learning-zone.github.io/website-templates/greenery/)
+
+![alt text](https://github.com/learning-zone/Website-Templates/blob/master/assets/greenery.png "greenery")