"
The main text goes here. You can have p tags or anything really.
Team:Heidelberg LSL/Notebook timeline
From 2012hs.igem.org
(Difference between revisions)
| Line 15: | Line 15: | ||
/--> | /--> | ||
<html> | <html> | ||
| - | <link | + | |
| - | <style> | + | <link href="../compiled/css/timeline.css" rel="stylesheet"> |
| + | <style> | ||
| + | html, body { | ||
| + | height:100%; | ||
| + | padding: 0px; | ||
| + | margin: 0px; | ||
| + | } | ||
| + | </style> | ||
<style type="text/css"> | <style type="text/css"> | ||
| Line 23: | Line 30: | ||
font-size: 12px;} | font-size: 12px;} | ||
</style> | </style> | ||
| + | |||
| + | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | ||
| + | <script type="text/javascript" src="../compiled/js/timeline-min.js"></script> | ||
| + | <script> | ||
| + | $(document).ready(function() { | ||
| + | var timeline = new VMM.Timeline(); | ||
| + | timeline.init(); | ||
| + | }); | ||
| + | </script> | ||
<body id="home" onload="setPageSize()"> | <body id="home" onload="setPageSize()"> | ||
| Line 31: | Line 47: | ||
<div id="SubWrapper"> | <div id="SubWrapper"> | ||
| - | <div id=" | + | <div id="timeline"> |
| - | + | ||
| - | + | <section> <!-- Timeline Start Screen --> | |
| - | + | <time>1977,5,11</time> <!-- Timeline Begins Date --> | |
| - | + | <h2>The Main Timeline Headline</h2> <!-- Main Headline --> | |
| - | + | <article> <!-- Main Text --> | |
| - | + | <p>The main text goes here. You can have p tags or anything really.</p> | |
| - | + | </article> | |
| - | + | <figure> | |
| + | <img src="../taylor/final.jpg"> <!-- Media, can also be a link to youtube video etc (optional) --> | ||
| + | <cite>John Doe/Millennium Magazine</cite> <!-- Credit for media (optional) --> | ||
| + | <figcaption>Caption goes here.</figcaption> <!-- Caption for media (optional) --> | ||
| + | </figure> | ||
| + | </section> | ||
| + | |||
| + | <ul> | ||
| + | |||
| + | <!-- Event --> | ||
| + | <li> | ||
| + | <time>1978,5,11</time> <!-- Event Date --> | ||
| + | <time>1978,8,11</time> <!-- End of Event (optional) --> | ||
| + | <h3>Headline Goes Here</h3> <!-- Headline --> | ||
| + | <article> <!-- Main Text --> | ||
| + | <p>The main text goes here. You can have p tags too.</p> | ||
| + | </article> | ||
| + | <figure> | ||
| + | <img src="../taylor/final.jpg"> <!-- Media, can also be a link to youtube video etc (optional) --> | ||
| + | <cite>John Doe/Millennium Magazine</cite> <!-- Credit for media (optional) --> | ||
| + | <figcaption>Caption goes here.</figcaption> <!-- Caption for media (optional) --> | ||
| + | </figure> | ||
| + | </li> | ||
| + | <!-- / Event --> | ||
| + | |||
| + | <li> | ||
| + | <time>1978,5,13</time> | ||
| + | <time>1978,5,19</time> | ||
| + | <h3>Headline Goes Here</h3> | ||
| + | <article> | ||
| + | <p>The main text goes here. You can have p tags too.</p> | ||
| + | </article> | ||
| + | <figure> | ||
| + | <a href="http://youtu.be/vjVfu8-Wp6s">Anything</a> | ||
| + | <cite>John Doe/Millennium Magazine</cite> | ||
| + | <figcaption>Caption goes here.</figcaption> | ||
| + | </figure> | ||
| + | </li> | ||
| + | <li> | ||
| + | <time>1978,5,16</time> | ||
| + | <time>1978,5,11</time> | ||
| + | <h3>Headline Goes Here</h3> | ||
| + | <article> | ||
| + | <p>The main text goes here. You can have p tags too.</p> | ||
| + | </article> | ||
| + | <figure> | ||
| + | <img src="../taylor/final.jpg"> | ||
| + | <cite>John Doe/Millennium Magazine</cite> | ||
| + | <figcaption>Caption goes here.</figcaption> | ||
| + | </figure> | ||
| + | </li> | ||
| + | <li> | ||
| + | <time>1978,5,18</time> | ||
| + | <h3>Headline Goes Here</h3> | ||
| + | <article> | ||
| + | <p>The main text goes here. You can have p tags too.</p> | ||
| + | </article> | ||
| + | <figure> | ||
| + | <img src="../taylor/final.jpg"> | ||
| + | <cite>John Doe/Millennium Magazine</cite> | ||
| + | <figcaption>Caption goes here.</figcaption> | ||
| + | </figure> | ||
| + | </li> | ||
| + | <li> | ||
| + | <time>1978,6,18</time> | ||
| + | <h3>Headline Goes Here</h3> | ||
| + | <article> | ||
| + | <p>The main text goes here. You can have p tags too.</p> | ||
| + | </article> | ||
| + | <figure> | ||
| + | <img src="../taylor/final.jpg"> | ||
| + | <cite>John Doe/Millennium Magazine</cite> | ||
| + | <figcaption>Caption goes here.</figcaption> | ||
| + | </figure> | ||
| + | </li> | ||
| + | <li> | ||
| + | <time>1978,5,19</time> | ||
| + | <h3>Headline Goes Here</h3> | ||
| + | <article> | ||
| + | <p>The main text goes here. You can have p tags too.</p> | ||
| + | </article> | ||
| + | <figure> | ||
| + | <img src="../taylor/final.jpg"> | ||
| + | <cite>John Doe/Millennium Magazine</cite> | ||
| + | <figcaption>Caption goes here.</figcaption> | ||
| + | </figure> | ||
| + | </li> | ||
| + | <li> | ||
| + | <time>1978,8,18</time> | ||
| + | <h3>Headline Goes Here</h3> | ||
| + | <article> | ||
| + | <p>The main text goes here. You can have p tags too.</p> | ||
| + | </article> | ||
| + | <figure> | ||
| + | <img src="../taylor/final.jpg"> | ||
| + | <cite>John Doe/Millennium Magazine</cite> | ||
| + | <figcaption>Caption goes here.</figcaption> | ||
| + | </figure> | ||
| + | </li> | ||
| + | <li> | ||
| + | <time>1979,8,18</time> | ||
| + | <h3>Headline Goes Here</h3> | ||
| + | <article> | ||
| + | <p>The main text goes here. You can have p tags too.</p> | ||
| + | </article> | ||
| + | <figure> | ||
| + | <img src="../taylor/final.jpg"> | ||
| + | <cite>John Doe/Millennium Magazine</cite> | ||
| + | <figcaption>Caption goes here.</figcaption> | ||
| + | </figure> | ||
| + | </li> | ||
| + | </ul> | ||
| + | |||
| + | |||
| + | </div> | ||
</div><!-- end SubWrapper --> | </div><!-- end SubWrapper --> | ||
</div><!-- end super_main_wrapper--> | </div><!-- end super_main_wrapper--> | ||
</body> | </body> | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| - | |||
| - | |||
| - | |||
| - | |||
function setPageSize() { | function setPageSize() { | ||
len = document.getElementById('super_main_wrapper').offsetHeight; | len = document.getElementById('super_main_wrapper').offsetHeight; | ||
Revision as of 21:09, 21 May 2012
The Main Timeline Headline
John Doe/Millennium Magazine
-
Headline Goes Here
The main text goes here. You can have p tags too.
John Doe/Millennium Magazine
Caption goes here. -
Headline Goes Here
The main text goes here. You can have p tags too.
Anything John Doe/Millennium Magazine Caption goes here. -
Headline Goes Here
The main text goes here. You can have p tags too.
John Doe/Millennium Magazine
Caption goes here. -
Headline Goes Here
The main text goes here. You can have p tags too.
John Doe/Millennium Magazine
Caption goes here. -
Headline Goes Here
The main text goes here. You can have p tags too.
John Doe/Millennium Magazine
Caption goes here. -
Headline Goes Here
The main text goes here. You can have p tags too.
John Doe/Millennium Magazine
Caption goes here. -
Headline Goes Here
The main text goes here. You can have p tags too.
John Doe/Millennium Magazine
Caption goes here. -
Headline Goes Here
The main text goes here. You can have p tags too.
John Doe/Millennium Magazine
Caption goes here.
