Beautifully crafted timelines that are easy and intuitive to use. http://timeline.knightlab.com/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

164 lines
4.8 KiB

13 years ago
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Timeline</title>
13 years ago
<meta name="description" content="Template Description">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- CSS -->
<link href="../../timeline.css" rel="stylesheet">
<style>
html, body {
height:100%;
padding: 0px;
margin: 0px;
}
</style>
13 years ago
<!-- JavaScript -->
<script type="text/javascript" src="../../jquery-min.js"></script>
<!-- <script type="text/javascript" src="jquery.mobile-1.0.min.js"></script> -->
<script type="text/javascript" src="../../timeline-min.js"></script>
<script>
$(document).ready(function() {
var timeline = new VMM.Timeline();
13 years ago
timeline.init();
});
</script>
</head>
<body>
<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>
</body>
</html>