<!DOCTYPE html>
<html>
  <head>
    <!-- 1 -->
     <link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
     <style type="text/css">
     .tl-timemarker .tl-timemarker-content-container {
       background-color: #e50000;
     }
     .tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline, .tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline p {
       color: #fff;
     }
     </style>
     <!-- 2 -->
     <script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>

     <div id='timeline-embed' style="width: 100%; height: 500px"></div>

     <!-- 3 -->
     <script type="text/javascript">
       // The TL.Timeline constructor takes at least two arguments:
       // the id of the Timeline container (no '#'), and
       // the URL to your JSON data file or Google spreadsheet.
       // the id must refer to an element "above" this code,
       // and the element must have CSS styling to give it width and height
       // optionally, a third argument with configuration options can be passed.
       // See below for more about options.
       var additionalOptions = {
              start_at_end: false,
              start_at_slide:0,
              scale_factor:0.75,
              default_bg_color: {r:255, g:255, b:255},
              timenav_height: 150
            }
       timeline = new TL.Timeline('timeline-embed',
         'https://docs.google.com/spreadsheets/d/1VLDzqJzMt7yB29pRsdO_HfDVbCXrdIHXP9R2LNDSE9c/pubhtml',additionalOptions);
     </script>
  <style> body {padding: 0; margin: 0;} </style>
  </head>
  <body>
  </body>
</html>