Difference between revisions of "Team:Penn"

Line 3: Line 3:
 
<html>
 
<html>
 
<head>
 
<head>
<title>Halcyonic by nodethirtythree + FCT (homepage)</title>
+
<title>Monochromed by TEMPLATED</title>
 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<meta name="description" content="" />
 
<meta name="description" content="" />
 
<meta name="keywords" content="" />
 
<meta name="keywords" content="" />
<!--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-->
+
<noscript>
<link rel="stylesheet" href="css/style.css" />
+
<link rel="stylesheet" href="css/skel-noscript.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="css/style-ie9.css" /><![endif]-->
+
<link rel="stylesheet" href="css/style.css" />
 +
</noscript>
 +
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
 +
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
 
</head>
 
</head>
 +
<body class="homepage">
  
<div id="wrap">
+
<!-- Header -->
<body>
+
<div id="header">
 
+
<div class="container">
<!-- Header -->
+
<div id="header-wrapper">
+
<header id="header" class="5grid">
+
<div class="12u-first">
+
 
 
<!-- Logo -->
+
<!-- Logo -->
<h1><a href="#">Halcyonic</a></h1>
+
<div id="logo">
+
<h1><a href="#">Monochromed</a></h1>
<!-- Nav -->
+
<span>Design by TEMPLATED</span>
<nav>
+
<a href="index.html">Homepage</a>
+
<a href="threecolumn.html">Three Column</a>
+
<a href="twocolumn1.html">Two Column #1</a>
+
<a href="twocolumn2.html">Two Column #2</a>
+
<a href="onecolumn.html">One Column</a>
+
</nav>
+
 
+
 
</div>
 
</div>
</header>
+
<div id="banner">
+
<!-- Nav -->
<div class="5grid 5grid-alt">
+
<nav id="nav">
<div class="6u-first">
+
<ul>
+
<li class="active"><a href="index.html">Homepage</a></li>
<!-- Banner Copy -->
+
<li><a href="threecolumn.html">Two Sidebars</a></li>
<p>We do something really useful, important, and unique. Learn all about it here ...</p>
+
<li><a href="twocolumn1.html">Left Sidebar</a></li>
<a href="#" class="button-big">Go on, click me!</a>
+
<li><a href="twocolumn2.html">Right Sidebar</a></li>
 +
<li><a href="onecolumn.html">No Sidebar</a></li>
 +
</ul>
 +
</nav>
  
</div>
 
<div class="6u">
 
 
<!-- Banner Image -->
 
<a href="#" class="bordered-feature-image"><img src="images/banner.jpg" alt="" /></a>
 
 
</div>
 
<div class="5grid-clear"></div>
 
</div>
 
</div>
 
 
</div>
 
</div>
 
+
</div>
<!-- Features -->
+
<!-- Header -->
<div id="features-wrapper">
+
<div id="features">
+
<!-- Main -->
<div class="5grid">
+
<div id="main">
<div class="3u-first">
+
<div class="container">
+
<header>
<!-- Feature #1 -->
+
<h2>Gravida nibh quis urna</h2>
<section>
+
</header>
<a href="#" class="bordered-feature-image"><img src="images/pic01.jpg" alt="" /></a>
+
<div class="row">
<h2>Welcome to Halcyonic</h2>
+
<div class="3u">
<p>
+
<section>
This is <strong>Halcyonic</strong>, a free website template
+
<a href="#" class="image full"><img src="images/pics01.jpg" alt="" /></a>
by <a href="http://nodethirtythree.com/">N33</a> for
+
<p>Quisque dictum. Pellentesque viverra  enim. Integer nisl risus, sagittis convallis, rutrum id, elementum.</p>
<a href="http://www.freecsstemplates.org/">FCT</a>. It's responsive,
+
<a href="#" class="button">Read More</a>
built on HTML5/CSS3, and includes 5 unique page layouts.
+
</section>
</p>
+
</div>
</section>
+
<div class="3u">
 
