timeline.html

<!DOCTYPE html>
<html>
  <head>
    <title>timeline</title>
    <style>
      /* Define the styles for the canvas */
      #canvas {
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>


            <!-- 1 -->
        <link title="timeline-styles" rel="stylesheet" 
              href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">

        <!-- 2 -->
        <script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>

        <div id='timeline-embed' style="width: 100%; height: 600px"></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.
            timeline = new TL.Timeline('timeline-embed',
            'https://docs.google.com/spreadsheets/d/1bI-EnpEa2Mt6W0vKhT5l6s5RfGqoJlrWvd2K961A9kM/edit?usp=sharing');
        </script>
   

  </body>
</html>