1349 lines
67 KiB
HTML
1349 lines
67 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Revealing Navigation | Nifty - Admin Template</title>
|
||
|
||
|
||
<!--STYLESHEET-->
|
||
<!--=================================================-->
|
||
|
||
<!--Open Sans Font [ OPTIONAL ]-->
|
||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
|
||
|
||
|
||
<!--Bootstrap Stylesheet [ REQUIRED ]-->
|
||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||
|
||
|
||
<!--Nifty Stylesheet [ REQUIRED ]-->
|
||
<link href="css/nifty.min.css" rel="stylesheet">
|
||
|
||
|
||
<!--Nifty Premium Icon [ DEMONSTRATION ]-->
|
||
<link href="css/demo/nifty-demo-icons.min.css" rel="stylesheet">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!--JAVASCRIPT-->
|
||
<!--=================================================-->
|
||
|
||
<!--Pace - Page Load Progress Par [OPTIONAL]-->
|
||
<link href="plugins/pace/pace.min.css" rel="stylesheet">
|
||
<script src="plugins/pace/pace.min.js"></script>
|
||
|
||
|
||
<!--jQuery [ REQUIRED ]-->
|
||
<script src="js/jquery-2.2.4.min.js"></script>
|
||
|
||
|
||
<!--BootstrapJS [ RECOMMENDED ]-->
|
||
<script src="js/bootstrap.min.js"></script>
|
||
|
||
|
||
<!--NiftyJS [ RECOMMENDED ]-->
|
||
<script src="js/nifty.min.js"></script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!--=================================================-->
|
||
|
||
|
||
|
||
|
||
<!--=================================================
|
||
|
||
REQUIRED
|
||
You must include this in your project.
|
||
|
||
|
||
RECOMMENDED
|
||
This category must be included but you may modify which plugins or components which should be included in your project.
|
||
|
||
|
||
OPTIONAL
|
||
Optional plugins. You may choose whether to include it in your project or not.
|
||
|
||
|
||
DEMONSTRATION
|
||
This is to be removed, used for demonstration purposes only. This category must not be included in your project.
|
||
|
||
|
||
SAMPLE
|
||
Some script samples which explain how to initialize plugins or components. This category should not be included in your project.
|
||
|
||
|
||
Detailed information and more samples can be found in the document.
|
||
|
||
=================================================-->
|
||
|
||
|
||
</head>
|
||
|
||
<!--TIPS-->
|
||
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->
|
||
<body>
|
||
<div id="container" class="effect aside-float aside-bright mainnav-out reveal">
|
||
|
||
<!--NAVBAR-->
|
||
<!--===================================================-->
|
||
<header id="navbar">
|
||
<div id="navbar-container" class="boxed">
|
||
|
||
<!--Brand logo & name-->
|
||
<!--================================-->
|
||
<div class="navbar-header">
|
||
<a href="index.html" class="navbar-brand">
|
||
<img src="img/logo.png" alt="Nifty Logo" class="brand-icon">
|
||
<div class="brand-title">
|
||
<span class="brand-text">Nifty</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<!--================================-->
|
||
<!--End brand logo & name-->
|
||
|
||
|
||
<!--Navbar Dropdown-->
|
||
<!--================================-->
|
||
<div class="navbar-content clearfix">
|
||
<ul class="nav navbar-top-links pull-left">
|
||
|
||
<!--Navigation toogle button-->
|
||
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
<li class="tgl-menu-btn">
|
||
<a class="mainnav-toggle reveal" href="#">
|
||
<i class="demo-pli-view-list"></i>
|
||
</a>
|
||
</li>
|
||
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
<!--End Navigation toogle button-->
|
||
|
||
|
||
|
||
<!--Notification dropdown-->
|
||
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
<li class="dropdown">
|
||
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
|
||
<i class="demo-pli-bell"></i>
|
||
<span class="badge badge-header badge-danger"></span>
|
||
</a>
|
||
|
||
<!--Notification dropdown menu-->
|
||
<div class="dropdown-menu dropdown-menu-md">
|
||
<div class="pad-all bord-btm">
|
||
<p class="text-semibold text-main mar-no">You have 9 notifications.</p>
|
||
</div>
|
||
<div class="nano scrollable">
|
||
<div class="nano-content">
|
||
<ul class="head-list">
|
||
|
||
<!-- Dropdown list-->
|
||
<li>
|
||
<a href="#">
|
||
<div class="clearfix">
|
||
<p class="pull-left">Database Repair</p>
|
||
<p class="pull-right">70%</p>
|
||
</div>
|
||
<div class="progress progress-sm">
|
||
<div style="width: 70%;" class="progress-bar">
|
||
<span class="sr-only">70% Complete</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
|
||
<!-- Dropdown list-->
|
||
<li>
|
||
<a href="#">
|
||
<div class="clearfix">
|
||
<p class="pull-left">Upgrade Progress</p>
|
||
<p class="pull-right">10%</p>
|
||
</div>
|
||
<div class="progress progress-sm">
|
||
<div style="width: 10%;" class="progress-bar progress-bar-warning">
|
||
<span class="sr-only">10% Complete</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
|
||
<!-- Dropdown list-->
|
||
<li>
|
||
<a class="media" href="#">
|
||
<span class="badge badge-success pull-right">90%</span>
|
||
<div class="media-left">
|
||
<i class="demo-pli-data-settings icon-2x"></i>
|
||
</div>
|
||
<div class="media-body">
|
||
<div class="text-nowrap">HDD is full</div>
|
||
<small class="text-muted">50 minutes ago</small>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
|
||
<!-- Dropdown list-->
|
||
<li>
|
||
<a class="media" href="#">
|
||
<div class="media-left">
|
||
<i class="demo-pli-file-edit icon-2x"></i>
|
||
</div>
|
||
<div class="media-body">
|
||
<div class="text-nowrap">Write a news article</div>
|
||
<small class="text-muted">Last Update 8 hours ago</small>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
|
||
<!-- Dropdown list-->
|
||
<li>
|
||
<a class="media" href="#">
|
||
<span class="label label-danger pull-right">New</span>
|
||
<div class="media-left">
|
||
<i class="demo-pli-speech-bubble-7 icon-2x"></i>
|
||
</div>
|
||
<div class="media-body">
|
||
<div class="text-nowrap">Comment Sorting</div>
|
||
<small class="text-muted">Last Update 8 hours ago</small>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
|
||
<!-- Dropdown list-->
|
||
<li>
|
||
<a class="media" href="#">
|
||
<div class="media-left">
|
||
<i class="demo-pli-add-user-plus-star icon-2x"></i>
|
||
</div>
|
||
<div class="media-body">
|
||
<div class="text-nowrap">New User Registered</div>
|
||
<small class="text-muted">4 minutes ago</small>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
|
||
<!-- Dropdown list-->
|
||
<li class="bg-gray">
|
||
<a class="media" href="#">
|
||
<div class="media-left">
|
||
<img class="img-circle img-sm" alt="Profile Picture" src="img/profile-photos/9.png">
|
||
</div>
|
||
<div class="media-body">
|
||
<div class="text-nowrap">Lucy sent you a message</div>
|
||
<small class="text-muted">30 minutes ago</small>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
|
||
<!-- Dropdown list-->
|
||
<li class="bg-gray">
|
||
<a class="media" href="#">
|
||
<div class="media-left">
|
||
<img class="img-circle img-sm" alt="Profile Picture" src="img/profile-photos/3.png">
|
||
</div>
|
||
<div class="media-body">
|
||
<div class="text-nowrap">Jackson sent you a message</div>
|
||
<small class="text-muted">40 minutes ago</small>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!--Dropdown footer-->
|
||
<div class="pad-all bord-top">
|
||
<a href="#" class="btn-link text-dark box-block">
|
||
<i class="fa fa-angle-right fa-lg pull-right"></i>Show All Notifications
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
<!--End notifications dropdown-->
|
||
|
||
|
||
|
||
<!--Mega dropdown-->
|
||
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
<li class="mega-dropdown">
|
||
<a href="#" class="mega-dropdown-toggle">
|
||
<i class="demo-pli-layout-grid"></i>
|
||
</a>
|
||
<div class="dropdown-menu mega-dropdown-menu">
|
||
<div class="row">
|
||
<div class="col-sm-4 col-md-3">
|
||
|
||
<!--Mega menu list-->
|
||
<ul class="list-unstyled">
|
||
<li class="dropdown-header"><i class="demo-pli-file icon-fw"></i> Pages</li>
|
||
<li><a href="#">Profile</a></li>
|
||
<li><a href="#">Search Result</a></li>
|
||
<li><a href="#">FAQ</a></li>
|
||
<li><a href="#">Sreen Lock</a></li>
|
||
<li><a href="#" class="disabled">Disabled</a></li> </ul>
|
||
|
||
</div>
|
||
<div class="col-sm-4 col-md-3">
|
||
|
||
<!--Mega menu list-->
|
||
<ul class="list-unstyled">
|
||
<li class="dropdown-header"><i class="demo-pli-mail icon-fw"></i> Mailbox</li>
|
||
<li><a href="#"><span class="pull-right label label-danger">Hot</span>Indox</a></li>
|
||
<li><a href="#">Read Message</a></li>
|
||
<li><a href="#">Compose</a></li>
|
||
</ul>
|
||
<p class="pad-top mar-top bord-top text-sm">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
|
||
</div>
|
||
<div class="col-sm-4 col-md-3">
|
||
<!--Mega menu list-->
|
||
<ul class="list-unstyled">
|
||
<li>
|
||
<a href="#" class="media mar-btm">
|
||
<span class="badge badge-success pull-right">90%</span>
|
||
<div class="media-left">
|
||
<i class="demo-pli-data-settings icon-2x"></i>
|
||
</div>
|
||
<div class="media-body">
|
||
<p class="text-semibold text-dark mar-no">Data Backup</p>
|
||
<small class="text-muted">This is the item description</small>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="media mar-btm">
|
||
<div class="media-left">
|
||
<i class="demo-pli-support icon-2x"></i>
|
||
</div>
|
||
<div class="media-body">
|
||
<p class="text-semibold text-dark mar-no">Support</p>
|
||
<small class="text-muted">This is the item description</small>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="media mar-btm">
|
||
<div class="media-left">
|
||
<i class="demo-pli-computer-secure icon-2x"></i>
|
||
</div>
|
||
<div class="media-body">
|
||
<p class="text-semibold text-dark mar-no">Security</p>
|
||
<small class="text-muted">This is the item description</small>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="media mar-btm">
|
||
<div class="media-left">
|
||
<i class="demo-pli-map-2 icon-2x"></i>
|
||
</div>
|
||
<div class="media-body">
|
||
<p class="text-semibold text-dark mar-no">Location</p>
|
||
<small class="text-muted">This is the item description</small>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-sm-12 col-md-3">
|
||
<p class="dropdown-header"><i class="demo-pli-file-jpg icon-fw"></i> Gallery</p>
|
||
<ul class="list-unstyled list-inline text-justify">
|
||
|
||
<li class="pad-btm">
|
||
<img src="img//thumbs/mega-menu-2.jpg" alt="thumbs">
|
||
</li>
|
||
<li class="pad-btm">
|
||
<img src="img//thumbs/mega-menu-3.jpg" alt="thumbs">
|
||
</li>
|
||
<li class="pad-btm">
|
||
<img src="img//thumbs/mega-menu-1.jpg" alt="thumbs">
|
||
</li>
|
||
<li class="pad-btm">
|
||
<img src="img//thumbs/mega-menu-4.jpg" alt="thumbs">
|
||
</li>
|
||
<li class="pad-btm">
|
||
<img src="img//thumbs/mega-menu-5.jpg" alt="thumbs">
|
||
</li>
|
||
<li class="pad-btm">
|
||
<img src="img//thumbs/mega-menu-6.jpg" alt="thumbs">
|
||
</li>
|
||
</ul>
|
||
<a href="#" class="btn btn-sm btn-block btn-default">Browse Gallery</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
<!--End mega dropdown-->
|
||
|
||
</ul>
|
||
<ul class="nav navbar-top-links pull-right">
|
||
|
||
<!--Language selector-->
|
||
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
<li class="dropdown">
|
||
<a id="demo-lang-switch" class="lang-selector dropdown-toggle" href="#" data-toggle="dropdown">
|
||
<span class="lang-selected">
|
||
<img class="lang-flag" src="img/flags/united-kingdom.png" alt="English">
|
||
</span>
|
||
</a>
|
||
|
||
<!--Language selector menu-->
|
||
<ul class="head-list dropdown-menu">
|
||
<li>
|
||
<!--English-->
|
||
<a href="#" class="active">
|
||
<img class="lang-flag" src="img/flags/united-kingdom.png" alt="English">
|
||
<span class="lang-id">EN</span>
|
||
<span class="lang-name">English</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<!--France-->
|
||
<a href="#">
|
||
<img class="lang-flag" src="img/flags/france.png" alt="France">
|
||
<span class="lang-id">FR</span>
|
||
<span class="lang-name">Français</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<!--Germany-->
|
||
<a href="#">
|
||
<img class="lang-flag" src="img/flags/germany.png" alt="Germany">
|
||
<span class="lang-id">DE</span>
|
||
<span class="lang-name">Deutsch</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<!--Italy-->
|
||
<a href="#">
|
||
<img class="lang-flag" src="img/flags/italy.png" alt="Italy">
|
||
<span class="lang-id">IT</span>
|
||
<span class="lang-name">Italiano</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<!--Spain-->
|
||
<a href="#">
|
||
<img class="lang-flag" src="img/flags/spain.png" alt="Spain">
|
||
<span class="lang-id">ES</span>
|
||
<span class="lang-name">Español</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
<!--End language selector-->
|
||
|
||
|
||
|
||
<!--User dropdown-->
|
||
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
<li id="dropdown-user" class="dropdown">
|
||
<a href="#" data-toggle="dropdown" class="dropdown-toggle text-right">
|
||
<span class="pull-right">
|
||
<!--<img class="img-circle img-user media-object" src="img/profile-photos/1.png" alt="Profile Picture">-->
|
||
<i class="demo-pli-male ic-user"></i>
|
||
</span>
|
||
<div class="username hidden-xs">Aaron Chavez</div>
|
||
</a>
|
||
|
||
|
||
<div class="dropdown-menu dropdown-menu-md dropdown-menu-right panel-default">
|
||
|
||
<!-- Dropdown heading -->
|
||
<div class="pad-all bord-btm">
|
||
<p class="text-main mar-btm"><span class="text-bold">750GB</span> of 1,000GB Used</p>
|
||
<div class="progress progress-sm">
|
||
<div class="progress-bar" style="width: 70%;">
|
||
<span class="sr-only">70%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- User dropdown menu -->
|
||
<ul class="head-list">
|
||
<li>
|
||
<a href="#">
|
||
<i class="demo-pli-male icon-lg icon-fw"></i> Profile
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">
|
||
<span class="badge badge-danger pull-right">9</span>
|
||
<i class="demo-pli-mail icon-lg icon-fw"></i> Messages
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">
|
||
<span class="label label-success pull-right">New</span>
|
||
<i class="demo-pli-gear icon-lg icon-fw"></i> Settings
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">
|
||
<i class="demo-pli-information icon-lg icon-fw"></i> Help
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">
|
||
<i class="demo-pli-computer-secure icon-lg icon-fw"></i> Lock screen
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- Dropdown footer -->
|
||
<div class="pad-all text-right">
|
||
<a href="pages-login.html" class="btn btn-primary">
|
||
<i class="demo-pli-unlock"></i> Logout
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
<!--End user dropdown-->
|
||
|
||
<li>
|
||
<a href="#" class="aside-toggle navbar-aside-icon">
|
||
<i class="pci-ver-dots"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!--================================-->
|
||
<!--End Navbar Dropdown-->
|
||
|
||
</div>
|
||
</header>
|
||
<!--===================================================-->
|
||
<!--END NAVBAR-->
|
||
|
||
<div class="boxed">
|
||
|
||
<!--CONTENT CONTAINER-->
|
||
<!--===================================================-->
|
||
<div id="content-container">
|
||
|
||
<!--Page Title-->
|
||
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
<div id="page-title">
|
||
<h1 class="page-header text-overflow">Revealing Navigation</h1>
|
||
|
||
<!--Searchbox-->
|
||
<div class="searchbox">
|
||
<div class="input-group custom-search-form">
|
||
<input type="text" class="form-control" placeholder="Search..">
|
||
<span class="input-group-btn">
|
||
<button class="text-muted" type="button"><i class="demo-pli-magnifi-glass"></i></button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
<!--End page title-->
|
||
|
||
|
||
<!--Breadcrumb-->
|
||
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
<ol class="breadcrumb">
|
||
<li><a href="#">Home</a></li>
|
||
<li><a href="#">Layouts</a></li>
|
||
<li class="active">Revealing Navigation</li>
|
||
</ol>
|
||
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
<!--End breadcrumb-->
|
||
|
||
|
||
|
||
|
||
<!--Page content-->
|
||
<!--===================================================-->
|
||
<div id="page-content">
|
||
|
||
|
||
<hr class="new-section-sm bord-no">
|
||
<div class="row">
|
||
<div class="col-lg-6 col-lg-offset-3">
|
||
<div class="panel panel-trans text-center">
|
||
<div class="panel-heading">
|
||
<h3 class="panel-title">Your content here...</h3>
|
||
</div>
|
||
<div class="panel-body">
|
||
<p>Start putting content on grids or panels, you can also use different combinations of grids.
|
||
<br>Please check out the dashboard and other pages.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
<!--===================================================-->
|
||
<!--End page content-->
|
||
|
||
|
||
</div>
|
||
<!--===================================================-->
|
||
<!--END CONTENT CONTAINER-->
|
||
|
||
|
||
|
||
<!--ASIDE-->
|
||
<!--===================================================-->
|
||
<aside id="aside-container">
|
||
<div id="aside">
|
||
<div class="nano">
|
||
<div class="nano-content">
|
||
|
||
<!--Nav tabs-->
|
||
<!--================================-->
|
||
<ul class="nav nav-tabs nav-justified">
|
||
<li class="active">
|
||
<a href="#demo-asd-tab-1" data-toggle="tab">
|
||
<i class="demo-pli-speech-bubble-7"></i>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#demo-asd-tab-2" data-toggle="tab">
|
||
<i class="demo-pli-information icon-fw"></i> Report
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#demo-asd-tab-3" data-toggle="tab">
|
||
<i class="demo-pli-wrench icon-fw"></i> Settings
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<!--================================-->
|
||
<!--End nav tabs-->
|
||
|
||
|
||
|
||
<!-- Tabs Content -->
|
||
<!--================================-->
|
||
<div class="tab-content">
|
||
|
||
<!--First tab (Contact list)-->
|
||
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
<div class="tab-pane fade in active" id="demo-asd-tab-1">
|
||
<p class="pad-hor mar-top text-semibold text-main">
|
||
<span class="pull-right badge badge-warning">3</span> Family
|
||
</p>
|
||
|
||
<!--Family-->
|
||
<div class="list-group bg-trans">
|
||
<a href="#" class="list-group-item">
|
||
<div class="media-left pos-rel">
|
||
<img class="img-circle img-xs" src="img/profile-photos/2.png" alt="Profile Picture">
|
||
<i class="badge badge-success badge-stat badge-icon pull-left"></i>
|
||
</div>
|
||
<div class="media-body">
|
||
<p class="mar-no">Stephen Tran</p>
|
||
<small class="text-muted">Availabe</small>
|
||
</div>
|
||
</a>
|
||
<a href="#" class="list-group-item">
|
||
<div class="media-left pos-rel">
|
||
<img class="img-circle img-xs" src="img/profile-photos/7.png" alt="Profile Picture">
|
||
</div>
|
||
<div class="media-body">
|
||
<p class="mar-no">Brittany Meyer</p>
|
||
<small class="text-muted">I think so</small>
|
||
</div>
|
||
</a>
|
||
<a href="#" class="list-group-item">
|
||
<div class="media-left pos-rel">
|
||
<img class="img-circle img-xs" src="img/profile-photos/1.png" alt="Profile Picture">
|
||
<i class="badge badge-info badge-stat badge-icon pull-left"></i>
|
||
</div>
|
||
<div class="media-body">
|
||
<p class="mar-no">Jack George</p>
|
||
<small class="text-muted">Last Seen 2 hours ago</small>
|
||
</div>
|
||
</a>
|
||
<a href="#" class="list-group-item">
|
||
<div class="media-left pos-rel">
|
||
<img class="img-circle img-xs" src="img/profile-photos/4.png" alt="Profile Picture">
|
||
</div>
|
||
<div class="media-body">
|
||
<p class="mar-no">Donald Brown</p>
|
||
<small class="text-muted">Lorem ipsum dolor sit amet.</small>
|
||
</div>
|
||
</a>
|
||
<a href="#" class="list-group-item">
|
||
<div class="media-left pos-rel">
|
||
<img class="img-circle img-xs" src="img/profile-photos/8.png" alt="Profile Picture">
|
||
<i class="badge badge-warning badge-stat badge-icon pull-left"></i>
|
||
</div>
|
||
<div class="media-body">
|
||
<p class="mar-no">Betty Murphy</p>
|
||
<small class="text-muted">Idle</small>
|
||
</div>
|
||
</a>
|
||
<a href="#" class="list-group-item">
|
||
<div class="media-left pos-rel">
|
||
<img class="img-circle img-xs" src="img/profile-photos/9.png" alt="Profile Picture">
|
||
<i class="badge badge-danger badge-stat badge-icon pull-left"></i>
|
||
</div>
|
||
<div class="media-body">
|
||
<p class="mar-no">Samantha Reid</p>
|
||
<small class="text-muted">Offline</small>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<hr>
|
||
<p class="pad-hor text-semibold text-main">
|
||
<span class="pull-right badge badge-success">Offline</span> Friends
|
||
</p>
|
||
|
||
<!--Works-->
|
||
<div class="list-group bg-trans">
|
||
<a href="#" class="list-group-item">
|
||
<span class="badge badge-purple badge-icon badge-fw pull-left"></span> Joey K. Greyson
|
||
</a>
|
||
<a href="#" class="list-group-item">
|
||
<span class="badge badge-info badge-icon badge-fw pull-left"></span> Andrea Branden
|
||
</a>
|
||
<a href="#" class="list-group-item">
|
||
<span class="badge badge-success badge-icon badge-fw pull-left"></span> Johny Juan
|
||
</a>
|
||
<a href="#" class="list-group-item">
|
||
<span class="badge badge-danger badge-icon badge-fw pull-left"></span> Susan Sun
|
||
</a>
|
||
</div>
|
||
|
||
|
||
<hr>
|
||
<p class="pad-hor mar-top text-semibold text-main">News</p>
|
||
|
||
<div class="pad-hor">
|
||
<p class="text-muted">Lorem ipsum dolor sit amet, consectetuer
|
||
<a data-title="45%" class="add-tooltip text-semibold" href="#">adipiscing elit</a>, sed diam nonummy nibh. Lorem ipsum dolor sit amet.
|
||
</p>
|
||
<small class="text-muted"><em>Last Update : Des 12, 2014</em></small>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
<!--End first tab (Contact list)-->
|
||
|
||
|
||
<!--Second tab (Custom layout)-->
|
||
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
<div class="tab-pane fade" id="demo-asd-tab-2">
|
||
|
||
<!--Monthly billing-->
|
||
<div class="pad-all">
|
||
<p class="text-semibold text-main">Billing & reports</p>
|
||
<p class="text-muted">Get <strong>$5.00</strong> off your next bill by making sure your full payment reaches us before August 5, 2016.</p>
|
||
</div>
|
||
<hr class="new-section-xs">
|
||
<div class="pad-all">
|
||
<span class="text-semibold text-main">Amount Due On</span>
|
||
<p class="text-muted text-sm">August 17, 2016</p>
|
||
<p class="text-2x text-thin text-main">$83.09</p>
|
||
<button class="btn btn-block btn-success mar-top">Pay Now</button>
|
||
</div>
|
||
|
||
|
||
<hr>
|
||
|
||
<p class="pad-hor text-semibold text-main">Additional Actions</p>
|
||
|
||
<!--Simple Menu-->
|
||
<div class="list-group bg-trans">
|
||
<a href="#" class="list-group-item"><i class="demo-pli-information icon-lg icon-fw"></i> Service Information</a>
|
||
<a href="#" class="list-group-item"><i class="demo-pli-mine icon-lg icon-fw"></i> Usage Profile</a>
|
||
<a href="#" class="list-group-item"><span class="label label-info pull-right">New</span><i class="demo-pli-credit-card-2 icon-lg icon-fw"></i> Payment Options</a>
|
||
<a href="#" class="list-group-item"><i class="demo-pli-support icon-lg icon-fw"></i> Message Center</a>
|
||
</div>
|
||
|
||
|
||
<hr>
|
||
|
||
<div class="text-center">
|
||
<div><i class="demo-pli-old-telephone icon-3x"></i></div>
|
||
Questions?
|
||
<p class="text-lg text-semibold text-main"> (415) 234-53454 </p>
|
||
<small><em>We are here 24/7</em></small>
|
||
</div>
|
||
</div>
|
||
<!--End second tab (Custom layout)-->
|
||
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
|
||
|
||
<!--Third tab (Settings)-->
|
||
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
<div class="tab-pane fade" id="demo-asd-tab-3">
|
||
<ul class="list-group bg-trans">
|
||
<li class="pad-top list-header">
|
||
<p class="text-semibold text-main mar-no">Account Settings</p>
|
||
</li>
|
||
<li class="list-group-item">
|
||
<div class="pull-right">
|
||
<input class="toggle-switch" id="demo-switch-1" type="checkbox" checked>
|
||
<label for="demo-switch-1"></label>
|
||
</div>
|
||
<p class="mar-no">Show my personal status</p>
|
||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</small>
|
||
</li>
|
||
<li class="list-group-item">
|
||
<div class="pull-right">
|
||
<input class="toggle-switch" id="demo-switch-2" type="checkbox" checked>
|
||
<label for="demo-switch-2"></label>
|
||
</div>
|
||
<p class="mar-no">Show offline contact</p>
|
||
<small class="text-muted">Aenean commodo ligula eget dolor. Aenean massa.</small>
|
||
</li>
|
||
<li class="list-group-item">
|
||
<div class="pull-right">
|
||
<input class="toggle-switch" id="demo-switch-3" type="checkbox">
|
||
<label for="demo-switch-3"></label>
|
||
</div>
|
||
<p class="mar-no">Invisible mode </p>
|
||
<small class="text-muted">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </small>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<hr>
|
||
|
||
<ul class="list-group pad-btm bg-trans">
|
||
<li class="list-header"><p class="text-semibold text-main mar-no">Public Settings</p></li>
|
||
<li class="list-group-item">
|
||
<div class="pull-right">
|
||
<input class="toggle-switch" id="demo-switch-4" type="checkbox" checked>
|
||
<label for="demo-switch-4"></label>
|
||
</div>
|
||
Online status
|
||
</li>
|
||
<li class="list-group-item">
|
||
<div class="pull-right">
|
||
<input class="toggle-switch" id="demo-switch-5" type="checkbox" checked>
|
||
<label for="demo-switch-5"></label>
|
||
</div>
|
||
Show offline contact
|
||
</li>
|
||
<li class="list-group-item">
|
||
<div class="pull-right">
|
||
<input class="toggle-switch" id="demo-switch-6" type="checkbox" checked>
|
||
<label for="demo-switch-6"></label>
|
||
</div>
|
||
Show my device icon
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
<hr>
|
||
|
||
<p class="pad-hor text-semibold text-main mar-no">Task Progress</p>
|
||
<div class="pad-all">
|
||
<p>Upgrade Progress</p>
|
||
<div class="progress progress-sm">
|
||
<div class="progress-bar progress-bar-success" style="width: 15%;"><span class="sr-only">15%</span></div>
|
||
</div>
|
||
<small class="text-muted">15% Completed</small>
|
||
</div>
|
||
<div class="pad-hor">
|
||
<p>Database</p>
|
||
<div class="progress progress-sm">
|
||
<div class="progress-bar progress-bar-danger" style="width: 75%;"><span class="sr-only">75%</span></div>
|
||
</div>
|
||
<small class="text-muted">17/23 Database</small>
|
||
</div>
|
||
|
||
</div>
|
||
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
<!--Third tab (Settings)-->
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
<!--===================================================-->
|
||
<!--END ASIDE-->
|
||
|
||
|
||
<!--MAIN NAVIGATION-->
|
||
<!--===================================================-->
|
||
<nav id="mainnav-container">
|
||
<div id="mainnav">
|
||
|
||
<!--Menu-->
|
||
<!--================================-->
|
||
<div id="mainnav-menu-wrap">
|
||
<div class="nano">
|
||
<div class="nano-content">
|
||
|
||
<!--Profile Widget-->
|
||
<!--================================-->
|
||
<div id="mainnav-profile" class="mainnav-profile">
|
||
<div class="profile-wrap">
|
||
<div class="pad-btm">
|
||
<span class="label label-success pull-right">New</span>
|
||
<img class="img-circle img-sm img-border" src="img/profile-photos/1.png" alt="Profile Picture">
|
||
</div>
|
||
<a href="#profile-nav" class="box-block" data-toggle="collapse" aria-expanded="false">
|
||
<span class="pull-right dropdown-toggle">
|
||
<i class="dropdown-caret"></i>
|
||
</span>
|
||
<p class="mnp-name">Aaron Chavez</p>
|
||
<span class="mnp-desc">aaron.cha@themeon.net</span>
|
||
</a>
|
||
</div>
|
||
<div id="profile-nav" class="collapse list-group bg-trans">
|
||
<a href="#" class="list-group-item">
|
||
<i class="demo-pli-male icon-lg icon-fw"></i> View Profile
|
||
</a>
|
||
<a href="#" class="list-group-item">
|
||
<i class="demo-pli-gear icon-lg icon-fw"></i> Settings
|
||
</a>
|
||
<a href="#" class="list-group-item">
|
||
<i class="demo-pli-information icon-lg icon-fw"></i> Help
|
||
</a>
|
||
<a href="#" class="list-group-item">
|
||
<i class="demo-pli-unlock icon-lg icon-fw"></i> Logout
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--Shortcut buttons-->
|
||
<!--================================-->
|
||
<div id="mainnav-shortcut">
|
||
<ul class="list-unstyled">
|
||
<li class="col-xs-3" data-content="My Profile">
|
||
<a class="shortcut-grid" href="#">
|
||
<i class="demo-psi-male"></i>
|
||
</a>
|
||
</li>
|
||
<li class="col-xs-3" data-content="Messages">
|
||
<a class="shortcut-grid" href="#">
|
||
<i class="demo-psi-speech-bubble-3"></i>
|
||
</a>
|
||
</li>
|
||
<li class="col-xs-3" data-content="Activity">
|
||
<a class="shortcut-grid" href="#">
|
||
<i class="demo-psi-thunder"></i>
|
||
</a>
|
||
</li>
|
||
<li class="col-xs-3" data-content="Lock Screen">
|
||
<a class="shortcut-grid" href="#">
|
||
<i class="demo-psi-lock-2"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!--================================-->
|
||
<!--End shortcut buttons-->
|
||
|
||
|
||
<ul id="mainnav-menu" class="list-group">
|
||
|
||
<!--Category name-->
|
||
<li class="list-header">Navigation</li>
|
||
|
||
<!--Menu list item-->
|
||
<li>
|
||
<a href="index.html">
|
||
<i class="demo-psi-home"></i>
|
||
<span class="menu-title">
|
||
<strong>Dashboard</strong>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
<!--Menu list item-->
|
||
<li class="active-sub">
|
||
<a href="#">
|
||
<i class="demo-psi-split-vertical-2"></i>
|
||
<span class="menu-title">
|
||
<strong>Layouts</strong>
|
||
</span>
|
||
<i class="arrow"></i>
|
||
</a>
|
||
|
||
<!--Submenu-->
|
||
<ul class="collapse in">
|
||
<li><a href="layouts-collapsed-navigation.html">Collapsed Navigation</a></li>
|
||
<li><a href="layouts-offcanvas-navigation.html">Off-Canvas Navigation</a></li>
|
||
<li><a href="layouts-offcanvas-slide-in-navigation.html">Slide-in Navigation</a></li>
|
||
<li class="active-link"><a href="layouts-offcanvas-revealing-navigation.html">Revealing Navigation</a></li>
|
||
<li class="list-divider"></li>
|
||
<li><a href="layouts-aside-right-side.html">Aside on the right side</a></li>
|
||
<li><a href="layouts-aside-left-side.html">Aside on the left side</a></li>
|
||
<li><a href="layouts-aside-dark-theme.html">Dark version of aside</a></li>
|
||
<li class="list-divider"></li>
|
||
<li><a href="layouts-fixed-navbar.html">Fixed Navbar</a></li>
|
||
<li><a href="layouts-fixed-footer.html">Fixed Footer</a></li>
|
||
|
||
</ul>
|
||
</li>
|
||
|
||
<!--Menu list item-->
|
||
<li>
|
||
<a href="widgets.html">
|
||
<i class="demo-psi-gear-2"></i>
|
||
<span class="menu-title">
|
||
<strong>Widgets</strong>
|
||
<span class="pull-right badge badge-warning">24</span>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="list-divider"></li>
|
||
|
||
<!--Category name-->
|
||
<li class="list-header">Components</li>
|
||
|
||
<!--Menu list item-->
|
||
<li>
|
||
<a href="#">
|
||
<i class="demo-psi-boot-2"></i>
|
||
<span class="menu-title">UI Elements</span>
|
||
<i class="arrow"></i>
|
||
</a>
|
||
|
||
<!--Submenu-->
|
||
<ul class="collapse">
|
||
<li><a href="ui-buttons.html">Buttons</a></li>
|
||
<li><a href="ui-panels.html">Panels</a></li>
|
||
<li><a href="ui-modals.html">Modals</a></li>
|
||
<li><a href="ui-progress-bars.html">Progress bars</a></li>
|
||
<li><a href="ui-components.html">Components</a></li>
|
||
<li><a href="ui-typography.html">Typography</a></li>
|
||
<li><a href="ui-list-group.html">List Group</a></li>
|
||
<li><a href="ui-tabs-accordions.html">Tabs & Accordions</a></li>
|
||
<li><a href="ui-alerts-tooltips.html">Alerts & Tooltips</a></li>
|
||
|
||
</ul>
|
||
</li>
|
||
|
||
<!--Menu list item-->
|
||
<li>
|
||
<a href="#">
|
||
<i class="demo-psi-pen-5"></i>
|
||
<span class="menu-title">Forms</span>
|
||
<i class="arrow"></i>
|
||
</a>
|
||
|
||
<!--Submenu-->
|
||
<ul class="collapse">
|
||
<li><a href="forms-general.html">General</a></li>
|
||
<li><a href="forms-components.html">Advanced Components</a></li>
|
||
<li><a href="forms-validation.html">Validation</a></li>
|
||
<li><a href="forms-wizard.html">Wizard</a></li>
|
||
<li><a href="forms-file-upload.html">File Upload</a></li>
|
||
<li><a href="forms-text-editor.html">Text Editor</a></li>
|
||
<li><a href="forms-markdown.html">Markdown</a></li>
|
||
|
||
</ul>
|
||
</li>
|
||
|
||
<!--Menu list item-->
|
||
<li>
|
||
<a href="#">
|
||
<i class="demo-psi-receipt-4"></i>
|
||
<span class="menu-title">Tables</span>
|
||
<i class="arrow"></i>
|
||
</a>
|
||
|
||
<!--Submenu-->
|
||
<ul class="collapse">
|
||
<li><a href="tables-static.html">Static Tables</a></li>
|
||
<li><a href="tables-bootstrap.html">Bootstrap Tables</a></li>
|
||
<li><a href="tables-datatable.html">Data Tables</a></li>
|
||
<li><a href="tables-footable.html">Foo Tables</a></li>
|
||
|
||
</ul>
|
||
</li>
|
||
|
||
<!--Menu list item-->
|
||
<li>
|
||
<a href="charts.html">
|
||
<i class="demo-psi-bar-chart"></i>
|
||
<span class="menu-title">Charts</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="list-divider"></li>
|
||
|
||
<!--Category name-->
|
||
<li class="list-header">More</li>
|
||
|
||
<!--Menu list item-->
|
||
<li>
|
||
<a href="#">
|
||
<i class="demo-psi-repair"></i>
|
||
<span class="menu-title">Miscellaneous</span>
|
||
<i class="arrow"></i>
|
||
</a>
|
||
|
||
<!--Submenu-->
|
||
<ul class="collapse">
|
||
<li><a href="misc-timeline.html">Timeline</a></li>
|
||
<li><a href="misc-calendar.html">Calendar</a></li>
|
||
<li><a href="misc-maps.html">Google Maps</a></li>
|
||
|
||
</ul>
|
||
</li>
|
||
|
||
<!--Menu list item-->
|
||
<li>
|
||
<a href="#">
|
||
<i class="demo-psi-mail"></i>
|
||
<span class="menu-title">Email</span>
|
||
<i class="arrow"></i>
|
||
</a>
|
||
|
||
<!--Submenu-->
|
||
<ul class="collapse">
|
||
<li><a href="mailbox.html">Inbox</a></li>
|
||
<li><a href="mailbox-message.html">View Message</a></li>
|
||
<li><a href="mailbox-compose.html">Compose Message</a></li>
|
||
<li><a href="mailbox-templates.html">Email Templates<span class="label label-info pull-right">New</span></a></li>
|
||
|
||
</ul>
|
||
</li>
|
||
|
||
<!--Menu list item-->
|
||
<li>
|
||
<a href="#">
|
||
<i class="demo-psi-file-html"></i>
|
||
<span class="menu-title">Pages</span>
|
||
<i class="arrow"></i>
|
||
</a>
|
||
|
||
<!--Submenu-->
|
||
<ul class="collapse">
|
||
<li><a href="pages-blank.html">Blank Page</a></li>
|
||
<li><a href="pages-profile.html">Profile</a></li>
|
||
<li><a href="pages-search-results.html">Search Results</a></li>
|
||
<li><a href="pages-faq.html">FAQ</a></li>
|
||
<li class="list-divider"></li>
|
||
<li><a href="pages-404.html">404 Error</a></li>
|
||
<li><a href="pages-500.html">500 Error</a></li>
|
||
<li class="list-divider"></li>
|
||
<li><a href="pages-login.html">Login</a></li>
|
||
<li><a href="pages-register.html">Register</a></li>
|
||
<li><a href="pages-password-reminder.html">Password Reminder</a></li>
|
||
<li><a href="pages-lock-screen.html">Lock Screen</a></li>
|
||
|
||
</ul>
|
||
</li>
|
||
|
||
|
||
<!--Menu list item-->
|
||
<li>
|
||
<a href="#">
|
||
<i class="demo-psi-tactic"></i>
|
||
<span class="menu-title">Menu Level</span>
|
||
<i class="arrow"></i>
|
||
</a>
|
||
|
||
<!--Submenu-->
|
||
<ul class="collapse">
|
||
<li><a href="#">Second Level Item</a></li>
|
||
<li><a href="#">Second Level Item</a></li>
|
||
<li><a href="#">Second Level Item</a></li>
|
||
<li class="list-divider"></li>
|
||
<li>
|
||
<a href="#">Third Level<i class="arrow"></i></a>
|
||
|
||
<!--Submenu-->
|
||
<ul class="collapse">
|
||
<li><a href="#">Third Level Item</a></li>
|
||
<li><a href="#">Third Level Item</a></li>
|
||
<li><a href="#">Third Level Item</a></li>
|
||
<li><a href="#">Third Level Item</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#">Third Level<i class="arrow"></i></a>
|
||
|
||
<!--Submenu-->
|
||
<ul class="collapse">
|
||
<li><a href="#">Third Level Item</a></li>
|
||
<li><a href="#">Third Level Item</a></li>
|
||
<li><a href="#">Third Level Item</a></li>
|
||
<li class="list-divider"></li>
|
||
<li><a href="#">Third Level Item</a></li>
|
||
<li><a href="#">Third Level Item</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
|
||
<li class="list-divider"></li>
|
||
|
||
<!--Category name-->
|
||
<li class="list-header">Extras</li>
|
||
|
||
<!--Menu list item-->
|
||
<li>
|
||
<a href="#">
|
||
<i class="demo-psi-happy"></i>
|
||
<span class="menu-title">Icons Pack</span>
|
||
<i class="arrow"></i>
|
||
</a>
|
||
|
||
<!--Submenu-->
|
||
<ul class="collapse">
|
||
<li><a href="icons-ionicons.html">Ion Icons</a></li>
|
||
<li><a href="icons-themify.html">Themify</a></li>
|
||
<li><a href="icons-font-awesome.html">Font Awesome</a></li>
|
||
|
||
</ul>
|
||
</li>
|
||
|
||
<!--Menu list item-->
|
||
<li>
|
||
<a href="#">
|
||
<i class="demo-psi-medal-2"></i>
|
||
<span class="menu-title">
|
||
PREMIUM ICONS
|
||
<span class="label label-danger pull-right">BEST</span>
|
||
</span>
|
||
</a>
|
||
|
||
<!--Submenu-->
|
||
<ul class="collapse">
|
||
<li><a href="premium-line-icons.html">Line Icons Pack</a></li>
|
||
<li><a href="premium-solid-icons.html">Solid Icons Pack</a></li>
|
||
|
||
</ul>
|
||
</li>
|
||
|
||
<!--Menu list item-->
|
||
<li>
|
||
<a href="helper-classes.html">
|
||
<i class="demo-psi-inbox-full"></i>
|
||
<span class="menu-title">Helper Classes</span>
|
||
</a>
|
||
</li> </ul>
|
||
|
||
|
||
<!--Widget-->
|
||
<!--================================-->
|
||
<div class="mainnav-widget">
|
||
|
||
<!-- Show the button on collapsed navigation -->
|
||
<div class="show-small">
|
||
<a href="#" data-toggle="menu-widget" data-target="#demo-wg-server">
|
||
<i class="demo-pli-monitor-2"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Hide the content on collapsed navigation -->
|
||
<div id="demo-wg-server" class="hide-small mainnav-widget-content">
|
||
<ul class="list-group">
|
||
<li class="list-header pad-no pad-ver">Server Status</li>
|
||
<li class="mar-btm">
|
||
<span class="label label-primary pull-right">15%</span>
|
||
<p>CPU Usage</p>
|
||
<div class="progress progress-sm">
|
||
<div class="progress-bar progress-bar-primary" style="width: 15%;">
|
||
<span class="sr-only">15%</span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="mar-btm">
|
||
<span class="label label-purple pull-right">75%</span>
|
||
<p>Bandwidth</p>
|
||
<div class="progress progress-sm">
|
||
<div class="progress-bar progress-bar-purple" style="width: 75%;">
|
||
<span class="sr-only">75%</span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="pad-ver"><a href="#" class="btn btn-success btn-bock">View Details</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!--================================-->
|
||
<!--End widget-->
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--================================-->
|
||
<!--End menu-->
|
||
|
||
</div>
|
||
</nav>
|
||
<!--===================================================-->
|
||
<!--END MAIN NAVIGATION-->
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<!-- FOOTER -->
|
||
<!--===================================================-->
|
||
<footer id="footer">
|
||
|
||
<!-- Visible when footer positions are fixed -->
|
||
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
|
||
<div class="show-fixed pull-right">
|
||
You have <a href="#" class="text-bold text-main"><span class="label label-danger">3</span> pending action.</a>
|
||
</div>
|
||
|
||
|
||
|
||
<!-- Visible when footer positions are static -->
|
||
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
|
||
<div class="hide-fixed pull-right pad-rgt">
|
||
14GB of <strong>512GB</strong> Free.
|
||
</div>
|
||
|
||
|
||
|
||
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
|
||
<!-- Remove the class "show-fixed" and "hide-fixed" to make the content always appears. -->
|
||
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
|
||
|
||
<p class="pad-lft">© 2016 Your Company</p>
|
||
|
||
|
||
|
||
</footer>
|
||
<!--===================================================-->
|
||
<!-- END FOOTER -->
|
||
|
||
|
||
<!-- SCROLL PAGE BUTTON -->
|
||
<!--===================================================-->
|
||
<button class="scroll-top btn">
|
||
<i class="pci-chevron chevron-up"></i>
|
||
</button>
|
||
<!--===================================================-->
|
||
|
||
|
||
|
||
</div>
|
||
<!--===================================================-->
|
||
<!-- END OF CONTAINER -->
|
||
|
||
|
||
|
||
|
||
|
||
</body>
|
||
</html>
|