index.html

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Website Bookmarker</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>

  <body onload ="fetchBookmarks()">

    <div class="container">
      <div class="header clearfix">
        <nav class = "text-muted">
        </nav>
        </div>
        <h3 >Website BookMarker</h3>
        <div class ="jumbotron">
        <h2> Bookmark Your Favourite Sites </h2>
        <form id = "myForm">
        <div class = "form-group">
        <label> Site Name </label>
        <input type="text" class="form-control" id="siteName" placeholder = "Website Name">
        </div>
        <div class = "form-group">
        <label> Site Url </label>
        <input type="text" class="form-control" id="siteURL" placeholder = "Website URL">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
        </form></div>


      <div class="row marketing">
        <div class="col-lg-12">
         <div id="bookmarksResult"></div>
        </div>
        </div>

        

      <footer class="footer">
        <p>&copy; 2016 Bookmarker, Inc.</p>
      </footer>

    </div> <!-- /container -->

    <script
    src="http://code.jquery.com/jquery-3.1.1.js"
    integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
    crossorigin="anonymous"></script>
    <script src = "bootstrap.min.js"></script>
    <script src="main.js"></script>
  </body>