index.html

<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <!-- Site Properities -->
  <title>BBBS</title>
  <link rel="stylesheet" type="text/css" href="/bower_components/semantic/dist/semantic.min.css">

</head>
<body>

<h1 class="ui center aligned header">
  <a id="homeLink" href="#" class="ui image">
    <img src="/assets/images/logo.png" class="image">
  </a>
</h1>

<div class="ui container">
  <div class="ui fluid right labeled input left icon">
    <i class="search icon"></i>
    <input id="account_search" type="text" placeholder="Search for someone...">
    <div class="ui tag label">
      <a id="myAccount">My Account</a>
    </div>
  </div>
  <div class="ui fluid input left icon">
  </div>
</div>

<br>
<br>
<br>

<div class="ui container">
  <div id="results" class="ui relaxed divided items"></div>
  <div id="form" class="hide">
    <div id="formItems" class="ui relaxed divided items">
    </div>
    <div class="ui relaxed divided items">
      <div class="item ui input">
        <div id="addItem" class="ui teal button">Add Another</div>
        <div id="submit" class="ui teal button">Save</div>
      </div>
    </div>
    <div id="accountFormErrors" class="ui error message hide"></div>
    <br>
    <br>
  </div>
</div>

<!-- Content JS HERE !-->
<style>
  .last.container {
    margin-bottom: 300px !important;
  }
  h1.ui.center.header {
    margin-top: 3em;
  }
  h2.ui.center.header {
    margin: 4em 0em 2em;
  }
  h3.ui.center.header {
    margin-top: 2em;
    padding: 2em 0em;
  }
  .hide {
    display: none;
  }
</style>

<script src="/bower_components/jquery/dist/jquery.min.js" charset="utf-8"></script>
<script src="/bower_components/semantic/dist/semantic.min.js" charset="utf-8"></script>
<script src="/bower_components/gravatarjs/gravatar.js" charset="utf-8"></script>

<script src="/js/global.js" charset="utf-8"></script>
<script src="/js/api.js" charset="utf-8"></script>
<script src="/js/link.js" charset="utf-8"></script>
<script src="/js/result.js" charset="utf-8"></script>
<script src="/js/item.js" charset="utf-8"></script>
<script src="/js/form.js" charset="utf-8"></script>
<script src="/js/search.js" charset="utf-8"></script>
<script src="/js/account.js" charset="utf-8"></script>

</body>
</html>