<!DOCTYPE html>
<html lang="en">
<head>
<!--
===
This comment should NOT be removed.
Charisma v2.0.0
Copyright 2012-2014 Muhammad Usman
Licensed under the Apache License v2.0
http://www.apache.org/licenses/LICENSE-2.0
http://usman.it
http://twitter.com/halalit_usman
===
-->
<meta charset="utf-8">
<title>Free HTML5 Bootstrap Admin Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Charisma, a fully featured, responsive, HTML5, Bootstrap admin template.">
<meta name="author" content="Muhammad Usman">
<!-- The styles -->
<link id="bs-css" href="css/bootstrap-cerulean.min.css" rel="stylesheet">
<link href="css/charisma-app.css" rel="stylesheet">
<link href='bower_components/fullcalendar/dist/fullcalendar.css' rel='stylesheet'>
<link href='bower_components/fullcalendar/dist/fullcalendar.print.css' rel='stylesheet' media='print'>
<link href='bower_components/chosen/chosen.min.css' rel='stylesheet'>
<link href='bower_components/colorbox/example3/colorbox.css' rel='stylesheet'>
<link href='bower_components/responsive-tables/responsive-tables.css' rel='stylesheet'>
<link href='bower_components/bootstrap-tour/build/css/bootstrap-tour.min.css' rel='stylesheet'>
<link href='css/jquery.noty.css' rel='stylesheet'>
<link href='css/noty_theme_default.css' rel='stylesheet'>
<link href='css/elfinder.min.css' rel='stylesheet'>
<link href='css/elfinder.theme.css' rel='stylesheet'>
<link href='css/jquery.iphone.toggle.css' rel='stylesheet'>
<link href='css/uploadify.css' rel='stylesheet'>
<link href='css/animate.min.css' rel='stylesheet'>
<!-- jQuery -->
<script src="bower_components/jquery/jquery.min.js"></script>
<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- The fav icon -->
<link rel="shortcut icon" href="img/favicon.ico">
</head>
<body>
<!-- topbar starts -->
<div class="navbar navbar-default" role="navigation">
<div class="navbar-inner">
<button type="button" class="navbar-toggle pull-left animated flip">
<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="index.html"> <img alt="Charisma Logo" src="img/logo20.png" class="hidden-xs"/>
<span>Charisma</span></a>
<!-- user dropdown starts -->
<div class="btn-group pull-right">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-user"></i><span class="hidden-sm hidden-xs"> admin</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li class="divider"></li>
<li><a href="login.html">Logout</a></li>
</ul>
</div>
<!-- user dropdown ends -->
<!-- theme selector starts -->
<div class="btn-group pull-right theme-container animated tada">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-tint"></i><span
class="hidden-sm hidden-xs"> Change Theme / Skin</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="themes">
<li><a data-value="classic" href="#"><i class="whitespace"></i> Classic</a></li>
<li><a data-value="cerulean" href="#"><i class="whitespace"></i> Cerulean</a></li>
<li><a data-value="cyborg" href="#"><i class="whitespace"></i> Cyborg</a></li>
<li><a data-value="simplex" href="#"><i class="whitespace"></i> Simplex</a></li>
<li><a data-value="darkly" href="#"><i class="whitespace"></i> Darkly</a></li>
<li><a data-value="lumen" href="#"><i class="whitespace"></i> Lumen</a></li>
<li><a data-value="slate" href="#"><i class="whitespace"></i> Slate</a></li>
<li><a data-value="spacelab" href="#"><i class="whitespace"></i> Spacelab</a></li>
<li><a data-value="united" href="#"><i class="whitespace"></i> United</a></li>
</ul>
</div>
<!-- theme selector ends -->
<ul class="collapse navbar-collapse nav navbar-nav top-menu">
<li><a href="#"><i class="glyphicon glyphicon-globe"></i> Visit Site</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown"><i class="glyphicon glyphicon-star"></i> Dropdown <span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li>
<form class="navbar-search pull-left">
<input placeholder="Search" class="search-query form-control col-md-10" name="query"
type="text">
</form>
</li>
</ul>
</div>
</div>
<!-- topbar ends -->
<div class="ch-container">
<div class="row">
<!-- left menu starts -->
<div class="col-sm-2 col-lg-2">
<div class="sidebar-nav">
<div class="nav-canvas">
<div class="nav-sm nav nav-stacked">
</div>
<ul class="nav nav-pills nav-stacked main-menu">
<li class="nav-header">Main</li>
<li><a class="ajax-link" href="index.html"><i class="glyphicon glyphicon-home"></i><span> Dashboard</span></a>
</li>
<li><a class="ajax-link" href="ui.html"><i class="glyphicon glyphicon-eye-open"></i><span> UI Features</span></a>
</li>
<li><a class="ajax-link" href="form.html"><i
class="glyphicon glyphicon-edit"></i><span> Forms</span></a></li>
<li><a class="ajax-link" href="chart.html"><i class="glyphicon glyphicon-list-alt"></i><span> Charts</span></a>
</li>
<li><a class="ajax-link" href="typography.html"><i class="glyphicon glyphicon-font"></i><span> Typography</span></a>
</li>
<li><a class="ajax-link" href="gallery.html"><i class="glyphicon glyphicon-picture"></i><span> Gallery</span></a>
</li>
<li class="nav-header hidden-md">Sample Section</li>
<li><a class="ajax-link" href="table.html"><i
class="glyphicon glyphicon-align-justify"></i><span> Tables</span></a></li>
<li class="accordion">
<a href="#"><i class="glyphicon glyphicon-plus"></i><span> Accordion Menu</span></a>
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Child Menu 1</a></li>
<li><a href="#">Child Menu 2</a></li>
</ul>
</li>
<li><a class="ajax-link" href="calendar.html"><i class="glyphicon glyphicon-calendar"></i><span> Calendar</span></a>
</li>
<li><a class="ajax-link" href="grid.html"><i
class="glyphicon glyphicon-th"></i><span> Grid</span></a></li>
<li><a href="tour.html"><i class="glyphicon glyphicon-globe"></i><span> Tour</span></a></li>
<li><a class="ajax-link" href="icon.html"><i
class="glyphicon glyphicon-star"></i><span> Icons</span></a></li>
<li><a href="error.html"><i class="glyphicon glyphicon-ban-circle"></i><span> Error Page</span></a>
</li>
<li><a href="login.html"><i class="glyphicon glyphicon-lock"></i><span> Login Page</span></a>
</li>
</ul>
<label id="for-is-ajax" for="is-ajax"><input id="is-ajax" type="checkbox"> Ajax on menu</label>
</div>
</div>
</div>
<!--/span-->
<!-- left menu ends -->
<noscript>
<div class="alert alert-block col-md-12">
<h4 class="alert-heading">Warning!</h4>
<p>You need to have <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a>
enabled to use this site.</p>
</div>
</noscript>
<div id="content" class="col-lg-10 col-sm-10">
<!-- content starts -->
<div>
<ul class="breadcrumb">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Typography</a>
</li>
</ul>
</div>
<div class="row">
<div class="box col-md-9">
<div class="box-inner">
<div class="box-header well" data-original-title="">
<h2><i class="glyphicon glyphicon-font"></i> Typography</h2>
<div class="box-icon">
<a href="#" class="btn btn-setting btn-round btn-default"><i
class="glyphicon glyphicon-cog"></i></a>
<a href="#" class="btn btn-minimize btn-round btn-default"><i
class="glyphicon glyphicon-chevron-up"></i></a>
<a href="#" class="btn btn-close btn-round btn-default"><i
class="glyphicon glyphicon-remove"></i></a>
</div>
</div>
<div class="box-content">
<div class="page-header">
<h1>Typography
<small>Headings, paragraphs, lists, and other inline type elements</small>
</h1>
</div>
<div class="row ">
<div class="col-md-4">
<h3>Sample text and paragraphs</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
quis ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel
eros. In sed ornare nulla. Donec consectetur, velit a pharetra ultricies, diam lorem lacinia
risus, ac commodo orci erat eu massa. Sed sit amet nulla ipsum. Donec felis mauris,
vulputate sed tempor at, aliquam a ligula. Pellentesque non pulvinar nisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
quis ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel
eros. In sed ornare nulla. Donec consectetur, velit a pharetra ultricies, diam lorem lacinia
risus, ac commodo orci erat eu massa. Sed sit amet nulla ipsum. Donec felis mauris,
vulputate sed tempor at, aliquam a ligula. Pellentesque non pulvinar nisi.
</p>
</div>
<div class="col-md-4">
<h3>Example body text</h3>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut
id elit.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non
commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio
dui.</p>
</div>
<div class="col-md-4 ">
<div class="well">
<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>
</div>
</div>
</div>
<!--/row -->
<div class="row">
<div class="col-md-12">
<h3>Example blockquotes</h3>
<div class="row">
<div class="col-md-6">
<p>Default blockquotes are styled as such:</p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante venenatis.</p>
<small>Someone famous in <cite title="">Body of work</cite></small>
</blockquote>
</div>
<div class="col-md-6">
<p>You can always float your blockquote to the right:</p>
<blockquote class="pull-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante venenatis.</p>
<small>Someone famous in <cite title="">Body of work</cite></small>
</blockquote>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>More Sample Text</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
quis ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel
eros. In sed ornare nulla. Donec consectetur, velit a pharetra ultricies, diam lorem lacinia
risus, ac commodo orci erat eu massa. Sed sit amet nulla ipsum. Donec felis mauris,
vulputate sed tempor at, aliquam a ligula. Pellentesque non pulvinar nisi.
</p>
</div>
<div class="col-md-6">
<h3>And Paragraphs</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
quis ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel
eros. In sed ornare nulla. Donec consectetur, velit a pharetra ultricies, diam lorem lacinia
risus, ac commodo orci erat eu massa. Sed sit amet nulla ipsum. Donec felis mauris,
vulputate sed tempor at, aliquam a ligula. Pellentesque non pulvinar nisi.
</p>
</div>
</div>
</div>
</div>
</div>
<!--/span-->
<div class="box col-md-3">
<div class="box-inner">
<div class="box-header well">
<h2>Unordered List</h2>
<div class="box-icon">
<a href="#" class="btn btn-close btn-round btn-default"><i
class="glyphicon glyphicon-remove"></i></a>
</div>
</div>
<div class="box-content">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</div>
</div>
</div>
<!--/span-->
<div class="box col-md-3">
<div class="box-inner">
<div class="box-header well" data-original-title="">
<h2>Ordered List</h2>
<div class="box-icon">
<a href="#" class="btn btn-close btn-round btn-default"><i
class="glyphicon glyphicon-remove"></i></a>
</div>
</div>
<div class="box-content">
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
</div>
</div>
</div>
<!--/span-->
<div class="box col-md-3">
<div class="box-inner">
<div class="box-header well" data-original-title="">
<h2>Description List</h2>
<div class="box-icon">
<a href="#" class="btn btn-close btn-round btn-default"><i
class="glyphicon glyphicon-remove"></i></a>
</div>
</div>
<div class="box-content">
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
</div>
</div>
<!--/span-->
</div><!--/row-->
<!-- content ends -->
</div><!--/#content.col-md-0-->
</div><!--/fluid-row-->
<!-- Ad, you can remove it -->
<div class="row">
<div class="col-md-9 col-lg-9 col-xs-9 hidden-xs">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Charisma Demo 2 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-5108790028230107"
data-ad-slot="3193373905"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="col-md-2 col-lg-3 col-sm-12 col-xs-12 email-subscription-footer">
<div class="mc_embed_signup">
<form action="//halalit.us3.list-manage.com/subscribe/post?u=444b176aa3c39f656c66381f6&id=eeb0c04e84" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div>
<label>Keep up with my work</label>
<input type="email" value="" name="EMAIL" class="email" placeholder="Email address" required>
<div class="power_field"><input type="text" name="b_444b176aa3c39f656c66381f6_eeb0c04e84" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<!-- Ad ends -->
<hr>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Settings</h3>
</div>
<div class="modal-body">
<p>Here settings can be configured...</p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-primary" data-dismiss="modal">Save changes</a>
</div>
</div>
</div>
</div>
<footer class="row">
<p class="col-md-9 col-sm-9 col-xs-12 copyright">© <a href="http://usman.it" target="_blank">Muhammad
Usman</a> 2012 - 2015</p>
<p class="col-md-3 col-sm-3 col-xs-12 powered-by">Powered by: <a
href="http://usman.it/free-responsive-admin-template">Charisma</a></p>
</footer>
</div><!--/.fluid-container-->
<!-- external javascript -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- library for cookie management -->
<script src="js/jquery.cookie.js"></script>
<!-- calender plugin -->
<script src='bower_components/moment/min/moment.min.js'></script>
<script src='bower_components/fullcalendar/dist/fullcalendar.min.js'></script>
<!-- data table plugin -->
<script src='js/jquery.dataTables.min.js'></script>
<!-- select or dropdown enhancer -->
<script src="bower_components/chosen/chosen.jquery.min.js"></script>
<!-- plugin for gallery image view -->
<script src="bower_components/colorbox/jquery.colorbox-min.js"></script>
<!-- notification plugin -->
<script src="js/jquery.noty.js"></script>
<!-- library for making tables responsive -->
<script src="bower_components/responsive-tables/responsive-tables.js"></script>
<!-- tour plugin -->
<script src="bower_components/bootstrap-tour/build/js/bootstrap-tour.min.js"></script>
<!-- star rating plugin -->
<script src="js/jquery.raty.min.js"></script>
<!-- for iOS style toggle switch -->
<script src="js/jquery.iphone.toggle.js"></script>
<!-- autogrowing textarea plugin -->
<script src="js/jquery.autogrow-textarea.js"></script>
<!-- multiple file upload plugin -->
<script src="js/jquery.uploadify-3.1.min.js"></script>
<!-- history.js for cross-browser state change on ajax -->
<script src="js/jquery.history.js"></script>
<!-- application script for Charisma demo -->
<script src="js/charisma.js"></script>
</body>
</html>