Difference between revisions of "Team:Penn"

Line 1: Line 1:
 
{{Penn}}
 
{{Penn}}
−
<html xmlns="http://www.w3.org/1999/xhtml">
+
<!DOCTYPE HTML>
−
<head>
+
<!--
−
<title>BusinessToday | Style Demo</title>
+
Halcyonic 1.0 by nodethirtythree + FCT
−
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+
http://nodethirtythree.com | @nodethirtythree
−
</head>
+
Released under the Creative Commons Attribution 3.0 license (nodethirtythree.com/license)
−
<div id="wrap">
+
-->
−
<body id="top">
+
<html>
−
<div class="wrapper col1">
+
<head>
−
  <div id="header">
+
<title>Halcyonic by nodethirtythree + FCT (homepage)</title>
−
    <div id="logo">
+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
−
      <h1><a href="#">BusinessToday</a></h1>
+
<meta name="description" content="" />
−
      <p><strong>Free Website Template</strong></p>
+
<meta name="keywords" content="" />
−
    </div>
+
<!--5grid--><script src="css/5grid/viewport.js"></script><!--[if lt IE 9]><script src="css/5grid/ie.js"></script><![endif]--><link rel="stylesheet" href="css/5grid/responsive.css" /><!--/5grid-->
−
    <div id="newsletter">
+
<link rel="stylesheet" href="css/style.css" />
−
      <p>Sign up to our newsletter for the latest news, updates and offers.</p>
+
<!--[if lte IE 9]><link rel="stylesheet" href="css/style-ie9.css" /><![endif]-->
−
      <form action="#" method="post">
+
</head>
−
        <fieldset>
+
<body>
−
          <legend>NewsLetter</legend>
+
 
−
          <input type="text" value="Name&hellip;"  onfocus="this.value=(this.value=='Name&hellip;')? '' : this.value ;" />
+
<!-- Header -->
−
          <input type="text" value="Email&hellip;"  onfocus="this.value=(this.value=='Email&hellip;')? '' : this.value ;" />
+
<div id="header-wrapper">
−
          <input type="submit" name="news_go" id="news_go" value="Sign Up" />
+
<header id="header" class="5grid">
−
        </fieldset>
+
<div class="12u-first">
−
      </form>
+
−
    </div>
+
<!-- Logo -->
−
    <br class="clear" />
+
<h1><a href="#">Halcyonic</a></h1>
−
  </div>
+
−
</div>
+
<!-- Nav -->
−
<div class="wrapper col2">
+
<nav>
−
  <div id="topbar">
+
<a href="index.html">Homepage</a>
−
    <div id="topnav">
+
<a href="threecolumn.html">Three Column</a>
−
      <ul>
+
<a href="twocolumn1.html">Two Column #1</a>
−
        <li><a href="../index.html">Home</a></li>
+
<a href="twocolumn2.html">Two Column #2</a>
−
        <li class="active"><a href="style-demo.html">Style Demo</a></li>
+
<a href="onecolumn.html">One Column</a>
−
        <li><a href="full-width.html">Full Width</a></li>
+
</nav>
−
        <li><a href="#">DropDown</a>
+
 
−
          <ul>
+
</div>
−
            <li><a href="#">Link 1</a></li>
+
</header>
−
            <li><a href="#">Link 2</a></li>
+
<div id="banner">
−
            <li><a href="#">Link 3</a></li>
+
<div class="5grid 5grid-alt">
−
          </ul>
+
<div class="6u-first">
−
        </li>
+
−
        <li class="last"><a href="#">A Long Link Text</a></li>
+
<!-- Banner Copy -->
−
      </ul>
+
<p>We do something really useful, important, and unique. Learn all about it here ...</p>
−
    </div>
+
<a href="#" class="button-big">Go on, click me!</a>
−
    <div id="search">
+
 
−
      <form action="#" method="post">
+
</div>
−
        <fieldset>
+
<div class="6u">
−
          <legend>Site Search</legend>
+
−
          <input type="text" value="Search Our Website&hellip;"  onfocus="this.value=(this.value=='Search Our Website&hellip;')? '' : this.value ;" />
