index.html

<html>
<head>
  <meta charset="UTF-8">

  <script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>

  <!-- <script language="javascript" type="text/javascript" src="libraries/p5.sound.min.js"></script> -->
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>


  <link rel="stylesheet" href="style.css">
  

</head>

<body>
    <div class="title">Sonic Urban Transformations</div>

    <!-- the overall view container with padding -->
    <div class="viewContainer container">


      <!-- <button class = "buttonP1"onclick="MyFunction()">PHASE 1</button> -->

        <div class="phaseContainer item">

          <!-- <button class = "buttonP1">Initial PHASE 1</button>
          
            <button class = "buttonP2">PHASE 2 Part I</button>
          
            <button class = "buttonP2">PHASE 2 Part II</button>
          
            <button class = "buttonP3">PHASE 3 Part I</button> -->
         
        </div>

        <div class="timeContainer item">
            <div id="timeSVGContainer">
                <object id="timelineSVG" data="assets/timeLines.svg" type="image/svg+xml"></object>
            </div>
        </div>

        <div class="pathLinearContainer item">
            
            <div id="p5-sketch-Container">
              <!-- Our sketch will go here! -->
            </div>
        </div>
        
<!--         <div class="photoContainer item">
        </div> --> 
        <div id="mapboxContainer"></div>   

    </div>
  <script type="text/javascript" src="finalProject.js" ></script>     
</body>
</html>