<!DOCTYPE html>
<html>
<head>
<title>WME Course Exercise HTML and CSS</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="description" content="WME execise 01 HTML and CSS"/>
<meta name="keywords" content="web, multimedia, engineering"/>
<link href="http://fonts.googleapis.com/css?family=Ubuntu%7CUbuntu+Condensed" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.css" media="screen" />
<link rel="stylesheet" type="text/css" href="assets/css/site.css" media="screen" />
</head>
<body>
<div class="clearfix" id="slidingNav">
<nav>
<ul>
<li><a href="#" title=""><i class="fa fa-th-large fa-lg"></i> Overview</a></li>
<li><a href="#" class="active" title=""><i class="fa fa-list fa-lg"></i> Details</a></li>
<li><a href="#" title=""><i class="fa fa-cog fa-lg"></i> Settings</a></li>
</ul>
</nav>
</div>
<header>
<div class="clearfix">
<a href="#"></a>
<nav>
<ul>
<li><a href="#" title=""><i class="fa fa-th-large fa-lg"></i> Overview</a></li>
<li><a href="#" class="active" title=""><i class="fa fa-list fa-lg"></i> Details</a></li>
<li><a href="#" title=""><i class="fa fa-cog fa-lg"></i> Settings</a></li>
</ul>
</nav>
<ul>
<li>
<span><i class="fa fa-star fa-lg"></i> Register</span>
<form method="post" action="#" enctype="text/plain" autocomplete="on">
<fieldset>
<label for="registerFirstName">First name</label>
<input id="registerFirstName" name="registerFirstName" type="text" />
<label for="registerLastName">Last name</label>
<input id="registerLastName" name="registerLastName" type="text" />
<label for="registerDayOfBirth">Birthday</label>
<input id="registerDayOfBirth" name="registerDayOfBirth" type="date"/>
</fieldset>
<fieldset>
<label for="registerUserName">Your username</label>
<input id="registerUserName" name="registerUserName" type="text" />
<label for="registerPassword">Your password</label>
<input id="registerPassword" name="registerPassword" type="password" />
</fieldset>
<button type="submit" id="registerSubmit" value="Register">Register</button>
</form>
</li>
<li>
<span><i class="fa fa-sign-in fa-lg"></i> Login</span>
<form method="post" action="#" enctype="text/plain" autocomplete="on">
<fieldset>
<label for="loginUserName">Username</label>
<input id="loginUserName" name="loginUserName" type="text" required="" />
<label for="loginPassword">Password</label>
<input id="loginPassword" name="loginPassword" type="password" required="" />
</fieldset>
<input id="loginRememberCheckbox" name="loginRememberCheckbox" type="checkbox" value="rememberLoginData" />
<label for="loginRememberCheckbox">Remember me</label>
<button id="loginSubmit" type="submit" value="Login">Login</button>
</form>
</li>
<li>
<span><i class="fa fa-user fa-lg"></i> maxmusti</span>
<form method="post" id="logout-form" action="#" enctype="text/plain" autocomplete="on">
<fieldset>
<span class="label">Your Name:</span>
<p class="value"></p>
<span class="label">Your Email:</span>
<p class="value"></p>
<span class="label">Your Quota (used/max):</span>
<p class="value"></p>
</fieldset>
<button type="submit" value="Logout">Logout</button>
</form>
</li>
</ul>
</div>
</header>
<main>
<section>
<h1>Your files in detail ...</h1>
<div class="pager clearfix">
<p>
Number of entries per page:
</p>
<ul>
<li><a class="active" href="#">10</a></li>
<li><a href="#">20</a></li>
<li><a href="#">50</a></li>
<li><a href="#">100</a></li>
</ul>
<p>
Show/Hide:
</p>
<ul>
<li><a class="active column-hide-control" data-column-index="1" href="#">Size</a></li>
<li><a class="active column-hide-control" data-column-index="2" href="#">Type</a></li>
<li><a class="active column-hide-control" data-column-index="3" href="#">Creation</a></li>
</ul>
<ul>
<li><a class="active" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<p>
Page:
</p>
</div>
<table>
<thead>
<tr>
<th class="column-sort" data-column-sort-by="filename">Filename</th>
<th class="column-sort" data-column-sort-by="size">Size</th>
<th>Type</th>
<th>Creation</th>
<th>Actions</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div class="pager clearfix">
<p>
Number of entries per page:
</p>
<ul class="number-of-entries">
<li><a class="active" href="#">10</a></li>
<li><a href="#">20</a></li>
<li><a href="#">50</a></li>
<li><a href="#">100</a></li>
</ul>
<p>
Show/Hide:
</p>
<ul class="number-of-entries">
<li><a class="active column-hide-control" data-column-index="1" href="#">Size</a></li>
<li><a class="active column-hide-control" data-column-index="2" href="#">Type</a></li>
<li><a class="active column-hide-control" data-column-index="3" href="#">Creation</a></li>
</ul>
<ul class="number-of-entries">
<li><a class="active" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<p>
Page:
</p>
</div>
</section>
</main>
<footer class="clearfix">
<hr />
<p>
Copyright © 2014 inf_box<br/>
Second course exercise <b>JavaScript, Ajax, JSON und jQuery</b> of the lecture Web and Multimedia Engineering
</p>
<p>
<br/>
</p>
</footer>
<div id="overlay">
<div id="content-area">
<a id="close-control" href="#"><i class="fa fa-times fa-lg"></i></a>
<div>
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="assets/js/site.js"></script>
</body>
</html>