+
<!-- Banner Image -->
−
          <input type="submit" name="go" id="go" value="Search" />
+
<a href="#" class="bordered-feature-image"><img src="images/banner.jpg" alt="" /></a>
−
        </fieldset>
+
−
      </form>
+
</div>
−
    </div>
+
<div class="5grid-clear"></div>
−
    <br class="clear" />
+
</div>
−
  </div>
+
</div>
−
</div>
+
</div>
−
<div class="wrapper col3">
+
 
−
  <div id="breadcrumb">
+
<!-- Features -->
−
    <ul>
+
<div id="features-wrapper">
−
      <li class="first">You Are Here</li>
+
<div id="features">
−
      <li>&#187;</li>
+
<div class="5grid">
−
      <li><a href="#">Home</a></li>
+
<div class="3u-first">
−
      <li>&#187;</li>
+
−
      <li><a href="#">Grand Parent</a></li>
+
<!-- Feature #1 -->
−
      <li>&#187;</li>
+
<section>
−
      <li><a href="#">Parent</a></li>
+
<a href="#" class="bordered-feature-image"><img src="images/pic01.jpg" alt="" /></a>
−
      <li>&#187;</li>
+
<h2>Welcome to Halcyonic</h2>
−
      <li class="current"><a href="#">Child</a></li>
+
<p>
−
    </ul>
+
This is <strong>Halcyonic</strong>, a free website template  
−
  </div>
+
by <a href="http://nodethirtythree.com/">N33</a> for
−
</div>
+
<a href="http://www.freecsstemplates.org/">FCT</a>. It's responsive,
−
<div class="wrapper col5">
+
built on HTML5/CSS3, and includes 5 unique page layouts.
−
  <div id="container">
+
</p>
−
    <div id="content">
+
</section>
−
      <h1>&lt;h1&gt; to &lt;h6&gt; - Headline Colour and Size Are All The Same</h1>
+
 
−
      <img class="imgr" src="../images/demo/imgr.gif" alt="" width="125" height="125" />
+
</div>
−
      <p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis felisi eger id justo maurisus convallicitur.</p>
+
<div class="3u">
−
      <p>Dapiensociis <a href="#">temper donec auctortortis cumsan</a> et curabitur condis lorem loborttis leo. Ipsumcommodo libero nunc at in velis tincidunt pellentum tincidunt vel lorem.</p>
+
−
      <img class="imgl" src="../images/demo/imgl.gif" alt="" width="125" height="125" />
+
<!-- Feature #2 -->
−
      <p>This is a W3C compliant free website template from <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a>. This template is distributed using a <a href="http://www.os-templates.com/template-terms">Website Template Licence</a>.</p>
+
<section>
−
      <p>You can use and modify the template for both personal and commercial use. You must keep all copyright information and credit links in the template and associated files. For more CSS templates visit <a href="http://www.os-templates.com/">Free Website Templates</a>.</p>
+
<a href="#" class="bordered-feature-image"><img src="images/pic02.jpg" alt="" /></a>
−
      <p>Portortornec condimenterdum eget consectetuer condis consequam pretium pellus sed mauris enim. Puruselit mauris nulla hendimentesque elit semper nam a sapien urna sempus.</p>
+
<h2>Responsive You Say?</h2>
−
      <h2>Table(s)</h2>
+
<p>
−
      <table summary="Summary Here" cellpadding="0" cellspacing="0">
+
Yes! Halcyonic is built on the <a href="http://nodethirtythree.com/5grid/">5grid</a>
−
        <thead>
+
framework, so it has full responsive support for widescreen, standard,
−
          <tr>
+
and mobile displays.
−
            <th>Header 1</th>
+
</p>
−
            <th>Header 2</th>
+
</section>
−
            <th>Header 3</th>
+
 
−
            <th>Header 4</th>
+
</div>
−
          </tr>
+
<div class="3u">
−
        </thead>
+
−
        <tbody>
+
<!-- Feature #3 -->
−
          <tr class="light">
+
<section>
−
            <td>Value 1</td>
