  <style type="text/css">
    div.site
    {
      margin-top: 100px;
    }

     table
    {
      width: 100%;
      margin-left: 2%;

    }
    th, td {
    padding: 10px;
    text-align: center;
    color: white;
  }
}
    #contactus
    {
      margin-top: 250px;
    }
  #extra
  {
    margin-left: 60px;
    margin-right: 40px; 
    margin-top: 10px;
    background-color: white;
  }
  div.fillup
  {
    float: left;
    border-color: #043992;
    border-width: 3px;
    margin-left: 2%;
  }
  #heading
  {
    background-color: #043992;
    text-align: center;
    color: white; 
    width:70%;
    margin-left: 15%;
  }
  table.grades
  {
    border:2px solid white;
    padding:5px;
    width: 95%;
  }
  table.year
  {
    border:2px solid white;
    padding:5px;
    width:25%;
    margin-left: 25%;
    float: left;
  }
  table.sem
  {
     border:2px solid white;
    padding:5px;
    width:25%;
    margin-left: 2%;
  }
  #info
  {
    margin-left: 10%;
    margin-right: 60px;
    margin-top: 50px;
    background-color: white;
    text-align: center;
    color: #043992;
    width: 42%;
    float:left;
  }
  #newpw
  {
    width: 32%;
    background: white;
  }
  button
  {
    background-color:white;
    border-color: #043992;
    color: #043992;
      align: center;
      margin-top: 10px;
      margin-left: 130px;
      text-align: center;
      padding:10px 24px;
      border-radius: 8px;

  }
  #inputEmail
  {
    height: 50px;
    width: 400px;
    border-color: #043992;
    border-width: 2px;
  }
  #inputPassword
  {
    height: 50px;
    width: 400px;
    border-color: #043992;
    border-width: 2px;
  }
  #headsign
  {
    color:#043992;
    margin-left: 90px;
    margin-bottom: 30px;
  }
  #dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

#dropdown:hover .dropdown-content {
    display: block;
}

  </style>
 

 <body>

    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/home">Aisis Online</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li ><a href="/home">Home</a></li>
            <li><a href="/contact">Contact</a></li>
           
          </ul>

          <ul class="nav navbar-nav navbar-right">
              
                <li><a href="/l">Logout</a></li>
               
             
            </ul>
            <!--<li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

     <div class = "jumbotron" id = extra>
   <table >
      <tr>
        <td> <a href="/googleaccount">Google Account</a> <br></td>
        <td> <a href="/IPS">Individual Program of Study</a><br> </td>
         <td><a href="/grades">My Grades</a><br></td>
         <td><a href="/GoogleAccount">My Class Schedule</a><br></td>
        
      </tr>
      <tr>
       
        <td><a href="/GoogleAccount">Official Curriculum</a><br></td>
        <td><a href="/GoogleAccount">My Currently Enrolled Classes</a><br></td>
        <td><a href="/GoogleAccount">My Hold Orders</a><br></td>
        <td><a href="/GoogleAccount">Update Student Information</a><br></td>
      </tr>
      <tr>
       
        <td><a href="/change">Change Password</a><br></td>
        <td><a href="/GoogleAccount">Class Schedule</a><br></td>
        <td><a href="/GoogleAccount">Official Curriculum</a><br></td>
         <td><a href="/GoogleAccount">Individual Program of Study</a><br></td>
      </tr>
      </table>
       </div> 
          </div>
    </div>

    <div class = "jumbotron" id = "heading">
    <p>Cumulative QPI: 4.00</p>

      <table class = "grades">
       <tr>
          <th>School Year</th>
          <th>Sem</th> 
          <th>Course</th>
          <th>Subject Code</th>
          <th>Units</th>
          <th>Final Grade</th> 
        </tr>
        <tr>
          <td>2015-2016</td>
          <td>2</td>
          <td>BS MIS</td>
          <td>MIS21</td>
          <td>3</td>
          <td>A</td>
        </tr>
        <tr>
          <td>2015-2016</td>
          <td>2</td>
          <td>BS MIS</td>
          <td>STAT107</td>
          <td>3</td>
          <td>A</td>
        </tr>
         <tr>
          <td>2015-2016</td>
          <td>2</td>
          <td>BS MIS</td>
          <td>Hi18</td>
          <td>3</td>
          <td>A</td>
        </tr>
      </table>
       <table class ="year">
      <tr>
        <th> year level</th>
        <th>QPI (year)</th>
      </tr>
        <tr>
          <td>1</td>
          <td>4.00</td>
        </tr>
        <tr>
          <td>2</td>
          <td>*</td>
        </tr>
      </table>
      <table class ="sem">
      <tr>
        <th> year level</th>
        <th>sem</th>
        <th>QPI</th>
      </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>4.00</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>4.00</td>
        </tr>
      </table>
           </div>
      <!-- Main component for a primary marketing message or call to action -->
    <div class = "jumbotron" id = "heading2">
     

    </div>

  <!-- /container -->
 
    

   <!-- /container -->
   

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
