<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="utf-8" />
<title>Musik | Web Application</title>
<meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="js/jPlayer/jplayer.flat.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="css/simple-line-icons.css" type="text/css" />
<link rel="stylesheet" href="css/font.css" type="text/css" />
<link rel="stylesheet" href="css/app.css" type="text/css" />
<!--[if lt IE 9]>
<script src="js/ie/html5shiv.js"></script>
<script src="js/ie/respond.min.js"></script>
<script src="js/ie/excanvas.js"></script>
<![endif]-->
</head>
<body class="">
<section class="vbox">
<header class="bg-white-only header header-md navbar navbar-fixed-top-xs">
<div class="navbar-header aside bg-info dk">
<a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen,open" data-target="#nav,html">
<i class="icon-list"></i>
</a>
<a href="index.html" class="navbar-brand text-lt">
<i class="icon-earphones"></i>
<img src="images/logo.png" alt="." class="hide">
<span class="hidden-nav-xs m-l-sm">Musik</span>
</a>
<a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".user">
<i class="icon-settings"></i>
</a>
</div> <ul class="nav navbar-nav hidden-xs">
<li>
<a href="#nav,.navbar-header" data-toggle="class:nav-xs,nav-xs" class="text-muted">
<i class="fa fa-indent text"></i>
<i class="fa fa-dedent text-active"></i>
</a>
</li>
</ul>
<form class="navbar-form navbar-left input-s-lg m-t m-l-n-xs hidden-xs" role="search">
<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<button type="submit" class="btn btn-sm bg-white btn-icon rounded"><i class="fa fa-search"></i></button>
</span>
<input type="text" class="form-control input-sm no-border rounded" placeholder="Search songs, albums...">
</div>
</div>
</form>
<div class="navbar-right ">
<ul class="nav navbar-nav m-n hidden-xs nav-user user">
<li class="hidden-xs">
<a href="#" class="dropdown-toggle lt" data-toggle="dropdown">
<i class="icon-bell"></i>
<span class="badge badge-sm up bg-danger count">2</span>
</a>
<section class="dropdown-menu aside-xl animated fadeInUp">
<section class="panel bg-white">
<div class="panel-heading b-light bg-light">
<strong>You have <span class="count">2</span> notifications</strong>
</div>
<div class="list-group list-group-alt">
<a href="#" class="media list-group-item">
<span class="pull-left thumb-sm">
<img src="images/a0.png" alt="..." class="img-circle">
</span>
<span class="media-body block m-b-none">
Use awesome animate.css<br>
<small class="text-muted">10 minutes ago</small>
</span>
</a>
<a href="#" class="media list-group-item">
<span class="media-body block m-b-none">
1.0 initial released<br>
<small class="text-muted">1 hour ago</small>
</span>
</a>
</div>
<div class="panel-footer text-sm">
<a href="#" class="pull-right"><i class="fa fa-cog"></i></a>
<a href="#notes" data-toggle="class:show animated fadeInRight">See all the notifications</a>
</div>
</section>
</section>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle bg clear" data-toggle="dropdown">
<span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
<img src="images/a0.png" alt="...">
</span>
John.Smith <b class="caret"></b>
</a>
<ul class="dropdown-menu animated fadeInRight">
<li>
<span class="arrow top"></span>
<a href="#">Settings</a>
</li>
<li>
<a href="profile.html">Profile</a>
</li>
<li>
<a href="#">
<span class="badge bg-danger pull-right">3</span>
Notifications
</a>
</li>
<li>
<a href="docs.html">Help</a>
</li>
<li class="divider"></li>
<li>
<a href="modal.lockme.html" data-toggle="ajaxModal" >Logout</a>
</li>
</ul>
</li>
</ul>
</div>
</header>
<section>
<section class="hbox stretch">
<!-- .aside -->
<aside class="bg-black dk aside hidden-print" id="nav">
<section class="vbox">
<section class="w-f-md scrollable">
<div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="10px" data-railOpacity="0.2">
<!-- nav -->
<nav class="nav-primary hidden-xs">
<ul class="nav bg clearfix">
<li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
Discover
</li>
<li>
<a href="index.html">
<i class="icon-disc icon text-success"></i>
<span class="font-bold">What's new</span>
</a>
</li>
<li>
<a href="genres.html">
<i class="icon-music-tone-alt icon text-info"></i>
<span class="font-bold">Genres</span>
</a>
</li>
<li>
<a href="events.html">
<i class="icon-drawer icon text-primary-lter"></i>
<b class="badge bg-primary pull-right">6</b>
<span class="font-bold">Events</span>
</a>
</li>
<li>
<a href="listen.html">
<i class="icon-list icon text-info-dker"></i>
<span class="font-bold">Listen</span>
</a>
</li>
<li>
<a href="video.html" data-target="#content" data-el="#bjax-el" data-replace="true">
<i class="icon-social-youtube icon text-primary"></i>
<span class="font-bold">Video</span>
</a>
</li>
<li class="m-b hidden-nav-xs"></li>
</ul>
<ul class="nav" data-ride="collapse">
<li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
Interface
</li>