index.html

﻿<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

    <!-- Custom Styles -->
    <link rel="stylesheet" type="text/css" href="/Styles/images.css">

    <!-- Custom Scripts -->
    <script src="/Scripts/loadNav.js"></script>

    <script type="text/javascript">
    //function to load the navbar into the nav-placeholder div
    function loadNav() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("nav-placeholder").innerHTML = this.responseText;
        }
      };
      xhttp.open("GET", "/Components/nav.html", true);
      xhttp.send();
    }    
    </script>

    <title>Hello, world!</title>
  </head>

  <body>
    <div id="nav-placeholder"></div>
  </body>
</html>