+
<section>
</div>
+
<a href="#" class="image full"><img src="images/pics11.jpg" alt="" /></a>
<div class="3u">
+
<p>Pellentesque viverra  enim. Tristique ante ut risus. Quisque dictum. Integer sagittis convallis elementum.</p>
+
<a href="#" class="button">Read More</a>
<!-- Feature #2 -->
+
</section>
<section>
+
</div>
<a href="#" class="bordered-feature-image"><img src="images/pic02.jpg" alt="" /></a>
+
<div class="3u">
<h2>Responsive You Say?</h2>
+
<section>
<p>
+
<a href="#" class="image full"><img src="images/pics12.jpg" alt="" /></a>
Yes! Halcyonic is built on the <a href="http://nodethirtythree.com/5grid/">5grid</a>
+
<p>Pellentesque viverra  enim. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum.</p>
framework, so it has full responsive support for widescreen, standard,
+
<a href="#" class="button">Read More</a>
and mobile displays.
+
</section>
</p>
+
</div>
</section>
+
<div class="3u">
 
+
<section>
</div>
+
<a href="#" class="image full"><img src="images/pics13.jpg" alt="" /></a>
<div class="3u">
+
<p>Tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis elementum.</p>
+
<a href="#" class="button">Read More</a>
<!-- Feature #3 -->
+
</section>
<section>
+
<a href="#" class="bordered-feature-image"><img src="images/pic03.jpg" alt="" /></a>
+
<h2>License Info</h2>
+
<p>
+
Halcyonic is licensed under the <a href="#">CCA 3.0</a> license,
+
so use it for personal or commercial use as much as you like (just keep
+
the footer credit intact).
+
</p>
+
</section>
+
 
+
</div>
+
<div class="3u">
+
+
<!-- Feature #4 -->
+
<section>
+
<a href="#" class="bordered-feature-image"><img src="images/pic04.jpg" alt="" /></a>
+
<h2>Volutpat etiam aliquam</h2>
+
<p>
+
Duis neque nisi, dapibus sed mattis quis, rutrum accumsan sed. Suspendisse
+
eu varius nibh. Suspendisse vitae magna eget odio amet mollis.
+
</p>
+
</section>
+
 
+
</div>
+
 
</div>
 
</div>
 
</div>
 
</div>
</div>
+
<div class="divider">&nbsp;</div>
 
+
<div class="row">
<!-- Content -->
+
<div id="content-wrapper">
+
<!-- Content -->
<div id="content">
+
<div class="8u skel-cell-important">
<div class="5grid">
+
<section id="content">
<div class="4u-first">
+
<header>
 
+
<h2>Integer gravida nibh quis urna</h2>
<!-- Box #1 -->
+
<span class="byline">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum</span>
<section>
+
</header>
<header>
+
<p><a href="#" class="image full"><img src="images/pics02.jpg" alt=""></a></p>
<h2>Who We Are</h2>
+
<p>This is <strong>Monochromed</strong>, a responsive HTML5 site template freebie by <a href="http://templated.co">TEMPLATED</a>. Released for free under the <a href="http://templated.co/license">Creative Commons Attribution</a> license, so use it for whatever (personal or commercial) &ndash; just give us credit! Check out more of our stuff at <a href="http://templated.co">our site</a> or follow us on <a href="http://twitter.com/templatedco">Twitter</a>.</p>
<h3>A subheading about who we are</h3>
+
<a href="#" class="button">Read More</a>
</header>
+
</section>
<a href="#" class="feature-image"><img src="images/pic05.jpg" alt="" /></a>
+
<p>
+
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.
+
</p>
+
</section>
+
 
+
 
</div>
 
</div>
<div class="4u">
+
<!-- /Content -->
 