+
<a href="#" class="bordered-feature-image"><img src="images/pic03.jpg" alt="" /></a>
−
            <td>Value 2</td>
+
<h2>License Info</h2>
−
            <td>Value 3</td>
+
<p>
−
            <td>Value 4</td>
+
Halcyonic is licensed under the <a href="#">CCA 3.0</a> license,
−
          </tr>
+
so use it for personal or commercial use as much as you like (just keep
−
          <tr class="dark">
+
the footer credit intact).
−
            <td>Value 5</td>
+
</p>
−
            <td>Value 6</td>
+
</section>
−
            <td>Value 7</td>
+
 
−
            <td>Value 8</td>
+
</div>
−
          </tr>
+
<div class="3u">
−
          <tr class="light">
+
−
            <td>Value 9</td>
+
<!-- Feature #4 -->
−
            <td>Value 10</td>
+
<section>
−
            <td>Value 11</td>
+
<a href="#" class="bordered-feature-image"><img src="images/pic04.jpg" alt="" /></a>
−
            <td>Value 12</td>
+
<h2>Volutpat etiam aliquam</h2>
−
          </tr>
+
<p>
−
          <tr class="dark">
+
Duis neque nisi, dapibus sed mattis quis, rutrum accumsan sed. Suspendisse
−
            <td>Value 13</td>
+
eu varius nibh. Suspendisse vitae magna eget odio amet mollis.
−
            <td>Value 14</td>
+
</p>
−
            <td>Value 15</td>
+
</section>
−
            <td>Value 16</td>
+
 
−
          </tr>
+
</div>
−
        </tbody>
+
</div>
−
      </table>
+
</div>
−
      <div id="comments">
+
</div>
−
        <h2>Comments</h2>
+
 
−
        <ul class="commentlist">
+
<!-- Content -->
−
          <li class="comment_odd">
+
<div id="content-wrapper">
−
            <div class="author"><img class="avatar" src="../images/demo/avatar.gif" width="32" height="32" alt="" /><span class="name"><a href="#">A Name</a></span> <span class="wrote">wrote:</span></div>
+
<div id="content">
−
            <div class="submitdate"><a href="#">August 4, 2009 at 8:35 am</a></div>
+
<div class="5grid">
−
            <p>This is an example of a comment made on a post. You can either edit the comment, delete the comment or reply to the comment. Use this as a place to respond to the post or to share what you are thinking.</p>
+
<div class="4u-first">
−
          </li>
+
 
−
          <li class="comment_even">
+
<!-- Box #1 -->
−
            <div class="author"><img class="avatar" src="../images/demo/avatar.gif" width="32" height="32" alt="" /><span class="name"><a href="#">A Name</a></span> <span class="wrote">wrote:</span></div>
+
<section>
−
            <div class="submitdate"><a href="#">August 4, 2009 at 8:35 am</a></div>
+
<header>
−
            <p>This is an example of a comment made on a post. You can either edit the comment, delete the comment or reply to the comment. Use this as a place to respond to the post or to share what you are thinking.</p>
+
<h2>Who We Are</h2>
−
          </li>
+
<h3>A subheading about who we are</h3>
−
          <li class="comment_odd">
+
</header>
−
            <div class="author"><img class="avatar" src="../images/demo/avatar.gif" width="32" height="32" alt="" /><span class="name"><a href="#">A Name</a></span> <span class="wrote">wrote:</span></div>
+
<a href="#" class="feature-image"><img src="images/pic05.jpg" alt="" /></a>
−
            <div class="submitdate"><a href="#">August 4, 2009 at 8:35 am</a></div>
+
<p>
−
            <p>This is an example of a comment made on a post. You can either edit the comment, delete the comment or reply to the comment. Use this as a place to respond to the post or to share what you are thinking.</p>
+
Duis neque nisi, dapibus sed mattis quis, rutrum accumsan sed.
−
          </li>
+
Suspendisse eu varius nibh. Suspendisse vitae magna eget odio amet mollis
−
        </ul>
+
justo facilisis quis. Sed sagittis mauris amet tellus gravida lorem ipsum.
−
      </div>
