Team:Fudan Lux/Notebook

From 2012.igem.org

(Difference between revisions)
Line 268: Line 268:
</div>
</div>
<!-- ENDS Menu -->  
<!-- ENDS Menu -->  
 +
 +
 +
 +
<!-- ENDS menu-holder -->
 +
<div id="menu-holder">
 +
<!-- wrapper-menu -->
 +
<div class="wrapper">
 +
<!-- Navigation -->
 +
<ul id="nav" class="sf-menu">
 +
<li><a href="index.html">Home<span class="subheader">Welcome</span></a></li>
 +
<li class="current-menu-item"><a href="features.html">Features<span class="subheader">Awesome options</span></a>
 +
<ul>
 +
 +
<li><a href="features-columns.html"><span> Columns layout</span></a></li>
 +
<li><a href="features-accordion.html"><span> Accordion</span></a></li>
 +
<li><a href="features-toggle.html"><span> Toggle box</span></a></li>
 +
<li><a href="features-tabs.html"><span> Tabs</span></a></li>
 +
<li><a href="features-infobox.html"><span> Text box</span></a></li>
 +
<li><a href="features-monobox.html"><span> Icons</span></a></li>
 +
</ul>
 +
</li>
 +
<li><a href="blog.html">Blog<span class="subheader">Read our posts</span></a></li>
 +
<li><a href="portfolio.html">Portfolio <span class="subheader">Showcase work</span></a></li>
 +
<li><a href="gallery.html">Gallery<span class="subheader">Featured work</span></a>
 +
<ul>
 +
<li><a href="gallery.html"><span> Four columns</span></a></li>
 +
<li><a href="gallery-3.html"><span> Three columns </span></a></li>
 +
<li><a href="gallery-2.html"><span> Two columns </span></a></li>
 +
<li><a href="video-gallery.html"><span> Video gallery </span></a></li>
 +
</ul>
 +
</li>
 +
<li><a href="contact.html">Contact<span class="subheader">Get in touch</span></a></li>
 +
</ul>
 +
<!-- Navigation -->
 +
</div>
 +
<!-- wrapper-menu -->
 +
</div>
 +
<!-- ENDS menu-holder -->
 +
</div>
 +
<!-- ENDS Menu -->
Line 284: Line 324:
<!-- title -->
<!-- title -->
<div id="page-title">
<div id="page-title">
-
<span class="title">Notebook</span>
+
<span class="title">Features</span>
-
<span class="subtitle">Record of iGEM</span>
+
<span class="subtitle">Tabs</span>
</div>
</div>
<!-- ENDS title -->
<!-- ENDS title -->
Line 291: Line 331:
<!-- page-content -->
<!-- page-content -->
<div id="page-content">
<div id="page-content">
 +
 +
<!-- TABS -->
 +
<!-- the tabs -->
 +
<ul class="tabs">
 +
<li><a href="#"><span>Tab number 1</span></a></li>
 +
<li><a href="#"><span>Tab number 2</span></a></li>
 +
<li><a href="#"><span>Tab number 3</span></a></li>
 +
 +
</ul>
-
<div class="accordion">
+
<!-- tab "panes" -->
-
<h6><a href="#">Section 1</a></h6>
+
<div class="panes">
-
<div >
+
-
<div class="post-post-thumbnail">
+
<!-- tab 1 content  -->
-
<img src="https://static.igem.org/mediawiki/igem.org/6/69/Cloudnote.png" alt="labcloud" style="width:600px">
+
-
</div>
+
-
<p>
+
-
Mauris mauris ante,<i> blandit et</i>, ultrices a, suscipit eget, quam. Integer
+
-
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
+
-
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
+
-
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
+
-
saaaaaddddddddddddd
+
-
<br>
+
-
<br>
+
-
</p>
+
-
</div>
+
-
<h6><a href="#">Section 2</a></h6>
+
<div>
<div>
-
<p>
+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
-
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
+
-
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
+
-
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
+
-
suscipit faucibus urna.
+
-
</p>
+
</div>
</div>
-
<h6><a href="#">Section 3</a></h6>
+
<!-- ENDS tab 1 content -->
 +
 +
<!-- tab 2 content  -->
<div>
<div>
-
<p>
+
<h1>HTML Ipsum Presents</h1>
-
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
+
     
-
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
+
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
-
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
+
-
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
+
<h2>Header Level 2</h2>
-
</p>
+
     
 +
<ol>
 +
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
 +
  <li>Aliquam tincidunt mauris eu risus.</li>
 +
</ol>
 +
 +
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
 +
 +
<h3>Header Level 3</h3>
 +
<ul>
<ul>
-
<li>List item one</li>
+
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
-
<li>List item two</li>
+
  <li>Aliquam tincidunt mauris eu risus.</li>
-
<li>List item three</li>
+
</ul>
</ul>
 +
 +
<pre><code>
 +
#header h1 a {
 +
display: block;
 +
width: 300px;
 +
height: 80px;
 +
}
 +
</code></pre>
 +
           
</div>
</div>
-
<h6><a href="#">Section 4</a></h6>
+
<!-- ENDS tab 2 content -->
 +
 +
<!-- tab 3 content  -->
<div>
<div>
-
<p>
+
<dl>
-
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
+
  <dt>Definition list</dt>
-
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
+
  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
+
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-
mauris vel est.
+
commodo consequat.</dd>
-
</p>
+
  <dt>Lorem ipsum dolor sit amet</dt>
-
<p>
+
  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
+
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+
commodo consequat.</dd>
-
inceptos himenaeos.
+
</dl>
-
</p>
+
</div>
</div>
-
<h6><a href="#">Section 1</a></h6>
+
<!-- ENDS tab 3 content -->
-
<div>
+
-
<p>
+
-
Mauris mauris ante,<i> blandit et</i>, ultrices a, suscipit eget, quam. Integer
+
-
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
+
-
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
+
-
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
+
-
</p>
+
-
</div>
+
-
<h6><a href="#">Section 1</a></h6>
+
-
<div>
+
-
<p>
+
-
Mauris mauris ante,<i> blandit et</i>, ultrices a, suscipit eget, quam. Integer
+
-
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
+
-
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
+
-
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
+
-
</p>
+
-
</div>
+
-
<h6><a href="#">Section 1</a></h6>
+
-
<div>
+
-
<p>
+
-
Mauris mauris ante,<i> blandit et</i>, ultrices a, suscipit eget, quam. Integer
+
-
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
+
-
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
+
-
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
+
-
</p>
+
-
</div>
+
-
<h6><a href="#">Section 1</a></h6>
+
-
<div>
+
-
<p>
+
-
Mauris mauris ante,<i> blandit et</i>, ultrices a, suscipit eget, quam. Integer
+
-
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
+
-
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
+
-
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
+
-
</p>
+
-
</div>
+
-
 
+
</div>
</div>
-
+
<!-- ENDS TABS -->
 +
 +
</div>
</div>
<!-- ENDS page-content -->
<!-- ENDS page-content -->

Revision as of 12:00, 25 September 2012

NOVA

Features Tabs

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

HTML Ipsum Presents

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 2

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Header Level 3

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.

									#header h1 a { 
										display: block; 
										width: 300px; 
										height: 80px; 
									}
Definition list
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Tweets
    2011 Nova all rights reserved. Luiszuno.com

    Retrieved from "http://2012.igem.org/Team:Fudan_Lux/Notebook"