+
<!-- Box #2 -->
+
<!-- Sidebar -->
<section>
+
<div id="sidebar" class="4u">
<header>
+
<section>
<h2>What We Do</h2>
+
<header>
<h3>A subheading about what we do</h3>
+
<h2>Gravida praesent</h2>
</header>
+
<span class="byline">Praesent lacus congue rutrum</span>
<ul class="check-list">
+
</header>
<li>Sed mattis quis rutrum accum</li>
+
<p>Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Maecenas luctus lectus at sapien. Consectetuer adipiscing elit.</p>
<li>Eu varius nibh suspendisse lorem</li>
+
<ul class="default">
<li>Magna eget odio amet mollis justo</li>
+
<li><a href="#">Pellentesque quis lectus gravida blandit.</a></li>
<li>Facilisis quis sagittis mauris</li>
+
<li><a href="#">Lorem ipsum consectetuer adipiscing elit.</a></li>
<li>Amet tellus gravida lorem ipsum</li>
+
<li><a href="#">Phasellus nec nibh pellentesque congue.</a></li>
</ul>
+
<li><a href="#">Cras aliquam risus pellentesque pharetra.</a></li>
</section>
+
<li><a href="#">Duis non metus commodo euismod lobortis.</a></li>
 
+
<li><a href="#">Lorem ipsum dolor adipiscing elit.</a></li>
 +
</ul>
 +
</section>
 
</div>
 
</div>
<div class="4u">
+
<!-- Sidebar -->
+
<!-- Box #3 -->
+
<section>
+
<header>
+
<h2>What People Are Saying</h2>
+
<h3>And a final subheading about our clients</h3>
+
</header>
+
<ul class="quote-list">
+
<li>
+
<img src="images/pic06.jpg" alt="" />
+
<p>"Neque nisidapibus mattis"</p>
+
<span>Jane Doe, CEO of UntitledCorp</span>
+
</li>
+
<li>
+
<img src="images/pic07.jpg" alt="" />
+
<p>"Lorem ipsum consequat!"</p>
+
<span>John Doe, President of FakeBiz</span>
+
</li>
+
<li>
+
<img src="images/pic08.jpg" alt="" />
+
<p>"Magna veroeros amet tempus"</p>
+
<span>Mary Smith, CFO of UntitledBiz</span>
+
</li>
+
</ul>
+
</section>
+
 
+
</div>
+
</div>
+
 
</div>
 
</div>
 +
 
</div>
 
</div>
 +
</div>
 +
<!-- Main -->
  
<!-- Footer -->
+
<!-- Footer -->
<div id="footer-wrapper">
+
<div id="footer">
<footer id="footer" class="5grid">
+
<div class="container">
<div class="8u-first">
+
<div class="row">
+
<div class="3u">
<!-- Links -->
+
<section>
<section>
+
<ul class="style1">
<h2>Links to Important Stuff</h2>
+
<li><img src="images/pics05.jpg" width="78" height="78" alt="">
<div class="3u-first">
+
<p>Nullam non wisi a sem eleifend. Donec mattis libero eget urna. </p>
<ul class="link-list last-child">
+
<p class="posted">August 11, 2014  |  (10 )  Comments</p>
<li><a href="#">Neque amet dapibus</a></li>
+
</li>
<li><a href="#">Sed mattis quis rutrum</a></li>
+
<li><img src="images/pics06.jpg" width="78" height="78" alt="">
<li><a href="#">Accumsan suspendisse</a></li>
+
<p>Nullam non wisi a sem eleifend. Donec mattis libero eget urna. </p>
<li><a href="#">Eu varius vitae magna</a></li>
+
<p class="posted">August 11, 2014  |  (10 )  Comments</p>
</ul>
+
</li>
</div>
+
<li><img src="images/pics07.jpg" width="78" height="78" alt="">
<div class="3u">
+
<p>Nullam non wisi a sem eleifend. Donec mattis libero eget urna. </p>
<ul class="link-list last-child">
+
<p class="posted">August 11, 2014  |  (10 )  Comments</p>
<li><a href="#">Neque amet dapibus</a></li>
+
</li>
<li><a href="#">Sed mattis quis rutrum</a></li>
+
</ul>
<li><a href="#">Accumsan suspendisse</a></li>
+
</section>
<li><a href="#">Eu varius vitae magna</a></li>
+
</ul>
+
</div>
+
<div class="3u">
+
<ul class="link-list last-child">
+
<li><a href="#">Neque amet dapibus</a></li>
+
<li><a href="#">Sed mattis quis rutrum</a></li>
+
<li><a href="#">Accumsan suspendisse</a></li>
+
<li><a href="#">Eu varius vitae magna</a></li>
+
</ul>
+
</div>
+
<div class="3u">
+
<ul class="link-list last-child">
+
<li><a href="#">Neque amet dapibus</a></li>
+
<li><a href="#">Sed mattis quis rutrum</a></li>
+
<li><a href="#">Accumsan suspendisse</a></li>
+
<li><a href="#">Eu varius vitae magna</a></li>
+
</ul>
+
</div>
+
</section>
+
 
