Difference between revisions of "Team:Penn"

Line 2: Line 2:
  
 
<html>
 
<html>
−
<head>
+
<head>
−
<title>Monochromed by TEMPLATED</title>
+
<title>Optimal | Pages | Basic Grid</title>
−
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+
<meta charset="utf-8">
−
<meta name="description" content="" />
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
−
<meta name="keywords" content="" />
+
<link href="../layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
−
<noscript>
+
<style type="text/css">
−
<link rel="stylesheet" href="css/skel-noscript.css" />
+
/* DEMO ONLY */
−
<link rel="stylesheet" href="css/style.css" />
+
.container .demo{text-align:center;}
−
</noscript>
+
.container .demo div{padding:8px 0;}
−
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
+
.container .demo div:nth-child(odd){color:#FFFFFF; background:#CCCCCC;}
−
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
+
.container .demo div:nth-child(even){color:#FFFFFF; background:#979797;}
−
</head>
+
@media screen and (min-width:180px) and (max-width:900px){.container .demo div{margin-bottom:0;}}
−
<body class="homepage">
+
/* DEMO ONLY */
−
 
+
</style>
−
<!-- Header -->
+
</head>
−
<div id="header">
+
<body id="top">
−
<div class="container">
+
<!-- ################################################################################################ -->
−
+
<!-- ################################################################################################ -->
−
<!-- Logo -->
+
<!-- ################################################################################################ -->
−
<div id="logo">
+
<!-- Top Background Image Wrapper -->
−
<h1><a href="#">Monochromed</a></h1>
+
<div class="row100 bgded" style="background-image:url('../images/demo/backgrounds/01.png');">  
−
<span>Design by TEMPLATED</span>
+
  <!-- ################################################################################################ -->
−
</div>
+
  <!-- ################################################################################################ -->
−
+
  <!-- ################################################################################################ -->
−
<!-- Nav -->
+
  <div class="wrapper row0">
−
<nav id="nav">
+
    <div id="topbar" class="clear">  
−
<ul>
+
      <!-- ################################################################################################ -->
−
<li class="active"><a href="index.html">Homepage</a></li>
+
      <div class="fl_left">
−
<li><a href="threecolumn.html">Two Sidebars</a></li>
+
        <ul class="nospace inline">
−
<li><a href="twocolumn1.html">Left Sidebar</a></li>
+
          <li><i class="fa fa-phone"></i> +00 (123) 456 7890</li>
−
<li><a href="twocolumn2.html">Right Sidebar</a></li>
+
          <li><i class="fa fa-envelope-o"></i> info@domain.com</li>
−
<li><a href="onecolumn.html">No Sidebar</a></li>
+
        </ul>
−
</ul>
+
      </div>
−
</nav>
+
      <div class="fl_right">
−
 
+
        <ul class="faico clear">
−
</div>
+
          <li><a class="faicon-facebook" href="#"><i class="fa fa-facebook"></i></a></li>
−
</div>
+
          <li><a class="faicon-pinterest" href="#"><i class="fa fa-pinterest"></i></a></li>
−
<!-- Header -->
+
          <li><a class="faicon-twitter" href="#"><i class="fa fa-twitter"></i></a></li>
−
+
          <li><a class="faicon-dribble" href="#"><i class="fa fa-dribbble"></i></a></li>
−
<!-- Main -->
+
          <li><a class="faicon-linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
−
<div id="main">
+
          <li><a class="faicon-google-plus" href="#"><i class="fa fa-google-plus"></i></a></li>
−
<div class="container">
+
          <li><a class="faicon-rss" href="#"><i class="fa fa-rss"></i></a></li>
−
<header>
+
        </ul>
−
<h2>Gravida nibh quis urna</h2>
+
      </div>
−
</header>
+
      <!-- ################################################################################################ -->
−
<div class="row">
+
    </div>
−
<div class="3u">
+
  </div>
−
<section>
+
  <!-- ################################################################################################ -->
−
<a href="#" class="image full"><img src="images/pics01.jpg" alt="" /></a>
+
  <!-- ################################################################################################ -->
−
<p>Quisque dictum. Pellentesque viverra  enim. Integer nisl risus, sagittis convallis, rutrum id, elementum.</p>
+
  <!-- ################################################################################################ -->
−
<a href="#" class="button">Read More</a>
+
  <div class="wrapper row1">
−
</section>
+
    <header id="header" class="clear">  
−
</div>
+
      <!-- ################################################################################################ -->
−
<div class="3u">
+
      <div id="logo" class="fl_left">
−
<section>
+
        <h1><a href="../index.html">Optimal</a></h1>
−
<a href="#" class="image full"><img src="images/pics11.jpg" alt="" /></a>
+
      </div>
−
<p>Pellentesque viverra  enim. Tristique ante ut risus. Quisque dictum. Integer sagittis convallis elementum.</p>
+
      <nav id="mainav" class="fl_right">
−
<a href="#" class="button">Read More</a>
+
        <ul class="clear">
−
</section>
+
          <li><a href="../index.html">Home</a></li>
−
</div>
+
          <li class="active"><a class="drop" href="#">Pages</a>
−
<div class="3u">
+
            <ul>
−
<section>
+
              <li><a href="gallery.html">Gallery</a></li>
−
<a href="#" class="image full"><img src="images/pics12.jpg" alt="" /></a>
+
              <li><a href="full-width.html">Full Width</a></li>
−
<p>Pellentesque viverra  enim. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum.</p>
+
              <li><a href="sidebar-left.html">Sidebar Left</a></li>
−
<a href="#" class="button">Read More</a>
+
              <li><a href="sidebar-right.html">Sidebar Right</a></li>
−
</section>
+
              <li class="active"><a href="basic-grid.html">Basic Grid</a></li>
−
</div>
+
            </ul>
−
<div class="3u">
+
          </li>
−
<section>
+
          <li><a class="drop" href="#">Dropdown</a>
−
<a href="#" class="image full"><img src="images/pics13.jpg" alt="" /></a>
+
            <ul>
−
<p>Tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis elementum.</p>
+
              <li><a href="#">Level 2</a></li>
−
<a href="#" class="button">Read More</a>
+
              <li><a class="drop" href="#">Level 2 + Drop</a>
−
</section>
+
                <ul>
−
</div>
+
                  <li><a href="#">Level 3</a></li>
−
</div>
+
                  <li><a href="#">Level 3</a></li>
−
<div class="divider">&nbsp;</div>
+
                </ul>
−
<div class="row">
+
              </li>
−
+
            </ul>
−
<!-- Content -->
+
          </li>
−
<div class="8u skel-cell-important">
+
          <li><a href="#">Link Text</a></li>
−
<section id="content">
+
          <li><a href="#">Link Text</a></li>
−
<header>
+
        </ul>
−
<h2>Integer gravida nibh quis urna</h2>
+
      </nav>
−
<span class="byline">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum</span>
+
      <!-- ################################################################################################ -->
−
</header>
+
    </header>
−
<p><a href="#" class="image full"><img src="images/pics02.jpg" alt=""></a></p>
+
  </div>
−
<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>
+
  <!-- ################################################################################################ -->
−
<a href="#" class="button">Read More</a>
+
  <!-- ################################################################################################ -->
−
</section>
+
  <!-- ################################################################################################ -->
−
</div>
+
</div>
−
<!-- /Content -->
+
<!-- End Top Background Image Wrapper -->
−
+
<!-- ################################################################################################ -->
−
<!-- Sidebar -->
+
<!-- ################################################################################################ -->
−
<div id="sidebar" class="4u">
+
<!-- ################################################################################################ -->
−
<section>
+
<div class="wrapper row2">
−
<header>
+
  <div id="breadcrumb" class="clear">  
−
<h2>Gravida praesent</h2>
+
    <!-- ################################################################################################ -->
−
<span class="byline">Praesent lacus congue rutrum</span>
+
    <ul>
−
</header>
+
      <li><a href="#">Home</a></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><a href="#">Lorem</a></li>
−
<ul class="default">
+
      <li><a href="#">Ipsum</a></li>
−
<li><a href="#">Pellentesque quis lectus gravida blandit.</a></li>
+
      <li><a href="#">Dolor</a></li>
−
<li><a href="#">Lorem ipsum consectetuer adipiscing elit.</a></li>
+
    </ul>
−
<li><a href="#">Phasellus nec nibh pellentesque congue.</a></li>
+
    <!-- ################################################################################################ -->
−
<li><a href="#">Cras aliquam risus pellentesque pharetra.</a></li>
+
  </div>
−
<li><a href="#">Duis non metus commodo euismod lobortis.</a></li>
+
</div>
−
<li><a href="#">Lorem ipsum dolor adipiscing elit.</a></li>
+
<!-- ################################################################################################ -->
−
</ul>
+
<!-- ################################################################################################ -->
−
</section>
+
<!-- ################################################################################################ -->
−
</div>
+
<div class="wrapper row3">
−
<!-- Sidebar -->
+
  <main class="container clear">  
−
+
    <!-- main body -->
−
</div>
+
    <!-- ################################################################################################ -->
−
+
    <div class="content">  
−
</div>
+
      <!-- ################################################################################################ -->
−
</div>
+
      <h2>Half</h2>
−
<!-- Main -->
+
      <!-- ################################################################################################ -->
−
 
+
      <div class="group btmspace-50 demo">
−
<!-- Footer -->
+
        <div class="one_half first">1/2</div>
−
<div id="footer">
+
        <div class="one_half">1/2</div>
−
<div class="container">
+
      </div>
−
<div class="row">
+
      <!-- ################################################################################################ -->
−
<div class="3u">
+
      <h2>Quarter</h2>
−
<section>
+
      <!-- ################################################################################################ -->
−
<ul class="style1">
+
      <div class="group btmspace-50 demo">
−
<li><img src="images/pics05.jpg" width="78" height="78" alt="">
+
        <div class="one_quarter first">1/4</div>
−
<p>Nullam non wisi a sem eleifend. Donec mattis libero eget urna. </p>
+
        <div class="one_quarter">1/4</div>
−
<p class="posted">August 11, 2014  |  (10 )  Comments</p>
+
        <div class="one_quarter">1/4</div>
−
</li>
+
        <div class="one_quarter">1/4</div>
−
<li><img src="images/pics06.jpg" width="78" height="78" alt="">
+
      </div>
−
<p>Nullam non wisi a sem eleifend. Donec mattis libero eget urna. </p>
+
      <div class="group btmspace-50 demo">
−
<p class="posted">August 11, 2014  |  (10 )  Comments</p>
+
        <div class="one_quarter first">1/4</div>
−
</li>
+
        <div class="one_quarter">1/4</div>
−
<li><img src="images/pics07.jpg" width="78" height="78" alt="">
+
        <div class="two_quarter">2/4 or 1/2</div>
−
<p>Nullam non wisi a sem eleifend. Donec mattis libero eget urna. </p>
+
      </div>
−
<p class="posted">August 11, 2014  |  (10 )  Comments</p>
+
      <div class="group btmspace-50 demo">
−
</li>
+
        <div class="one_quarter first">1/4</div>
−
</ul>
+
        <div class="three_quarter">3/4</div>
−
</section>
+
      </div>
−
</div>
+
      <!-- ################################################################################################ -->
−
<div class="3u">
+
      <h2>Third</h2>
−
<section>
+
      <!-- ################################################################################################ -->
−
<ul class="style1">
+
      <div class="group btmspace-50 demo">
−
<li class="first"><img src="images/pics08.jpg" width="78" height="78" alt="">
+
        <div class="one_third first">1/3</div>
−
<p>Nullam non wisi a sem eleifend. Donec mattis libero eget urna. </p>
+
        <div class="one_third">1/3</div>
−
<p class="posted">August 11, 2014  |  (10 )  Comments</p>
+
        <div class="one_third">1/3</div>
−
</li>
+
      </div>
−
<li><img src="images/pics09.jpg" width="78" height="78" alt="">
+
      <div class="group demo">
−
<p>Nullam non wisi a sem eleifend. Donec mattis libero eget urna. </p>
+
        <div class="one_third first">1/3</div>
−
<p class="posted">August 11, 2014  |  (10 )  Comments</p>
+
        <div class="two_third">2/3</div>
−
</li>
+
      </div>
−
<li><img src="images/pics10.jpg" width="78" height="78" alt="">
+
      <!-- ################################################################################################ -->
−
<p>Nullam non wisi a sem eleifend. Donec mattis libero eget urna. </p>
+
    </div>
−
<p class="posted">August 11, 2014  |  (10 )  Comments</p>
+
    <!-- ################################################################################################ -->
−
</li>
+
    <!-- / main body -->
−
</ul>
+
    <div class="clear"></div>
−
</section>
+
  </main>
−
</div>
+
</div>
−
<div class="6u">
+
<!-- ################################################################################################ -->
−
<section>
+
<!-- ################################################################################################ -->
−
<header>
+
<!-- ################################################################################################ -->
−
<h2>Aenean elementum</h2>
+
<div class="wrapper row100 bgded" style="background-image:url('../images/demo/backgrounds/01.png');">
−
</header>
+
  <div class="overlay">
−
<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>
+
    <div id="newsletter" class="clear center">  
−
<ul class="default">
+
      <!-- ################################################################################################ -->
−
<li><a href="#">Pellentesque quis lectus gravida blandit.</a></li>
+
      <h2 class="uppercase font-x3 btmspace-50">Subscribe to our newsletter</h2>
−
<li><a href="#">Lorem ipsum consectetuer adipiscing elit.</a></li>
+
      <form class="inline clear" method="post" action="#">
−
<li><a href="#">Phasellus nec nibh pellentesque congue.</a></li>
+
        <input type="text" value="" placeholder="Email Here">
−
<li><a href="#">Cras aliquam risus pellentesque pharetra.</a></li>
+
        <button class="btn" type="submit" title="Submit">Submit</button>
−
<li><a href="#">Duis non metus commodo euismod lobortis.</a></li>
+
      </form>
−
<li><a href="#">Lorem ipsum dolor adipiscing elit.</a></li>
+
      <!-- ################################################################################################ -->
−
</ul>
+
    </div>
−
</section>
+
  </div>
−
</div>
+
</div>
−
</div>
+
<!-- ################################################################################################ -->
−
</div>
+
<!-- ################################################################################################ -->
−
</div>
+
<!-- ################################################################################################ -->
−
<!-- Footer -->
+
<div class="wrapper row4">
−
 
+
  <footer id="footer" class="clear">
−
<!-- Copyright -->
+
    <!-- ################################################################################################ -->
−
<div id="copyright">
+
    <div class="one_quarter first">
−
<div class="container">
+
      <h6 class="title">Company Details</h6>
−
Design: <a href="http://templated.co">TEMPLATED</a> Images: <a href="http://unsplash.com">Unsplash</a> (<a href="http://unsplash.com/cc0">CC0</a>)
+
      <address class="btmspace-15">
−
</div>
+
      Company Name<br>
−
</div>
+
      Street Name &amp; Number<br>
−
 
+
      Town<br>
−
</body>
+
      Postcode/Zip
 +
      </address>
 +
      <ul class="nospace">
 +
        <li class="btmspace-10"><span class="fa fa-phone"></span> +00 (123) 456 7890</li>
 +
        <li><span class="fa fa-envelope-o"></span> info@domain.com</li>
 +
      </ul>
 +
    </div>
 +
    <div class="one_quarter">
 +
      <h6 class="title">From The Blog</h6>
 +
      <article>
 +
        <h2 class="nospace font-x1"><a href="#">Maecenas pretium</a></h2>
 +
        <time class="smallfont" datetime="2045-04-06">Friday, 6<sup>th</sup> April 2045</time>
 +
        <p>Vestibulumaccumsan egestibulum eu justo convallis augue estas aenean elit intesque sed.</p>
 +
      </article>
 +
    </div>
 +
    <div class="one_quarter">
 +
      <h6 class="title">Sed consectetur enim</h6>
 +
      <ul class="nospace linklist">
 +
        <li><a href="#">Nullam id est condimen</a></li>
 +
        <li><a href="#">Praesent eget purus ut</a></li>
 +
        <li><a href="#">Ut quis augue quis neque</a></li>
 +
        <li><a href="#">Quisque varius erat sed</a></li>
 +
        <li><a href="#">Fusce quis dolor et</a></li>
 +
      </ul>
 +
    </div>
 +
    <div class="one_quarter">
 +
      <h6 class="title">Proin et magna eget</h6>
 +
      <ul class="nospace linklist">
 +
        <li><a href="#">Vivamus semper lorem</a></li>
 +
        <li><a href="#">Morbi facilisis dui</a></li>
 +
        <li><a href="#">Maecenas eu massa</a></li>
 +
        <li><a href="#">Praesent iaculis</a></li>
 +
        <li><a href="#">Praesent molestie</a></li>
 +
      </ul>
 +
    </div>
 +
    <!-- ################################################################################################ -->
 +
  </footer>
 +
</div>
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<div class="wrapper row5">
 +
  <div id="copyright" class="clear">  
 +
    <!-- ################################################################################################ -->
 +
    <p class="fl_left">Copyright &copy; 2015 - 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>
 +
    <!-- ################################################################################################ -->
 +
  </div>
 +
</div>
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
 +
<!-- JAVASCRIPTS -->
 +
<script src="../layout/scripts/jquery.min.js"></script>
 +
<script src="../layout/scripts/jquery.backtotop.js"></script>
 +
<!-- IE9 Placeholder Support -->
 +
<script src="../layout/scripts/jquery.placeholder.min.js"></script>
 +
<!-- / IE9 Placeholder Support -->
 +
</body>
 
</html>
 
</html>

Revision as of 00:10, 28 July 2015

{

Optimal | Pages | Basic Grid

  • +00 (123) 456 7890
  • info@domain.com

Half

1/2
1/2

Quarter

1/4
1/4
1/4
1/4
1/4
1/4
2/4 or 1/2
1/4
3/4

Third

1/3
1/3
1/3
1/3
2/3

Subscribe to our newsletter