+
</p>
−
      <h2>Write A Comment</h2>
+
</section>
−
      <div id="respond">
+
 
−
        <form action="#" method="post">
+
</div>
−
          <p>
+
<div class="4u">
−
            <input type="text" name="name" id="name" value="" size="22" />
+
 
−
            <label for="name"><small>Name (required)</small></label>
+
<!-- Box #2 -->
−
          </p>
+
<section>
−
          <p>
+
<header>
−
            <input type="text" name="email" id="email" value="" size="22" />
+
<h2>What We Do</h2>
−
            <label for="email"><small>Mail (required)</small></label>
+
<h3>A subheading about what we do</h3>
−
          </p>
+
</header>
−
          <p>
+
<ul class="check-list">
−
            <textarea name="comment" id="comment" cols="100%" rows="10"></textarea>
+
<li>Sed mattis quis rutrum accum</li>
−
            <label for="comment" style="display:none;"><small>Comment (required)</small></label>
+
<li>Eu varius nibh suspendisse lorem</li>
−
          </p>
+
<li>Magna eget odio amet mollis justo</li>
−
          <p>
+
<li>Facilisis quis sagittis mauris</li>
−
            <input name="submit" type="submit" id="submit" value="Submit Form" />
+
<li>Amet tellus gravida lorem ipsum</li>
−
            &nbsp;
+
</ul>
−
            <input name="reset" type="reset" id="reset" tabindex="5" value="Reset Form" />
+
</section>
−
          </p>
+
 
−
        </form>
+
</div>
−
      </div>
+
<div class="4u">
−
    </div>
+
−
    <div id="column">
+
<!-- Box #3 -->
−
      <div class="subnav">
+
<section>
−
        <h2>Secondary Navigation</h2>
+
<header>
−
        <ul>
+
<h2>What People Are Saying</h2>
−
          <li><a href="#">Navigation - Level 1</a></li>
+
<h3>And a final subheading about our clients</h3>
−
          <li><a href="#">Navigation - Level 1</a>
+
</header>
−
            <ul>
+
<ul class="quote-list">
−
              <li><a href="#">Navigation - Level 2</a></li>
+
<li>
−
              <li><a href="#">Navigation - Level 2</a></li>
+
<img src="images/pic06.jpg" alt="" />
−
            </ul>
+
<p>"Neque nisidapibus mattis"</p>
−
          </li>
+
<span>Jane Doe, CEO of UntitledCorp</span>
−
          <li><a href="#">Navigation - Level 1</a>
+
</li>
−
            <ul>
+
<li>
−
              <li><a href="#">Navigation - Level 2</a></li>
+
<img src="images/pic07.jpg" alt="" />
−
              <li><a href="#">Navigation - Level 2</a>
+
<p>"Lorem ipsum consequat!"</p>
−
                <ul>
+
<span>John Doe, President of FakeBiz</span>
−
                  <li><a href="#">Navigation - Level 3</a></li>
+
</li>
−
                  <li><a href="#">Navigation - Level 3</a></li>
+
<li>
−
                </ul>
+
<img src="images/pic08.jpg" alt="" />
−
              </li>
+
<p>"Magna veroeros amet tempus"</p>
−
            </ul>
+
<span>Mary Smith, CFO of UntitledBiz</span>
−
          </li>
+
</li>
−
          <li><a href="#">Navigation - Level 1</a></li>
+
</ul>
−
        </ul>
+
</section>
−
      </div>
+
 
−
      <div class="holder">
+
</div>
−
        <h2 class="title"><img src="../images/demo/60x60.gif" alt="" />Nullamlacus dui ipsum conseque loborttis</h2>
+
</div>
−
        <p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque.</p>
+
</div>
−
        <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
+
</div>
−
      </div>
+
 
−
      <div id="featured">
+
<!-- Footer -->
−
        <ul>
+
<div id="footer-wrapper">
−
          <li>
+
<footer id="footer" class="5grid">
−
            <h2>Indonectetus facilis leonib</h2>
+
<div class="8u-first">
−
            <p class="imgholder"><img src="../images/demo/240x90.gif" alt="" /></p>
