https://woodwardtw.github.io/timeline.html

1<!DOCTYPE HTML>
2<html>
3	<head>
4		<title>The Timeline</title>
5		<link rel="stylesheet" href="css/timeliner.css" type="text/css" media="screen">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7
8		

8<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

8
9		

9<script type="text/javascript" src="js/timeliner.min.js"></script>

9
10		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
11		<link href="css/me.css" rel="stylesheet">
12		<style type="text/css">
13		body {
14			background-color: #424242;
15
16		}
17		h2.timeline-time {
18			color: #fff;
19		}
20
21	
22
23		</style>
24    <link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'>
25    <link href='https://fonts.googleapis.com/css?family=Raleway:600,900' rel='stylesheet' type='text/css'>
26     <link title="timeline-styles" rel="stylesheet" href="js/timeline/css/timeline.css">
27
28    <!-- 2 -->
29    

29<script src="js/timeline/js/timeline.js"></script>

29
30	</head>
31   <body>
32   <!--
33	I've always appreciated secret messages in the source of pages. 
34   -->
35   <nav class="navbar navbar-default navbar-fixed-top">
36        <h2 id="title-header"><a href="./">Tom Woodward</a></h2>
37  <div class="container">
38    <!-- Brand and toggle get grouped for better mobile display -->
39    <div class="navbar-header">
40      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
41        <span class="sr-only">Toggle navigation</span>
42        <span class="icon-bar"></span>
43        <span class="icon-bar"></span>
44        <span class="icon-bar"></span>
45      </button>
46      <!--<a class="navbar-brand" href="#">Tom Woodward</a> -->
47    </div>
48
49    <!-- Collect the nav links, forms, and other content for toggling -->
50    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
51      <ul class="nav navbar-nav">
52        <li><a href="photos.html">Photos</a></li>
53        <li><a href="presentations.html">Presentations</a></li>
54        <li class="active"><a href="timeline.html">Work Timeline</a></li>
55      </ul>
56    </div><!-- /.navbar-collapse -->
57  </div><!-- /.container-fluid -->
58</nav>
59   	
60
61   
62
63    <div id='timeline-embed' style="width: 100%; height: 600px; margin-top:70px;" ></div>
64
65    <!-- 3 -->
66    

66<script type="text/javascript">
67      // The TL.Timeline constructor takes at least two arguments:
68      // the id of the Timeline container (no '#'), and
69      // the URL to your JSON data file or Google spreadsheet.
70      // the id must refer to an element "above" this code,
71      // and the element must have CSS styling to give it width and height
72      // optionally, a third argument with configuration options can be passed.
73      // See below for more about options.
74      timeline = new TL.Timeline('timeline-embed',
75        'https://docs.google.com/spreadsheets/d/19NVM8Uol0un2-qInUHgU8avJTNPbBP478zPdRPhIHXs/pubhtml');
76    </script>

76
77        
78		      
79
80</div>
81 

81<script src="vendor/twbs/bootstrap/dist/js/bootstrap.min.js"></script>

81
82    

82<script src="vendor/twbs/bootstrap/dist/js/salvattore.min.js"></script>

82   
83      

83<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

83
84   </body>	
85</html>