<!DOCTYPE html>
<html lang="en">
<style>
body{

}

header {
    height:10px;
    float:right;
}
</style>
  <body>

    <nav class="navbar navbar-inverse 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="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="/home">Home</a></li>
            <li><a href="/account_info">My Account</a></li>
            <li  class="active"><a href="/class">Classes</a></li>
            <li><a href="/docs">Docs</a></li>
            <li><a href="/contact">Contact Us</a></li>
            <li><a href="/">Sign Out</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

<header>
<br>
User Identified as: <strong> CARL JOSH  SAN LUIS  PUALENGCO</strong>
</header>
      <div class="starter-template">
        <h1>AISIS Online</h1>
        <style>
        th, td { padding: 5px; }
        table { border-collapse: separate; border-spacing: 1px; }        
        </style>




    <div class="container dynamicTile">
    <div class="row">
        <div class="col-sm-4 col-xs-8">
            <div id="tile7" class="tile">
                <div>
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="http://acfj.staging.august99.com/wp-content/uploads/2014/06/ateneo-demanila-logo.jpg" class="img-responsive" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    <a href="/home" style="display: block"><div class="col-sm-2 col-xs-4">
            <div id="tile3" class="tile">
                <div>
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item active text-center">
                            <div>
                                <span class="fa fa-star bigicon"></span>
                            </div>
                            <div class="icontext">
                            <br>
                                My Enrolled Class
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a href="/grades" style="display: block"><div class="col-sm-2 col-xs-4">
            <div id="tile4" class="tile">
                <div>
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item active text-center">
                            <div>
                                <span class="fa fa-cab bigicon"></span>
                            </div>
                            <div class="icontext">
                            <br>
                            <br>
                                My Grades
                            </div>
                            <div class="icontext">
                                <span class="fa fa-check"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </a>
        <a href="/home" style="display: block">
        <div class="col-sm-2 col-xs-4">
            <div id="tile3" class="tile">
                <div>
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item active text-center">
                            <div>
                                <span class="fa fa-wifi bigicondark"></span>
                            </div>
                            <div class="icontext">
                            <br>
                                My Class Schedule   
                            </div>
                            <div class="icontextdark">
                                <span class="fa fa-check"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </a>

        <a href="/home" style="display: block">
        <div class="col-sm-2 col-xs-4">
            <div id="tile3" class="tile">
                <div>
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item active text-center">
                            <div>
                                <span class="fa fa-wifi bigicondark"></span>
                            </div>
                            <div class="icontext">
                            <br>
                                Class Schedule   
                            </div>
                            <div class="icontextdark">
                                <span class="fa fa-check"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </a>

    </div>

</div>

<style>
    .dynamicTile .col-sm-2.col-xs-4 {
        padding: 5px;
    }

    .bigicon {
        font-size: 67px;
        color: white;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .icontext {
        color: white;
        font-size: 27px;
    }

    .bigicondark {
        font-size: 67px;
        color: black;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .icontextdark {
        color: black;
        font-size: 27px;
    }

    .dynamicTile .col-sm-4.col-xs-8 {
        padding: 5px;
    }

    #tile1 {
        background: #7C91C7;
    }

    #tile2 {
        background: #3B579D;
    }

    #tile3 {
        background: #153178;
    }

    #tile4 {
        background: #EACF46;
    }

    #tile5 {
        background: #EACF46;
    }

    #tile6 {
        background: #FFED94;
    }

    #tile7 {
        background: white;
    }

    #tile8 {
        background: #03133C;
    }

    #tile9 {
        background: #EACF46;
    }

    #tile10 {
        background: #EACF46;
    }

    .tilecaption {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        margin: 0!important;
        text-align: center;
        color: white;
        font-family: Segoe UI;
        font-weight: lighter;
    }
</style>

<script type="text/javascript">
$(document).ready(function () {
    $(".tile").height($("#tile1").width());
    $(".carousel").height($("#tile1").width());
    $(".item").height($("#tile1").width());

    $(window).resize(function () {
        if (this.resizeTO) clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function () {
            $(this).trigger('resizeEnd');
        }, 10);
    });

    $(window).bind('resizeEnd', function () {
        $(".tile").height($("#tile1").width());
        $(".carousel").height($("#tile1").width());
        $(".item").height($("#tile1").width());
    });
});
</script>
  

        


    <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>
</html>