+
−
            <p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque congue magnis vestibulum quismodo nulla et feugiat. Adipisciniapellentum leo ut consequam ris felit elit id nibh sociis malesuada.</p>
+
<!-- Links -->
−
            <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
+
<section>
−
          </li>
+
<h2>Links to Important Stuff</h2>
−
        </ul>
+
<div class="3u-first">
−
      </div>
+
<ul class="link-list last-child">
−
      <div class="holder">
+
<li><a href="#">Neque amet dapibus</a></li>
−
        <h2>Lorem ipsum dolor</h2>
+
<li><a href="#">Sed mattis quis rutrum</a></li>
−
        <p>Nuncsed sed conseque a at quismodo tris mauristibus sed habiturpiscinia sed.</p>
+
<li><a href="#">Accumsan suspendisse</a></li>
−
        <ul>
+
<li><a href="#">Eu varius vitae magna</a></li>
−
          <li><a href="#">Lorem ipsum dolor sit</a></li>
+
</ul>
−
          <li>Etiam vel sapien et</li>
+
</div>
−
          <li><a href="#">Etiam vel sapien et</a></li>
+
<div class="3u">
−
        </ul>
+
<ul class="link-list last-child">
−
        <p>Nuncsed sed conseque a at quismodo tris mauristibus sed habiturpiscinia sed. Condimentumsantincidunt dui mattis magna intesque purus orci augue lor nibh.</p>
+
<li><a href="#">Neque amet dapibus</a></li>
−
        <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
+
<li><a href="#">Sed mattis quis rutrum</a></li>
−
      </div>
+
<li><a href="#">Accumsan suspendisse</a></li>
−
    </div>
+
<li><a href="#">Eu varius vitae magna</a></li>
−
    <div class="clear"></div>
+
</ul>
−
  </div>
+
</div>
−
</div>
+
<div class="3u">
−
<div class="wrapper col6">
+
<ul class="link-list last-child">
−
  <div id="footer">
+
<li><a href="#">Neque amet dapibus</a></li>
−
    <div id="login">
+
<li><a href="#">Sed mattis quis rutrum</a></li>
−
      <h2>Client Login !</h2>
+
<li><a href="#">Accumsan suspendisse</a></li>
−
      <p>Clients can Login to their accounts here.</p>
+
<li><a href="#">Eu varius vitae magna</a></li>
−
      <form action="#" method="post">
+
</ul>
−
        <fieldset>
+
</div>
−
          <legend>Client Login</legend>
+
<div class="3u">
−
          <div class="fl_left">
+
<ul class="link-list last-child">
−
            <input type="text" value="Enter email address&hellip;"  onfocus="this.value=(this.value=='Enter email address&hellip;')? '' : this.value ;" />
+
<li><a href="#">Neque amet dapibus</a></li>
−
            <input type="password" value="Enter password&hellip;"  onfocus="this.value=(this.value=='Enter password&hellip;')? '' : this.value ;" />
+
<li><a href="#">Sed mattis quis rutrum</a></li>
−
          </div>
+
<li><a href="#">Accumsan suspendisse</a></li>
−
          <div class="fl_right">
+
<li><a href="#">Eu varius vitae magna</a></li>
−
            <input type="submit" name="login_go" id="login_go" value="&raquo;" />
+
</ul>
−
          </div>
+
</div>
−
        </fieldset>
+
</section>
−
      </form>
+
 
−
      <p><a href="#">&raquo; Lost Your Password</a> | <a href="#">Create An Account &raquo;</a></p>
+
</div>
−
    </div>
+
<div class="4u">
−
    <div class="footbox">
+
−
      <h2>Lacus interdum</h2>
+
<!-- Blurb -->
−
      <ul>
+
<section>
−
        <li><a href="#">Praesent et eros</a></li>
+
<h2>An Informative Text Blurb</h2>
−
        <li><a href="#">Praesent et eros</a></li>
+
<p>
−
        <li><a href="#">Lorem ipsum dolor</a></li>