+
 
</div>
 
</div>
<div class="4u">
+
<div class="3u">
+
<section>
<!-- Blurb -->
+
<ul class="style1">
<section>
+
<li class="first"><img src="images/pics08.jpg" width="78" height="78" alt="">
<h2>An Informative Text Blurb</h2>
+
<p>Nullam non wisi a sem eleifend. Donec mattis libero eget urna. </p>
<p>
+
<p class="posted">August 11, 2014  |  (10 )  Comments</p>
Duis neque nisi, dapibus sed mattis quis, rutrum accumsan sed. Suspendisse eu
+
</li>
varius nibh. Suspendisse vitae magna eget odio amet mollis. Duis neque nisi,
+
<li><img src="images/pics09.jpg" width="78" height="78" alt="">
dapibus sed mattis quis, sed rutrum accumsan sed. Suspendisse eu varius nibh
+
<p>Nullam non wisi a sem eleifend. Donec mattis libero eget urna. </p>
lorem ipsum amet dolor sit amet lorem ipsum consequat gravida justo mollis.
+
<p class="posted">August 11, 2014  |  (10 )  Comments</p>
</p>
+
</li>
</section>
+
<li><img src="images/pics10.jpg" width="78" height="78" alt="">
+
<p>Nullam non wisi a sem eleifend. Donec mattis libero eget urna. </p>
 +
<p class="posted">August 11, 2014  |  (10 )  Comments</p>
 +
</li>
 +
</ul>
 +
</section>
 
</div>
 
</div>
</footer>
+
<div class="6u">
 +
<section>
 +
<header>
 +
<h2>Aenean elementum</h2>
 +
</header>
 +
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus.</p>
 +
<ul class="default">
 +
<li><a href="#">Pellentesque quis lectus gravida blandit.</a></li>
 +
<li><a href="#">Lorem ipsum consectetuer adipiscing elit.</a></li>
 +
<li><a href="#">Phasellus nec nibh pellentesque congue.</a></li>
 +
<li><a href="#">Cras aliquam risus pellentesque pharetra.</a></li>
 +
<li><a href="#">Duis non metus commodo euismod lobortis.</a></li>
 +
<li><a href="#">Lorem ipsum dolor adipiscing elit.</a></li>
 +
</ul>
 +
</section>
 +
</div>
 +
</div>
 
</div>
 
</div>
 +
</div>
 +
<!-- Footer -->
  
<!-- Copyright -->
+
<!-- Copyright -->
<div id="copyright">
+
<div id="copyright">
(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 class="container">
 +
Design: <a href="http://templated.co">TEMPLATED</a> Images: <a href="http://unsplash.com">Unsplash</a> (<a href="http://unsplash.com/cc0">CC0</a>)
 
</div>
 
</div>
 +
</div>
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 00:03, 28 July 2015

{

Monochromed by TEMPLATED

Gravida nibh quis urna

Quisque dictum. Pellentesque viverra enim. Integer nisl risus, sagittis convallis, rutrum id, elementum.

Read More

Pellentesque viverra enim. Tristique ante ut risus. Quisque dictum. Integer sagittis convallis elementum.

Read More

Pellentesque viverra enim. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum.

Read More

Tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis elementum.

Read More
 

Integer gravida nibh quis urna

This is Monochromed, a responsive HTML5 site template freebie by TEMPLATED. Released for free under the Creative Commons Attribution license, so use it for whatever (personal or commercial) – just give us credit! Check out more of our stuff at our site or follow us on Twitter.

Read More