--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8" />
+ <title>Freggies</title>
+ <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
+ <link rel="stylesheet" type="text/css" href="print.css" media="print" />
+ <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+</head>
+<body>
+<div id="wrapper"><!-- #wrapper -->
+
+ <nav><!-- top nav -->
+ <div class="menu">
+ <ul>
+ <li><a href="#">Home</a></li>
+ <li><a href="#">About</a></li>
+ <li><a href="#">Recipes</a></li>
+ <li><a href="#">Contact Us</a></li>
+ </ul>
+ </div>
+ </nav><!-- end of top nav -->
+
+ <header><!-- header -->
+ <h1><a href="#">Freggies</a></h1>
+ <h2>Fruits and Veggies = Healthy Freggies</h2>
+ </header><!-- end of header -->
+
+ <section id="main"><!-- #main content and sidebar area -->
+ <section id="content"><!-- #content -->
+
+ <b class="benefitsheading">Healthy Eating Benefits</b>
+
+ <section class="benefits">
+ <a href="#"><img class="thumbnail" src="images/run.png" title="run" alt="run"/><span class="caption"><b>Increase Energy</b></span></a>
+ </section>
+
+ <section class="benefits">
+ <a href="#"><img class="thumbnail" src="images/scale.png" title="scale" alt="scale"/><span class="caption"><b>Maintain Weight</b></span></a>
+ </section>
+
+ <section class="benefits">
+ <a href="#"><img class="thumbnail" src="images/healthshield.png" title="healthy" alt="healthy"/><span class="caption"><b>Prevent Disease</b></span></a>
+ </section>
+
+ <article>
+ <h2><a href="#">First Article Title</a></h2>
+
+ <img src="images/fruits1.jpg" alt="" class="alignright" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.</p>
+ </article>
+
+ <article>
+ <h2><a href="#">Second Article Title</a></h2>
+ <img src="images/veggies1.jpg" alt="" class="alignleft" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.</p>
+ </article>
+
+ </section><!-- end of #content -->
+
+ <aside id="sidebar"><!-- sidebar -->
+ <h3>Stuff</h3>
+ <ul>
+ <li><a href="#">Curabitur sodales</a></li>
+ <li><a href="#">Sed dignissim</a></li>
+ <li><a href="#">Fusce nec</a></li>
+ <li><a href="#">Nulla quis</a></li>
+ </ul>
+
+ <h3>More Stuff</h3>
+ <ul>
+ <li><a href="#">Curabitur sodales</a></li>
+ <li><a href="#">Sed dignissim</a></li>
+ <li><a href="#">Fusce nec</a></li>
+ <li><a href="#">Nulla quis</a></li>
+ <li><a href="#">Blah</a></li>
+ <li><a href="#">More blah</a></li>
+ </ul>
+
+ <h3>Even More Stuff</h3>
+ <ul>
+ <li><a href="#">Curabitur sodales</a></li>
+ <li><a href="#">Sed dignissim</a></li>
+ <li><a href="#">Fusce nec</a></li>
+ <li><a href="#">Nulla quis</a></li>
+ <li><a href="#">Blah</a></li>
+ <li><a href="#">More blah</a></li>
+ </ul>
+
+ </aside><!-- end of sidebar -->
+
+ </section><!-- end of #main content and sidebar-->
+
+ <footer>
+ <section id="footer-area">
+
+ <section id="footer-outer-block">
+ <aside class="footer-segment">
+ <h4>Friends</h4>
+ <ul>
+ <li><a href="#">one linkylink</a></li>
+ <li><a href="#">two linkylinks</a></li>
+ <li><a href="#">three linkylinks</a></li>
+ <li><a href="#">four linkylinks</a></li>
+ <li><a href="#">five linkylinks</a></li>
+ </ul>
+ </aside><!-- end of #first footer segment -->
+
+ <aside class="footer-segment">
+ <h4>Awesome Stuff</h4>
+ <ul>
+ <li><a href="#">one linkylink</a></li>
+ <li><a href="#">two linkylinks</a></li>
+ <li><a href="#">three linkylinks</a></li>
+ <li><a href="#">four linkylinks</a></li>
+ <li><a href="#">five linkylinks</a></li>
+ </ul>
+ </aside><!-- end of #second footer segment -->
+
+ <aside class="footer-segment">
+ <h4>Coolness</h4>
+ <ul>
+ <li><a href="#">one linkylink</a></li>
+ <li><a href="#">two linkylinks</a></li>
+ <li><a href="#">three linkylinks</a></li>
+ <li><a href="#">four linkylinks</a></li>
+ <li><a href="#">five linkylinks</a></li>
+ </ul>
+ </aside><!-- end of #third footer segment -->
+
+ <aside class="footer-segment">
+ <h4>Blahdyblah</h4>
+ <p>Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
+ </aside><!-- end of #fourth footer segment -->
+
+ </section><!-- end of footer-outer-block -->
+
+ </section><!-- end of footer-area -->
+ <section class="footerbottom">
+ <p>©2010 <a href="#">yoururl.com</a>
+ </section>
+ </footer>
+
+</div><!-- #wrapper -->
+<!-- Free template created by http://freehtml5templates.com -->
+</body>
+</html>
--- /dev/null
+License\r
+\r
+Using Our Templates\r
+\r
+Want to know what the licensing requirements are for our templates?\r
+\r
+We license our free templates under the Creative Commons Attribution (by) 3.0, which put simply, means you can distribute, remix, tweak, and build upon our work, even commercially, as long as you credit us for the original creation.\r
+\r
+This work by http://freehtml5templates.com is licensed under a Creative Commons Attribution 3.0 United States License.\r
+\r
+http://creativecommons.org/licenses/by/3.0/us/\r
+\r
+How you credit us is flexible. Of course, we would love to have you link to us somewhere on your site, as that shows us the ultimate thanks, but we certainly don’t require an actual link. If you don’t link to us, however, you will need to either include a reference to our URL (http://freehtml5templates.com) within a comment in your template code (which isn’t visible unless someone Views Source), or a non-linked mention of our URL somewhere on your site.\r
+\r
+If you choose to link to use, you can use any link text you desire, but to make it easier for you, we’ve included some code below that you can just copy/paste if you’d like.\r
+\r
+<a href="http://freehtml5templates.com">Free HTML5 Templates</a>\r
+\r
+Enjoy!
--- /dev/null
+/* Created by http://freehtml5templates.com */
+/* reset */
+* {
+margin: 0;
+padding: 0;
+}
+
+/* render html5 elements as block */
+header, footer, section, aside, nav, article {
+display: block;
+}
+
+body {
+line-height: 1;
+background: #eee;
+font-family: Verdana, Arial, Helvetica, sans-serif;
+color: #000;
+font-size: 14px;
+line-height: 18px;
+}
+
+/* layout */
+
+#wrapper {
+width: 940px;
+margin: 0 auto;
+margin-top: 5px;
+margin-bottom: 5px;
+-webkit-box-shadow: 3px 3px 7px #777;
+-moz-box-shadow: 3px 3px 7px #777;
+border-left: 1px #777 solid;
+}
+
+nav {
+width: 940px;
+height: 50px;
+margin: 0 auto;
+background: #110E0F;
+}
+
+header {
+width: 940px;
+height: 200px;
+margin: 0 auto;
+background: #fff url(images/headerimg.jpg) no-repeat left top;
+}
+
+#main {
+width: 940px;
+margin: 0 auto;
+padding-top: 30px;
+background: #FFF;
+overflow: hidden;
+}
+
+#content {
+float: left;
+width: 640px;
+margin-left: 30px;
+padding-right: 20px;
+border-right: 1px #ddd solid;
+}
+
+#sidebar {
+float: right;
+padding-left: 20px;
+width: 220px;
+}
+
+footer {
+width: 940px;
+margin: 0 auto;
+clear: both;
+}
+
+/* basics */
+
+h1,h2,h3,h4,h5,h6 {
+font-weight: bold;
+clear: both;
+color: #808080;
+}
+
+a:link, a:visited {
+color:#597b00;
+}
+
+a:hover, a:active {
+color: #333;
+}
+
+hr {
+background-color: #E7E7E7;
+border: 0;
+height: 1px;
+margin-bottom: 18px;
+clear: both;
+}
+
+p {
+margin-bottom: 18px;
+}
+
+li {
+padding-left: 5px;
+}
+
+/* nav */
+
+nav .menu {
+font-size: 16px;
+font-weight: bold;
+}
+
+nav .menu ul {
+margin: 0;
+padding: 17px 0 0 20px;
+list-style: none;
+line-height: normal;
+}
+
+nav .menu li {
+display: block;
+float: left;
+}
+
+nav .menu a {
+display: block;
+float: left;
+margin-right: 5px;
+padding: 0px 15px;
+text-decoration: none;
+color: #FFF;
+}
+
+nav .menu a:hover {
+border-top: #FFF 1px solid;
+border-bottom: #FFF 1px solid;
+}
+
+/** HEADER */
+
+header h1, #header h2 {
+margin: 0;
+padding: 0 0 0 30px;
+line-height: normal;
+}
+
+header h1 {
+float: left;
+padding-top: 20px;
+font-size: 48px;
+}
+
+header h1 a:link, header h1 a:visited {
+text-decoration: none;
+color: #FFF;
+}
+
+header h1 a:hover {
+color: #ddd;
+}
+
+header h2 {
+padding: 20px 0 0 30px;
+font-style: italic;
+font-size: 14px;
+color: #FFFFFF;
+}
+
+/** ARTICLES **/
+article img {
+border: none;
+-webkit-box-shadow: 3px 3px 7px #777;
+-moz-box-shadow: 3px 3px 7px #777;
+}
+
+#content p, ul, ol, hr {
+margin-bottom: 24px;
+}
+
+#content ul ul, ol ol, ul ol, ol ul {
+margin-bottom: 0;
+}
+
+#content h1, h2, h3, h4, h5, h6 {
+color: #808080;
+margin: 0 0 20px 0;
+line-height: 1.5em;
+}
+
+#content h2, h2, h3 {
+text-shadow: 0px 2px 3px #ddd;
+}
+
+.alignleft, img.alignleft {
+display: inline;
+float: left;
+margin-right: 24px;
+margin-top: 4px;
+}
+
+.alignright, img.alignright {
+display: inline;
+float: right;
+margin-left: 24px;
+margin-top: 4px;
+}
+
+.aligncenter, img.aligncenter {
+clear: both;
+display: block;
+margin-left: auto;
+margin-right: auto;
+}
+
+img.alignleft, img.alignright, img.aligncenter {
+margin-bottom: 12px;
+}
+
+/* sidebar and footer widget blocks */
+
+aside h3 {
+font-size: 18px;
+text-shadow: 0px 2px 3px #ddd;
+}
+
+aside ul {
+list-style: none;
+margin-bottom: 20px;
+margin-top: -15px;
+}
+
+aside li a {
+text-decoration: none;
+}
+
+#sidebar li a:hover {
+border-top: #333 1px solid;
+border-bottom: #333 1px solid;
+}
+
+#footer-area {
+background: #597b00;
+color: #FFF;
+font-size: 90%;
+padding: 18px 0;
+overflow: hidden;
+}
+
+.footer-segment {
+float: left;
+margin-right: 20px;
+margin-left: 20px;
+width: 190px;
+}
+
+footer aside h4 {
+color: #FFF;
+font-size: 16px;
+line-height: 1.5em;
+}
+
+footer a:link, footer a:visited {
+color: #FFF;
+}
+
+footer a:hover {
+text-decoration: underline;
+}
+
+.footerbottom {
+width: 940px;
+background: #000;
+}
+
+.footerbottom p {
+color: #fff;
+font-size: 10px;
+text-align: right;
+padding-right: 20px;
+}
+
+/* inline blocks of images and captions */
+
+.benefits {
+ display: inline-block;
+ vertical-align: top;
+ width: 120px;
+ text-align: center;
+ background: #ddd;
+ border: 6px solid #808080;
+/* curved border radius */
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ margin: 2.3em;
+ padding: .2em;
+}
+
+.benefits .thumbnail {
+ width: 64px;
+ border: none;
+}
+
+.benefits .caption {
+ display: block;
+}
+
+.benefitsheading {
+display: block;
+color: #597b00;
+font-size: 16px;
+font-style: italic;
+border-bottom: 1px #333 dotted;
+}
+
+
projects / treecutter.git / commitdiff
