Team:Harvard/Human Practices/Timeline

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
{{:Team:Harvard/Template:CSS}}
{{:Team:Harvard/Template:CSS}}
{{:Team:Harvard/Template:Bar}}
{{:Team:Harvard/Template:Bar}}
 +
<head>
 +
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 +
 +
 +
 +
<title>jQuery Timeline 0.9.3 - Dando vida al tiempo</title>
 +
 +
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
 +
 +
 +
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
 +
 +
<script src="js/jquery.timelinr-0.9.3.js" type="text/javascript"></script>
 +
 +
<script type="text/javascript">
 +
 +
$(function(){
 +
 +
$().timelinr()
 +
 +
});
 +
 +
</script>
 +
 +
</head>
 +
<div class="whitebox">
<div class="whitebox">
<h1>Zinc Finger History Timeline</h1>
<h1>Zinc Finger History Timeline</h1>
 +
 +
<div id="timeline">
 +
 +
<ul id="dates">
 +
 +
<li><a href="#">1900</a></li>
 +
 +
<li><a href="#">1930</a></li>
 +
 +
<li><a href="#">1944</a></li>
 +
 +
<li><a href="#">1950</a></li>
 +
 +
<li><a href="#">1971</a></li>
 +
 +
<li><a href="#">1977</a></li>
 +
 +
<li><a href="#">1989</a></li>
 +
 +
<li><a href="#">1999</a></li>
 +
 +
<li><a href="#">2001</a></li>
 +
 +
<li><a href="#">2011</a></li>
 +
 +
</ul>
 +
 +
<ul id="issues">
 +
 +
<li id="#1900">
 +
 +
<img src="images/1.png" width="256" height="256" />
 +
 +
<h1>1900</h1>
 +
 +
<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
 +
 +
</li>
 +
 +
<li id="#1930">
 +
 +
<img src="images/2.png" width="256" height="256" />
 +
 +
<h1>1930</h1>
 +
 +
<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
 +
 +
</li>
 +
 +
<li id="#1944">
 +
 +
<img src="images/3.png" width="256" height="256" />
 +
 +
<h1>1944</h1>
 +
 +
<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
 +
 +
</li>
 +
 +
<li id="#1950">
 +
 +
<img src="images/4.png" width="256" height="256" />
 +
 +
<h1>1950</h1>
 +
 +
<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
 +
 +
</li>
 +
 +
<li id="#1971">
 +
 +
<img src="images/5.png" width="256" height="256" />
 +
 +
<h1>1971</h1>
 +
 +
<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
 +
 +
</li>
 +
 +
<li id="#1977">
 +
 +
<img src="images/6.png" width="256" height="256" />
 +
 +
<h1>1977</h1>
 +
 +
<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
 +
 +
</li>
 +
 +
<li id="#1989">
 +
 +
<img src="images/7.png" width="256" height="256" />
 +
 +
<h1>1989</h1>
 +
 +
<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
 +
 +
</li>
 +
 +
<li id="#1999">
 +
 +
<img src="images/8.png" width="256" height="256" />
 +
 +
<h1>1999</h1>
 +
 +
<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
 +
 +
</li>
 +
 +
<li id="#2001">
 +
 +
<img src="images/9.png" width="256" height="256" />
 +
 +
<h1>2001</h1>
 +
 +
<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
 +
 +
</li>
 +
 +
<li id="#2011">
 +
 +
<img src="images/10.png" width="256" height="256" />
 +
 +
<h1>2011</h1>
 +
 +
<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
 +
 +
</li>
 +
 +
</ul>
 +
 +
<div id="grad_left"></div>
 +
 +
<div id="grad_right"></div>
 +
 +
<a href="#" id="next">+</a>
 +
 +
<a href="#" id="prev">-</a>
 +
 +
</div>
 +
 +
 +
 +
</div>
</div>

Revision as of 04:46, 27 October 2011

bar

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


<title>jQuery Timeline 0.9.3 - Dando vida al tiempo</title>

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

<script src="js/jquery.timelinr-0.9.3.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

$().timelinr()

});

</script>

</head>

Contents

Zinc Finger History Timeline

  • <a href="#">1900</a>
  • <a href="#">1930</a>
  • <a href="#">1944</a>
  • <a href="#">1950</a>
  • <a href="#">1971</a>
  • <a href="#">1977</a>
  • <a href="#">1989</a>
  • <a href="#">1999</a>
  • <a href="#">2001</a>
  • <a href="#">2011</a>
  • <img src="images/1.png" width="256" height="256" />

    1900

    Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.

  • <img src="images/2.png" width="256" height="256" />

    1930

    Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.

  • <img src="images/3.png" width="256" height="256" />

    1944

    Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.

  • <img src="images/4.png" width="256" height="256" />

    1950

    Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.

  • <img src="images/5.png" width="256" height="256" />

    1971

    Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.

  • <img src="images/6.png" width="256" height="256" />

    1977

    Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.

  • <img src="images/7.png" width="256" height="256" />

    1989

    Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.

  • <img src="images/8.png" width="256" height="256" />

    1999

    Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.

  • <img src="images/9.png" width="256" height="256" />

    2001

    Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.

  • <img src="images/10.png" width="256" height="256" />

    2011

    Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.

<a href="#" id="next">+</a>

<a href="#" id="prev">-</a>



Retrieved from "http://2011.igem.org/Team:Harvard/Human_Practices/Timeline"