<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML Example</title> <meta name="description" content="TimelineJS example"> <!-- CSS --> <link href="../compiled/css/timeline.css" rel="stylesheet"> <style> html, body { height:100%; padding: 0px; margin: 0px; } </style> <!-- JavaScript --> <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> </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>