+
Duis neque nisi, dapibus sed mattis quis, rutrum accumsan sed. Suspendisse eu
−
        <li><a href="#">Suspendisse in neque</a></li>
+
varius nibh. Suspendisse vitae magna eget odio amet mollis. Duis neque nisi,
−
        <li class="last"><a href="#">Praesent et eros</a></li>
+
dapibus sed mattis quis, sed rutrum accumsan sed. Suspendisse eu varius nibh
−
      </ul>
+
lorem ipsum amet dolor sit amet lorem ipsum consequat gravida justo mollis.
−
    </div>
+
</p>
−
    <div class="footbox">
+
</section>
−
      <h2>Lacus interdum</h2>
+
−
      <ul>
+
</div>
−
        <li><a href="#">Praesent et eros</a></li>
+
</footer>
−
        <li><a href="#">Praesent et eros</a></li>
+
</div>
−
        <li><a href="#">Lorem ipsum dolor</a></li>
+
 
−
        <li><a href="#">Suspendisse in neque</a></li>
+
<!-- Copyright -->
−
        <li class="last"><a href="#">Praesent et eros</a></li>
+
<div id="copyright">
−
      </ul>
+
(c) 2012 Untitled Website. All rights reserved. Design by <a href="http://nodethirtythree.com/">nodethirtythree</a> + <a href="http://www.freecsstemplates.org/">FCT</a>. Images by <a href="http://fotogrph.com/">Fotogrph</a>.
−
    </div>
+
</div>
−
    <div class="footbox">
+
 
−
      <h2>Lacus interdum</h2>
+
</body>
−
      <ul>
+
−
        <li><a href="#">Praesent et eros</a></li>
+
−
        <li><a href="#">Praesent et eros</a></li>
+
−
        <li><a href="#">Lorem ipsum dolor</a></li>
+
−
        <li><a href="#">Suspendisse in neque</a></li>
+
−
        <li class="last"><a href="#">Praesent et eros</a></li>
+
−
      </ul>
+
−
    </div>
+
−
    <br class="clear" />
+
−
  </div>
+
−
</div>
+
−
<div class="wrapper col7">
+
−
  <div id="copyright">
+
−
    <p class="fl_left">Copyright &copy; 2014 - All Rights Reserved - <a href="#">Domain Name</a></p>
+
−
    <p class="fl_right">Template by <a target="_blank" href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
+
−
    <br class="clear" />
+
−
  </div>
+
−
</div>
+
−
</body>
+
 
</html>
 
</html>

Revision as of 23:39, 27 July 2015

{

<!DOCTYPE HTML> Halcyonic by nodethirtythree + FCT (homepage)

Welcome to Halcyonic

This is Halcyonic, a free website template by N33 for FCT. It's responsive, built on HTML5/CSS3, and includes 5 unique page layouts.

Responsive You Say?

Yes! Halcyonic is built on the 5grid framework, so it has full responsive support for widescreen, standard, and mobile displays.

License Info

Halcyonic is licensed under the CCA 3.0 license, so use it for personal or commercial use as much as you like (just keep the footer credit intact).

Volutpat etiam aliquam

Duis neque nisi, dapibus sed mattis quis, rutrum accumsan sed. Suspendisse eu varius nibh. Suspendisse vitae magna eget odio amet mollis.

Who We Are

A subheading about who we are

Duis neque nisi, dapibus sed mattis quis, rutrum accumsan sed. Suspendisse eu varius nibh. Suspendisse vitae magna eget odio amet mollis justo facilisis quis. Sed sagittis mauris amet tellus gravida lorem ipsum.

What We Do

A subheading about what we do

  • Sed mattis quis rutrum accum
  • Eu varius nibh suspendisse lorem
  • Magna eget odio amet mollis justo
  • Facilisis quis sagittis mauris
  • Amet tellus gravida lorem ipsum

What People Are Saying

And a final subheading about our clients

  • "Neque nisidapibus mattis"

    Jane Doe, CEO of UntitledCorp

  • "Lorem ipsum consequat!"

    John Doe, President of FakeBiz

  • "Magna veroeros amet tempus"

    Mary Smith, CFO of UntitledBiz