5 <meta http-equiv=
"X-UA-Compatible" content=
"IE=edge">
6 <title>AdminLTE
2 | Widgets
</title>
7 <!-- Tell the browser to be responsive to screen width -->
8 <meta content=
"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name=
"viewport">
9 <!-- Bootstrap 3.3.6 -->
10 <link rel=
"stylesheet" href=
"../bootstrap/css/bootstrap.min.css">
12 <link rel=
"stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
14 <link rel=
"stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
16 <link rel=
"stylesheet" href=
"../dist/css/AdminLTE.min.css">
17 <!-- AdminLTE Skins. Choose a skin from the css/skins
18 folder instead of downloading all of them to reduce the load. -->
19 <link rel=
"stylesheet" href=
"../dist/css/skins/_all-skins.min.css">
21 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
22 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
24 <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
25 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
28 <body class=
"hold-transition skin-blue sidebar-mini">
31 <header class=
"main-header">
33 <a href=
"../index2.html" class=
"logo">
34 <!-- mini logo for sidebar mini 50x50 pixels -->
35 <span class=
"logo-mini"><b>A
</b>LT
</span>
36 <!-- logo for regular state and mobile devices -->
37 <span class=
"logo-lg"><b>Admin
</b>LTE
</span>
39 <!-- Header Navbar: style can be found in header.less -->
40 <nav class=
"navbar navbar-static-top">
41 <!-- Sidebar toggle button-->
42 <a href=
"#" class=
"sidebar-toggle" data-toggle=
"offcanvas" role=
"button">
43 <span class=
"sr-only">Toggle navigation
</span>
44 <span class=
"icon-bar"></span>
45 <span class=
"icon-bar"></span>
46 <span class=
"icon-bar"></span>
49 <div class=
"navbar-custom-menu">
50 <ul class=
"nav navbar-nav">
51 <!-- Messages: style can be found in dropdown.less-->
52 <li class=
"dropdown messages-menu">
53 <a href=
"#" class=
"dropdown-toggle" data-toggle=
"dropdown">
54 <i class=
"fa fa-envelope-o"></i>
55 <span class=
"label label-success">4</span>
57 <ul class=
"dropdown-menu">
58 <li class=
"header">You have
4 messages
</li>
60 <!-- inner menu: contains the actual data -->
62 <li><!-- start message -->
64 <div class=
"pull-left">
65 <img src=
"../dist/img/user2-160x160.jpg" class=
"img-circle" alt=
"User Image">
69 <small><i class=
"fa fa-clock-o"></i> 5 mins
</small>
71 <p>Why not buy a new awesome theme?
</p>
77 <div class=
"pull-left">
78 <img src=
"../dist/img/user3-128x128.jpg" class=
"img-circle" alt=
"User Image">
82 <small><i class=
"fa fa-clock-o"></i> 2 hours
</small>
84 <p>Why not buy a new awesome theme?
</p>
89 <div class=
"pull-left">
90 <img src=
"../dist/img/user4-128x128.jpg" class=
"img-circle" alt=
"User Image">
94 <small><i class=
"fa fa-clock-o"></i> Today
</small>
96 <p>Why not buy a new awesome theme?
</p>
101 <div class=
"pull-left">
102 <img src=
"../dist/img/user3-128x128.jpg" class=
"img-circle" alt=
"User Image">
106 <small><i class=
"fa fa-clock-o"></i> Yesterday
</small>
108 <p>Why not buy a new awesome theme?
</p>
113 <div class=
"pull-left">
114 <img src=
"../dist/img/user4-128x128.jpg" class=
"img-circle" alt=
"User Image">
118 <small><i class=
"fa fa-clock-o"></i> 2 days
</small>
120 <p>Why not buy a new awesome theme?
</p>
125 <li class=
"footer"><a href=
"#">See All Messages
</a></li>
128 <!-- Notifications: style can be found in dropdown.less -->
129 <li class=
"dropdown notifications-menu">
130 <a href=
"#" class=
"dropdown-toggle" data-toggle=
"dropdown">
131 <i class=
"fa fa-bell-o"></i>
132 <span class=
"label label-warning">10</span>
134 <ul class=
"dropdown-menu">
135 <li class=
"header">You have
10 notifications
</li>
137 <!-- inner menu: contains the actual data -->
141 <i class=
"fa fa-users text-aqua"></i> 5 new members joined today
146 <i class=
"fa fa-warning text-yellow"></i> Very long description here that may not fit into the
147 page and may cause design problems
152 <i class=
"fa fa-users text-red"></i> 5 new members joined
157 <i class=
"fa fa-shopping-cart text-green"></i> 25 sales made
162 <i class=
"fa fa-user text-light-blue"></i> You changed your username
167 <li class=
"footer"><a href=
"#">View all
</a></li>
170 <!-- Tasks: style can be found in dropdown.less -->
171 <li class=
"dropdown tasks-menu">
172 <a href=
"#" class=
"dropdown-toggle" data-toggle=
"dropdown">
173 <i class=
"fa fa-flag-o"></i>
174 <span class=
"label label-danger">9</span>
176 <ul class=
"dropdown-menu">
177 <li class=
"header">You have
9 tasks
</li>
179 <!-- inner menu: contains the actual data -->
181 <li><!-- Task item -->
185 <small class=
"pull-right">20%
</small>
187 <div class=
"progress xs">
188 <div class=
"progress-bar progress-bar-aqua" style=
"width: 20%" role=
"progressbar" aria-valuenow=
"20" aria-valuemin=
"0" aria-valuemax=
"100">
189 <span class=
"sr-only">20% Complete
</span>
194 <!-- end task item -->
195 <li><!-- Task item -->
199 <small class=
"pull-right">40%
</small>
201 <div class=
"progress xs">
202 <div class=
"progress-bar progress-bar-green" style=
"width: 40%" role=
"progressbar" aria-valuenow=
"20" aria-valuemin=
"0" aria-valuemax=
"100">
203 <span class=
"sr-only">40% Complete
</span>
208 <!-- end task item -->
209 <li><!-- Task item -->
212 Some task I need to do
213 <small class=
"pull-right">60%
</small>
215 <div class=
"progress xs">
216 <div class=
"progress-bar progress-bar-red" style=
"width: 60%" role=
"progressbar" aria-valuenow=
"20" aria-valuemin=
"0" aria-valuemax=
"100">
217 <span class=
"sr-only">60% Complete
</span>
222 <!-- end task item -->
223 <li><!-- Task item -->
226 Make beautiful transitions
227 <small class=
"pull-right">80%
</small>
229 <div class=
"progress xs">
230 <div class=
"progress-bar progress-bar-yellow" style=
"width: 80%" role=
"progressbar" aria-valuenow=
"20" aria-valuemin=
"0" aria-valuemax=
"100">
231 <span class=
"sr-only">80% Complete
</span>
236 <!-- end task item -->
240 <a href=
"#">View all tasks
</a>
244 <!-- User Account: style can be found in dropdown.less -->
245 <li class=
"dropdown user user-menu">
246 <a href=
"#" class=
"dropdown-toggle" data-toggle=
"dropdown">
247 <img src=
"../dist/img/user2-160x160.jpg" class=
"user-image" alt=
"User Image">
248 <span class=
"hidden-xs">Alexander Pierce
</span>
250 <ul class=
"dropdown-menu">
252 <li class=
"user-header">
253 <img src=
"../dist/img/user2-160x160.jpg" class=
"img-circle" alt=
"User Image">
256 Alexander Pierce - Web Developer
257 <small>Member since Nov.
2012</small>
261 <li class=
"user-body">
263 <div class=
"col-xs-4 text-center">
264 <a href=
"#">Followers
</a>
266 <div class=
"col-xs-4 text-center">
267 <a href=
"#">Sales
</a>
269 <div class=
"col-xs-4 text-center">
270 <a href=
"#">Friends
</a>
276 <li class=
"user-footer">
277 <div class=
"pull-left">
278 <a href=
"#" class=
"btn btn-default btn-flat">Profile
</a>
280 <div class=
"pull-right">
281 <a href=
"#" class=
"btn btn-default btn-flat">Sign out
</a>
286 <!-- Control Sidebar Toggle Button -->
288 <a href=
"#" data-toggle=
"control-sidebar"><i class=
"fa fa-gears"></i></a>
294 <!-- Left side column. contains the logo and sidebar -->
295 <aside class=
"main-sidebar">
296 <!-- sidebar: style can be found in sidebar.less -->
297 <section class=
"sidebar">
298 <!-- Sidebar user panel -->
299 <div class=
"user-panel">
300 <div class=
"pull-left image">
301 <img src=
"../dist/img/user2-160x160.jpg" class=
"img-circle" alt=
"User Image">
303 <div class=
"pull-left info">
304 <p>Alexander Pierce
</p>
305 <a href=
"#"><i class=
"fa fa-circle text-success"></i> Online
</a>
309 <form action=
"#" method=
"get" class=
"sidebar-form">
310 <div class=
"input-group">
311 <input type=
"text" name=
"q" class=
"form-control" placeholder=
"Search...">
312 <span class=
"input-group-btn">
313 <button type=
"submit" name=
"search" id=
"search-btn" class=
"btn btn-flat"><i class=
"fa fa-search"></i>
318 <!-- /.search form -->
319 <!-- sidebar menu: : style can be found in sidebar.less -->
320 <ul class=
"sidebar-menu">
321 <li class=
"header">MAIN NAVIGATION
</li>
322 <li class=
"treeview">
324 <i class=
"fa fa-dashboard"></i> <span>Dashboard
</span>
325 <span class=
"pull-right-container">
326 <i class=
"fa fa-angle-left pull-right"></i>
329 <ul class=
"treeview-menu">
330 <li><a href=
"../index.html"><i class=
"fa fa-circle-o"></i> Dashboard v1
</a></li>
331 <li><a href=
"../index2.html"><i class=
"fa fa-circle-o"></i> Dashboard v2
</a></li>
334 <li class=
"treeview">
336 <i class=
"fa fa-files-o"></i>
337 <span>Layout Options
</span>
338 <span class=
"pull-right-container">
339 <span class=
"label label-primary pull-right">4</span>
342 <ul class=
"treeview-menu">
343 <li><a href=
"layout/top-nav.html"><i class=
"fa fa-circle-o"></i> Top Navigation
</a></li>
344 <li><a href=
"layout/boxed.html"><i class=
"fa fa-circle-o"></i> Boxed
</a></li>
345 <li><a href=
"layout/fixed.html"><i class=
"fa fa-circle-o"></i> Fixed
</a></li>
346 <li><a href=
"layout/collapsed-sidebar.html"><i class=
"fa fa-circle-o"></i> Collapsed Sidebar
</a></li>
350 <a href=
"widgets.html">
351 <i class=
"fa fa-th"></i> <span>Widgets
</span>
352 <span class=
"pull-right-container">
353 <small class=
"label pull-right bg-green">new
</small>
357 <li class=
"treeview">
359 <i class=
"fa fa-pie-chart"></i>
361 <span class=
"pull-right-container">
362 <i class=
"fa fa-angle-left pull-right"></i>
365 <ul class=
"treeview-menu">
366 <li><a href=
"charts/chartjs.html"><i class=
"fa fa-circle-o"></i> ChartJS
</a></li>
367 <li><a href=
"charts/morris.html"><i class=
"fa fa-circle-o"></i> Morris
</a></li>
368 <li><a href=
"charts/flot.html"><i class=
"fa fa-circle-o"></i> Flot
</a></li>
369 <li><a href=
"charts/inline.html"><i class=
"fa fa-circle-o"></i> Inline charts
</a></li>
372 <li class=
"treeview">
374 <i class=
"fa fa-laptop"></i>
375 <span>UI Elements
</span>
376 <span class=
"pull-right-container">
377 <i class=
"fa fa-angle-left pull-right"></i>
380 <ul class=
"treeview-menu">
381 <li><a href=
"UI/general.html"><i class=
"fa fa-circle-o"></i> General
</a></li>
382 <li><a href=
"UI/icons.html"><i class=
"fa fa-circle-o"></i> Icons
</a></li>
383 <li><a href=
"UI/buttons.html"><i class=
"fa fa-circle-o"></i> Buttons
</a></li>
384 <li><a href=
"UI/sliders.html"><i class=
"fa fa-circle-o"></i> Sliders
</a></li>
385 <li><a href=
"UI/timeline.html"><i class=
"fa fa-circle-o"></i> Timeline
</a></li>
386 <li><a href=
"UI/modals.html"><i class=
"fa fa-circle-o"></i> Modals
</a></li>
389 <li class=
"treeview">
391 <i class=
"fa fa-edit"></i> <span>Forms
</span>
392 <span class=
"pull-right-container">
393 <i class=
"fa fa-angle-left pull-right"></i>
396 <ul class=
"treeview-menu">
397 <li><a href=
"forms/general.html"><i class=
"fa fa-circle-o"></i> General Elements
</a></li>
398 <li><a href=
"forms/advanced.html"><i class=
"fa fa-circle-o"></i> Advanced Elements
</a></li>
399 <li><a href=
"forms/editors.html"><i class=
"fa fa-circle-o"></i> Editors
</a></li>
402 <li class=
"treeview">
404 <i class=
"fa fa-table"></i> <span>Tables
</span>
405 <span class=
"pull-right-container">
406 <i class=
"fa fa-angle-left pull-right"></i>
409 <ul class=
"treeview-menu">
410 <li><a href=
"tables/simple.html"><i class=
"fa fa-circle-o"></i> Simple tables
</a></li>
411 <li><a href=
"tables/data.html"><i class=
"fa fa-circle-o"></i> Data tables
</a></li>
415 <a href=
"calendar.html">
416 <i class=
"fa fa-calendar"></i> <span>Calendar
</span>
417 <span class=
"pull-right-container">
418 <small class=
"label pull-right bg-red">3</small>
419 <small class=
"label pull-right bg-blue">17</small>
424 <a href=
"mailbox/mailbox.html">
425 <i class=
"fa fa-envelope"></i> <span>Mailbox
</span>
426 <span class=
"pull-right-container">
427 <small class=
"label pull-right bg-yellow">12</small>
428 <small class=
"label pull-right bg-green">16</small>
429 <small class=
"label pull-right bg-red">5</small>
433 <li class=
"treeview">
435 <i class=
"fa fa-folder"></i> <span>Examples
</span>
436 <span class=
"pull-right-container">
437 <i class=
"fa fa-angle-left pull-right"></i>
440 <ul class=
"treeview-menu">
441 <li><a href=
"examples/invoice.html"><i class=
"fa fa-circle-o"></i> Invoice
</a></li>
442 <li><a href=
"examples/profile.html"><i class=
"fa fa-circle-o"></i> Profile
</a></li>
443 <li><a href=
"examples/login.html"><i class=
"fa fa-circle-o"></i> Login
</a></li>
444 <li><a href=
"examples/register.html"><i class=
"fa fa-circle-o"></i> Register
</a></li>
445 <li><a href=
"examples/lockscreen.html"><i class=
"fa fa-circle-o"></i> Lockscreen
</a></li>
446 <li><a href=
"examples/404.html"><i class=
"fa fa-circle-o"></i> 404 Error
</a></li>
447 <li><a href=
"examples/500.html"><i class=
"fa fa-circle-o"></i> 500 Error
</a></li>
448 <li><a href=
"examples/blank.html"><i class=
"fa fa-circle-o"></i> Blank Page
</a></li>
449 <li><a href=
"examples/pace.html"><i class=
"fa fa-circle-o"></i> Pace Page
</a></li>
452 <li class=
"treeview">
454 <i class=
"fa fa-share"></i> <span>Multilevel
</span>
455 <span class=
"pull-right-container">
456 <i class=
"fa fa-angle-left pull-right"></i>
459 <ul class=
"treeview-menu">
460 <li><a href=
"#"><i class=
"fa fa-circle-o"></i> Level One
</a></li>
462 <a href=
"#"><i class=
"fa fa-circle-o"></i> Level One
463 <span class=
"pull-right-container">
464 <i class=
"fa fa-angle-left pull-right"></i>
467 <ul class=
"treeview-menu">
468 <li><a href=
"#"><i class=
"fa fa-circle-o"></i> Level Two
</a></li>
470 <a href=
"#"><i class=
"fa fa-circle-o"></i> Level Two
471 <span class=
"pull-right-container">
472 <i class=
"fa fa-angle-left pull-right"></i>
475 <ul class=
"treeview-menu">
476 <li><a href=
"#"><i class=
"fa fa-circle-o"></i> Level Three
</a></li>
477 <li><a href=
"#"><i class=
"fa fa-circle-o"></i> Level Three
</a></li>
482 <li><a href=
"#"><i class=
"fa fa-circle-o"></i> Level One
</a></li>
485 <li><a href=
"../documentation/index.html"><i class=
"fa fa-book"></i> <span>Documentation
</span></a></li>
486 <li class=
"header">LABELS
</li>
487 <li><a href=
"#"><i class=
"fa fa-circle-o text-red"></i> <span>Important
</span></a></li>
488 <li><a href=
"#"><i class=
"fa fa-circle-o text-yellow"></i> <span>Warning
</span></a></li>
489 <li><a href=
"#"><i class=
"fa fa-circle-o text-aqua"></i> <span>Information
</span></a></li>
495 <!-- Content Wrapper. Contains page content -->
496 <div class=
"content-wrapper">
497 <!-- Content Header (Page header) -->
498 <section class=
"content-header">
501 <small>Preview page
</small>
503 <ol class=
"breadcrumb">
504 <li><a href=
"#"><i class=
"fa fa-dashboard"></i> Home
</a></li>
505 <li class=
"active">Widgets
</li>
509 <!-- Main content -->
510 <section class=
"content">
513 <div class=
"col-md-3 col-sm-6 col-xs-12">
514 <div class=
"info-box">
515 <span class=
"info-box-icon bg-aqua"><i class=
"fa fa-envelope-o"></i></span>
517 <div class=
"info-box-content">
518 <span class=
"info-box-text">Messages
</span>
519 <span class=
"info-box-number">1,
410</span>
521 <!-- /.info-box-content -->
526 <div class=
"col-md-3 col-sm-6 col-xs-12">
527 <div class=
"info-box">
528 <span class=
"info-box-icon bg-green"><i class=
"fa fa-flag-o"></i></span>
530 <div class=
"info-box-content">
531 <span class=
"info-box-text">Bookmarks
</span>
532 <span class=
"info-box-number">410</span>
534 <!-- /.info-box-content -->
539 <div class=
"col-md-3 col-sm-6 col-xs-12">
540 <div class=
"info-box">
541 <span class=
"info-box-icon bg-yellow"><i class=
"fa fa-files-o"></i></span>
543 <div class=
"info-box-content">
544 <span class=
"info-box-text">Uploads
</span>
545 <span class=
"info-box-number">13,
648</span>
547 <!-- /.info-box-content -->
552 <div class=
"col-md-3 col-sm-6 col-xs-12">
553 <div class=
"info-box">
554 <span class=
"info-box-icon bg-red"><i class=
"fa fa-star-o"></i></span>
556 <div class=
"info-box-content">
557 <span class=
"info-box-text">Likes
</span>
558 <span class=
"info-box-number">93,
139</span>
560 <!-- /.info-box-content -->
568 <!-- =========================================================== -->
571 <div class=
"col-md-3 col-sm-6 col-xs-12">
572 <div class=
"info-box bg-aqua">
573 <span class=
"info-box-icon"><i class=
"fa fa-bookmark-o"></i></span>
575 <div class=
"info-box-content">
576 <span class=
"info-box-text">Bookmarks
</span>
577 <span class=
"info-box-number">41,
410</span>
579 <div class=
"progress">
580 <div class=
"progress-bar" style=
"width: 70%"></div>
582 <span class=
"progress-description">
583 70% Increase in
30 Days
586 <!-- /.info-box-content -->
591 <div class=
"col-md-3 col-sm-6 col-xs-12">
592 <div class=
"info-box bg-green">
593 <span class=
"info-box-icon"><i class=
"fa fa-thumbs-o-up"></i></span>
595 <div class=
"info-box-content">
596 <span class=
"info-box-text">Likes
</span>
597 <span class=
"info-box-number">41,
410</span>
599 <div class=
"progress">
600 <div class=
"progress-bar" style=
"width: 70%"></div>
602 <span class=
"progress-description">
603 70% Increase in
30 Days
606 <!-- /.info-box-content -->
611 <div class=
"col-md-3 col-sm-6 col-xs-12">
612 <div class=
"info-box bg-yellow">
613 <span class=
"info-box-icon"><i class=
"fa fa-calendar"></i></span>
615 <div class=
"info-box-content">
616 <span class=
"info-box-text">Events
</span>
617 <span class=
"info-box-number">41,
410</span>
619 <div class=
"progress">
620 <div class=
"progress-bar" style=
"width: 70%"></div>
622 <span class=
"progress-description">
623 70% Increase in
30 Days
626 <!-- /.info-box-content -->
631 <div class=
"col-md-3 col-sm-6 col-xs-12">
632 <div class=
"info-box bg-red">
633 <span class=
"info-box-icon"><i class=
"fa fa-comments-o"></i></span>
635 <div class=
"info-box-content">
636 <span class=
"info-box-text">Comments
</span>
637 <span class=
"info-box-number">41,
410</span>
639 <div class=
"progress">
640 <div class=
"progress-bar" style=
"width: 70%"></div>
642 <span class=
"progress-description">
643 70% Increase in
30 Days
646 <!-- /.info-box-content -->
654 <!-- =========================================================== -->
656 <!-- Small boxes (Stat box) -->
658 <div class=
"col-lg-3 col-xs-6">
660 <div class=
"small-box bg-aqua">
667 <i class=
"fa fa-shopping-cart"></i>
669 <a href=
"#" class=
"small-box-footer">
670 More info
<i class=
"fa fa-arrow-circle-right"></i>
675 <div class=
"col-lg-3 col-xs-6">
677 <div class=
"small-box bg-green">
679 <h3>53<sup style=
"font-size: 20px">%
</sup></h3>
684 <i class=
"ion ion-stats-bars"></i>
686 <a href=
"#" class=
"small-box-footer">
687 More info
<i class=
"fa fa-arrow-circle-right"></i>
692 <div class=
"col-lg-3 col-xs-6">
694 <div class=
"small-box bg-yellow">
698 <p>User Registrations
</p>
701 <i class=
"ion ion-person-add"></i>
703 <a href=
"#" class=
"small-box-footer">
704 More info
<i class=
"fa fa-arrow-circle-right"></i>
709 <div class=
"col-lg-3 col-xs-6">
711 <div class=
"small-box bg-red">
715 <p>Unique Visitors
</p>
718 <i class=
"ion ion-pie-graph"></i>
720 <a href=
"#" class=
"small-box-footer">
721 More info
<i class=
"fa fa-arrow-circle-right"></i>
729 <!-- =========================================================== -->
732 <div class=
"col-md-3">
733 <div class=
"box box-default collapsed-box">
734 <div class=
"box-header with-border">
735 <h3 class=
"box-title">Expandable
</h3>
737 <div class=
"box-tools pull-right">
738 <button type=
"button" class=
"btn btn-box-tool" data-widget=
"collapse"><i class=
"fa fa-plus"></i>
743 <!-- /.box-header -->
744 <div class=
"box-body">
752 <div class=
"col-md-3">
753 <div class=
"box box-success">
754 <div class=
"box-header with-border">
755 <h3 class=
"box-title">Removable
</h3>
757 <div class=
"box-tools pull-right">
758 <button type=
"button" class=
"btn btn-box-tool" data-widget=
"remove"><i class=
"fa fa-times"></i></button>
762 <!-- /.box-header -->
763 <div class=
"box-body">
771 <div class=
"col-md-3">
772 <div class=
"box box-warning">
773 <div class=
"box-header with-border">
774 <h3 class=
"box-title">Collapsable
</h3>
776 <div class=
"box-tools pull-right">
777 <button type=
"button" class=
"btn btn-box-tool" data-widget=
"collapse"><i class=
"fa fa-minus"></i>
782 <!-- /.box-header -->
783 <div class=
"box-body">
791 <div class=
"col-md-3">
792 <div class=
"box box-danger">
793 <div class=
"box-header">
794 <h3 class=
"box-title">Loading state
</h3>
796 <div class=
"box-body">
800 <!-- Loading (remove the following to stop the loading)-->
801 <div class=
"overlay">
802 <i class=
"fa fa-refresh fa-spin"></i>
812 <!-- =========================================================== -->
815 <div class=
"col-md-3">
816 <div class=
"box box-default collapsed-box box-solid">
817 <div class=
"box-header with-border">
818 <h3 class=
"box-title">Expandable
</h3>
820 <div class=
"box-tools pull-right">
821 <button type=
"button" class=
"btn btn-box-tool" data-widget=
"collapse"><i class=
"fa fa-plus"></i>
826 <!-- /.box-header -->
827 <div class=
"box-body">
835 <div class=
"col-md-3">
836 <div class=
"box box-success box-solid">
837 <div class=
"box-header with-border">
838 <h3 class=
"box-title">Removable
</h3>
840 <div class=
"box-tools pull-right">
841 <button type=
"button" class=
"btn btn-box-tool" data-widget=
"remove"><i class=
"fa fa-times"></i></button>
845 <!-- /.box-header -->
846 <div class=
"box-body">
854 <div class=
"col-md-3">
855 <div class=
"box box-warning box-solid">
856 <div class=
"box-header with-border">
857 <h3 class=
"box-title">Collapsable
</h3>
859 <div class=
"box-tools pull-right">
860 <button type=
"button" class=
"btn btn-box-tool" data-widget=
"collapse"><i class=
"fa fa-minus"></i>
865 <!-- /.box-header -->
866 <div class=
"box-body">
874 <div class=
"col-md-3">
875 <div class=
"box box-danger box-solid">
876 <div class=
"box-header">
877 <h3 class=
"box-title">Loading state
</h3>
879 <div class=
"box-body">
883 <!-- Loading (remove the following to stop the loading)-->
884 <div class=
"overlay">
885 <i class=
"fa fa-refresh fa-spin"></i>
895 <!-- =========================================================== -->
899 <div class=
"col-md-3">
900 <!-- DIRECT CHAT PRIMARY -->
901 <div class=
"box box-primary direct-chat direct-chat-primary">
902 <div class=
"box-header with-border">
903 <h3 class=
"box-title">Direct Chat
</h3>
905 <div class=
"box-tools pull-right">
906 <span data-toggle=
"tooltip" title=
"3 New Messages" class=
"badge bg-light-blue">3</span>
907 <button type=
"button" class=
"btn btn-box-tool" data-widget=
"collapse"><i class=
"fa fa-minus"></i>
909 <button type=
"button" class=
"btn btn-box-tool" data-toggle=
"tooltip" title=
"Contacts" data-widget=
"chat-pane-toggle">
910 <i class=
"fa fa-comments"></i></button>
911 <button type=
"button" class=
"btn btn-box-tool" data-widget=
"remove"><i class=
"fa fa-times"></i></button>
914 <!-- /.box-header -->
915 <div class=
"box-body">
916 <!-- Conversations are loaded here -->
917 <div class=
"direct-chat-messages">
918 <!-- Message. Default to the left -->
919 <div class=
"direct-chat-msg">
920 <div class=
"direct-chat-info clearfix">
921 <span class=
"direct-chat-name pull-left">Alexander Pierce
</span>
922 <span class=
"direct-chat-timestamp pull-right">23 Jan
2:
00 pm
</span>
924 <!-- /.direct-chat-info -->
925 <img class=
"direct-chat-img" src=
"../dist/img/user1-128x128.jpg" alt=
"Message User Image"><!-- /.direct-chat-img -->
926 <div class=
"direct-chat-text">
927 Is this template really for free? That's unbelievable!
929 <!-- /.direct-chat-text -->
931 <!-- /.direct-chat-msg -->
933 <!-- Message to the right -->
934 <div class=
"direct-chat-msg right">
935 <div class=
"direct-chat-info clearfix">
936 <span class=
"direct-chat-name pull-right">Sarah Bullock
</span>
937 <span class=
"direct-chat-timestamp pull-left">23 Jan
2:
05 pm
</span>
939 <!-- /.direct-chat-info -->
940 <img class=
"direct-chat-img" src=
"../dist/img/user3-128x128.jpg" alt=
"Message User Image"><!-- /.direct-chat-img -->
941 <div class=
"direct-chat-text">
942 You better believe it!
944 <!-- /.direct-chat-text -->
946 <!-- /.direct-chat-msg -->
948 <!--/.direct-chat-messages-->
950 <!-- Contacts are loaded here -->
951 <div class=
"direct-chat-contacts">
952 <ul class=
"contacts-list">
955 <img class=
"contacts-list-img" src=
"../dist/img/user1-128x128.jpg" alt=
"User Image">
957 <div class=
"contacts-list-info">
958 <span class=
"contacts-list-name">
960 <small class=
"contacts-list-date pull-right">2/
28/
2015</small>
962 <span class=
"contacts-list-msg">How have you been? I was...
</span>
964 <!-- /.contacts-list-info -->
967 <!-- End Contact Item -->
969 <!-- /.contatcts-list -->
971 <!-- /.direct-chat-pane -->
974 <div class=
"box-footer">
975 <form action=
"#" method=
"post">
976 <div class=
"input-group">
977 <input type=
"text" name=
"message" placeholder=
"Type Message ..." class=
"form-control">
978 <span class=
"input-group-btn">
979 <button type=
"submit" class=
"btn btn-primary btn-flat">Send
</button>
986 <!--/.direct-chat -->
990 <div class=
"col-md-3">
991 <!-- DIRECT CHAT SUCCESS -->
992 <div class=
"box box-success direct-chat direct-chat-success">
993 <div class=
"box-header with-border">
994 <h3 class=
"box-title">Direct Chat
</h3>
996 <div class=
"box-tools pull-right">
997 <span data-toggle=
"tooltip" title=
"3 New Messages" class=
"badge bg-green">3</span>
998 <button type=
"button" class=
"btn btn-box-tool" data-widget=
"collapse"><i class=
"fa fa-minus"></i>
1000 <button type=
"button" class=
"btn btn-box-tool" data-toggle=
"tooltip" title=
"Contacts" data-widget=
"chat-pane-toggle">
1001 <i class=
"fa fa-comments"></i></button>
1002 <button type=
"button" class=
"btn btn-box-tool" data-widget=
"remove"><i class=
"fa fa-times"></i></button>
1005 <!-- /.box-header -->
1006 <div class=
"box-body">
1007 <!-- Conversations are loaded here -->
1008 <div class=
"direct-chat-messages">
1009 <!-- Message. Default to the left -->
1010 <div class=
"direct-chat-msg">
1011 <div class=
"direct-chat-info clearfix">
1012 <span class=
"direct-chat-name pull-left">Alexander Pierce
</span>
1013 <span class=
"direct-chat-timestamp pull-right">23 Jan
2:
00 pm
</span>
1015 <!-- /.direct-chat-info -->
1016 <img class=
"direct-chat-img" src=
"../dist/img/user1-128x128.jpg" alt=
"Message User Image"><!-- /.direct-chat-img -->
1017 <div class=
"direct-chat-text">
1018 Is this template really for free? That's unbelievable!
1020 <!-- /.direct-chat-text -->
1022 <!-- /.direct-chat-msg -->
1024 <!-- Message to the right -->
1025 <div class=
"direct-chat-msg right">
1026 <div class=
"direct-chat-info clearfix">
1027 <span class=
"direct-chat-name pull-right">Sarah Bullock
</span>
1028 <span class=
"direct-chat-timestamp pull-left">23 Jan
2:
05 pm
</span>
1030 <!-- /.direct-chat-info -->
1031 <img class=
"direct-chat-img" src=
"../dist/img/user3-128x128.jpg" alt=
"Message User Image"><!-- /.direct-chat-img -->
1032 <div class=
"direct-chat-text">
1033 You better believe it!
1035 <!-- /.direct-chat-text -->
1037 <!-- /.direct-chat-msg -->
1039 <!--/.direct-chat-messages-->
1041 <!-- Contacts are loaded here -->
1042 <div class=
"direct-chat-contacts">
1043 <ul class=
"contacts-list">
1046 <img class=
"contacts-list-img" src=
"../dist/img/user1-128x128.jpg" alt=
"User Image">
1048 <div class=
"contacts-list-info">
1049 <span class=
"contacts-list-name">
1051 <small class=
"contacts-list-date pull-right">2/
28/
2015</small>
1053 <span class=
"contacts-list-msg">How have you been? I was...
</span>
1055 <!-- /.contacts-list-info -->
1058 <!-- End Contact Item -->
1060 <!-- /.contatcts-list -->
1062 <!-- /.direct-chat-pane -->
1065 <div class=
"box-footer">
1066 <form action=
"#" method=
"post">
1067 <div class=
"input-group">
1068 <input type=
"text" name=
"message" placeholder=
"Type Message ..." class=
"form-control">
1069 <span class=
"input-group-btn">
1070 <button type=
"submit" class=
"btn btn-success btn-flat">Send
</button>
1075 <!-- /.box-footer-->
1077 <!--/.direct-chat -->
1081 <div class=
"col-md-3">
1082 <!-- DIRECT CHAT WARNING -->
1083 <div class=
"box box-warning direct-chat direct-chat-warning">
1084 <div class=
"box-header with-border">
1085 <h3 class=
"box-title">Direct Chat
</h3>
1087 <div class=
"box-tools pull-right">
1088 <span data-toggle=
"tooltip" title=
"3 New Messages" class=
"badge bg-yellow">3</span>
1089 <button type=
"button" class=
"btn btn-box-tool" data-widget=
"collapse"><i class=
"fa fa-minus"></i>
1091 <button type=
"button" class=
"btn btn-box-tool" data-toggle=
"tooltip" title=
"Contacts" data-widget=
"chat-pane-toggle">
1092 <i class=
"fa fa-comments"></i></button>
1093 <button type=
"button" class=
"btn btn-box-tool" data-widget=
"remove"><i class=
"fa fa-times"></i></button>
1096 <!-- /.box-header -->
1097 <div class=
"box-body">
1098 <!-- Conversations are loaded here -->
1099 <div class=
"direct-chat-messages">
1100 <!-- Message. Default to the left -->
1101 <div class=
"direct-chat-msg">
1102 <div class=
"direct-chat-info clearfix">
1103 <span class=
"direct-chat-name pull-left">Alexander Pierce
</span>
1104 <span class=
"direct-chat-timestamp pull-right">23 Jan
2:
00 pm
</span>
1106 <!-- /.direct-chat-info -->
1107 <img class=
"direct-chat-img" src=
"../dist/img/user1-128x128.jpg" alt=
"Message User Image"><!-- /.direct-chat-img -->
1108 <div class=
"direct-chat-text">
1109 Is this template really for free? That's unbelievable!
1111 <!-- /.direct-chat-text -->
1113 <!-- /.direct-chat-msg -->
1115 <!-- Message to the right -->
1116 <div class=
"direct-chat-msg right">
1117 <div class=
"direct-chat-info clearfix">
1118 <span class=
"direct-chat-name pull-right">Sarah Bullock
</span>
1119 <span class=
"direct-chat-timestamp pull-left">23 Jan
2:
05 pm
</span>
1121 <!-- /.direct-chat-info -->
1122 <img class=
"direct-chat-img" src=
"../dist/img/user3-128x128.jpg" alt=
"Message User Image"><!-- /.direct-chat-img -->
1123 <div class=
"direct-chat-text">
1124 You better believe it!
1126 <!-- /.direct-chat-text -->
1128 <!-- /.direct-chat-msg -->
1130 <!--/.direct-chat-messages-->
1132 <!-- Contacts are loaded here -->
1133 <div class=
"direct-chat-contacts">
1134 <ul class=
"contacts-list">
1137 <img class=
"contacts-list-img" src=
"../dist/img/user1-128x128.jpg" alt=
"User Image">
1139 <div class=
"contacts-list-info">
1140 <span class=
"contacts-list-name">
1142 <small class=
"contacts-list-date pull-right">2/
28/
2015</small>
1144 <span class=
"contacts-list-msg">How have you been? I was...
</span>
1146 <!-- /.contacts-list-info -->
1149 <!-- End Contact Item -->
1151 <!-- /.contatcts-list -->
1153 <!-- /.direct-chat-pane -->
1156 <div class=
"box-footer">
1157 <form action=
"#" method=
"post">
1158 <div class=
"input-group">
1159 <input type=
"text" name=
"message" placeholder=
"Type Message ..." class=
"form-control">
1160 <span class=
"input-group-btn">
1161 <button type=
"submit" class=
"btn btn-warning btn-flat">Send
</button>
1166 <!-- /.box-footer-->
1168 <!--/.direct-chat -->
1172 <div class=
"col-md-3">
1173 <!-- DIRECT CHAT DANGER -->
1174 <div class=
"box box-danger direct-chat direct-chat-danger">
1175 <div class=
"box-header with-border">
1176 <h3 class=
"box-title">Direct Chat
</h3>
1178 <div class=
"box-tools pull-right">
1179 <span data-toggle=
"tooltip" title=
"3 New Messages" class=
"badge bg-red">3</span>
1180 <button type=
"button" class=
"btn btn-box-tool" data-widget=
"collapse"><i class=
"fa fa-minus"></i>
1182 <button type=
"button" class=
"btn btn-box-tool" data-toggle=
"tooltip" title=
"Contacts" data-widget=
"chat-pane-toggle">
1183 <i class=
"fa fa-comments"></i></button>
1184 <button type=
"button" class=
"btn btn-box-tool" data-widget=
"remove"><i class=
"fa fa-times"></i></button>
1187 <!-- /.box-header -->
1188 <div class=
"box-body">
1189 <!-- Conversations are loaded here -->
1190 <div class=
"direct-chat-messages">
1191 <!-- Message. Default to the left -->
1192 <div class=
"direct-chat-msg">
1193 <div class=
"direct-chat-info clearfix">
1194 <span class=
"direct-chat-name pull-left">Alexander Pierce
</span>
1195 <span class=
"direct-chat-timestamp pull-right">23 Jan
2:
00 pm
</span>
1197 <!-- /.direct-chat-info -->
1198 <img class=
"direct-chat-img" src=
"../dist/img/user1-128x128.jpg" alt=
"Message User Image"><!-- /.direct-chat-img -->
1199 <div class=
"direct-chat-text">
1200 Is this template really for free? That's unbelievable!
1202 <!-- /.direct-chat-text -->
1204 <!-- /.direct-chat-msg -->
1206 <!-- Message to the right -->
1207 <div class=
"direct-chat-msg right">
1208 <div class=
"direct-chat-info clearfix">
1209 <span class=
"direct-chat-name pull-right">Sarah Bullock
</span>
1210 <span class=
"direct-chat-timestamp pull-left">23 Jan
2:
05 pm
</span>
1212 <!-- /.direct-chat-info -->
1213 <img class=
"direct-chat-img" src=
"../dist/img/user3-128x128.jpg" alt=
"Message User Image"><!-- /.direct-chat-img -->
1214 <div class=
"direct-chat-text">
1215 You better believe it!
1217 <!-- /.direct-chat-text -->
1219 <!-- /.direct-chat-msg -->
1221 <!--/.direct-chat-messages-->
1223 <!-- Contacts are loaded here -->
1224 <div class=
"direct-chat-contacts">
1225 <ul class=
"contacts-list">
1228 <img class=
"contacts-list-img" src=
"../dist/img/user1-128x128.jpg" alt=
"User Image">
1230 <div class=
"contacts-list-info">
1231 <span class=
"contacts-list-name">
1233 <small class=
"contacts-list-date pull-right">2/
28/
2015</small>
1235 <span class=
"contacts-list-msg">How have you been? I was...
</span>
1237 <!-- /.contacts-list-info -->
1240 <!-- End Contact Item -->
1242 <!-- /.contatcts-list -->
1244 <!-- /.direct-chat-pane -->
1247 <div class=
"box-footer">
1248 <form action=
"#" method=
"post">
1249 <div class=
"input-group">
1250 <input type=
"text" name=
"message" placeholder=
"Type Message ..." class=
"form-control">
1251 <span class=
"input-group-btn">
1252 <button type=
"submit" class=
"btn btn-danger btn-flat">Send
</button>
1257 <!-- /.box-footer-->
1259 <!--/.direct-chat -->
1265 <h2 class=
"page-header">Social Widgets
</h2>
1268 <div class=
"col-md-4">
1269 <!-- Widget: user widget style 1 -->
1270 <div class=
"box box-widget widget-user-2">
1271 <!-- Add the bg color to the header using any of the bg-* classes -->
1272 <div class=
"widget-user-header bg-yellow">
1273 <div class=
"widget-user-image">
1274 <img class=
"img-circle" src=
"../dist/img/user7-128x128.jpg" alt=
"User Avatar">
1276 <!-- /.widget-user-image -->
1277 <h3 class=
"widget-user-username">Nadia Carmichael
</h3>
1278 <h5 class=
"widget-user-desc">Lead Developer
</h5>
1280 <div class=
"box-footer no-padding">
1281 <ul class=
"nav nav-stacked">
1282 <li><a href=
"#">Projects
<span class=
"pull-right badge bg-blue">31</span></a></li>
1283 <li><a href=
"#">Tasks
<span class=
"pull-right badge bg-aqua">5</span></a></li>
1284 <li><a href=
"#">Completed Projects
<span class=
"pull-right badge bg-green">12</span></a></li>
1285 <li><a href=
"#">Followers
<span class=
"pull-right badge bg-red">842</span></a></li>
1289 <!-- /.widget-user -->
1292 <div class=
"col-md-4">
1293 <!-- Widget: user widget style 1 -->
1294 <div class=
"box box-widget widget-user">
1295 <!-- Add the bg color to the header using any of the bg-* classes -->
1296 <div class=
"widget-user-header bg-aqua-active">
1297 <h3 class=
"widget-user-username">Alexander Pierce
</h3>
1298 <h5 class=
"widget-user-desc">Founder
& CEO
</h5>
1300 <div class=
"widget-user-image">
1301 <img class=
"img-circle" src=
"../dist/img/user1-128x128.jpg" alt=
"User Avatar">
1303 <div class=
"box-footer">
1305 <div class=
"col-sm-4 border-right">
1306 <div class=
"description-block">
1307 <h5 class=
"description-header">3,
200</h5>
1308 <span class=
"description-text">SALES
</span>
1310 <!-- /.description-block -->
1313 <div class=
"col-sm-4 border-right">
1314 <div class=
"description-block">
1315 <h5 class=
"description-header">13,
000</h5>
1316 <span class=
"description-text">FOLLOWERS
</span>
1318 <!-- /.description-block -->
1321 <div class=
"col-sm-4">
1322 <div class=
"description-block">
1323 <h5 class=
"description-header">35</h5>
1324 <span class=
"description-text">PRODUCTS
</span>
1326 <!-- /.description-block -->
1333 <!-- /.widget-user -->
1336 <div class=
"col-md-4">
1337 <!-- Widget: user widget style 1 -->
1338 <div class=
"box box-widget widget-user">
1339 <!-- Add the bg color to the header using any of the bg-* classes -->
1340 <div class=
"widget-user-header bg-black" style=
"background: url('../dist/img/photo1.png') center center;">
1341 <h3 class=
"widget-user-username">Elizabeth Pierce
</h3>
1342 <h5 class=
"widget-user-desc">Web Designer
</h5>
1344 <div class=
"widget-user-image">
1345 <img class=
"img-circle" src=
"../dist/img/user3-128x128.jpg" alt=
"User Avatar">
1347 <div class=
"box-footer">
1349 <div class=
"col-sm-4 border-right">
1350 <div class=
"description-block">
1351 <h5 class=
"description-header">3,
200</h5>
1352 <span class=
"description-text">SALES
</span>
1354 <!-- /.description-block -->
1357 <div class=
"col-sm-4 border-right">
1358 <div class=
"description-block">
1359 <h5 class=
"description-header">13,
000</h5>
1360 <span class=
"description-text">FOLLOWERS
</span>
1362 <!-- /.description-block -->
1365 <div class=
"col-sm-4">
1366 <div class=
"description-block">
1367 <h5 class=
"description-header">35</h5>
1368 <span class=
"description-text">PRODUCTS
</span>
1370 <!-- /.description-block -->
1377 <!-- /.widget-user -->
1384 <div class=
"col-md-6">
1385 <!-- Box Comment -->
1386 <div class=
"box box-widget">
1387 <div class=
"box-header with-border">
1388 <div class=
"user-block">
1389 <img class=
"img-circle" src=
"../dist/img/user1-128x128.jpg" alt=
"User Image">
1390 <span class=
"username"><a href=
"#">Jonathan Burke Jr.
</a></span>
1391 <span class=
"description">Shared publicly -
7:
30 PM Today
</span>
1393 <!-- /.user-block -->
1394 <div class=
"box-tools">
1395 <button type=
"button" class=
"btn btn-box-tool" data-toggle=
"tooltip" title=
"Mark as read">
1396 <i class=
"fa fa-circle-o"></i></button>
1397 <button type=
"button" class=
"btn btn-box-tool" data-widget=
"collapse"><i class=
"fa fa-minus"></i>
1399 <button type=
"button" class=
"btn btn-box-tool" data-widget=
"remove"><i class=
"fa fa-times"></i></button>
1401 <!-- /.box-tools -->
1403 <!-- /.box-header -->
1404 <div class=
"box-body">
1405 <img class=
"img-responsive pad" src=
"../dist/img/photo2.png" alt=
"Photo">
1407 <p>I took this photo this morning. What do you guys think?
</p>
1408 <button type=
"button" class=
"btn btn-default btn-xs"><i class=
"fa fa-share"></i> Share
</button>
1409 <button type=
"button" class=
"btn btn-default btn-xs"><i class=
"fa fa-thumbs-o-up"></i> Like
</button>
1410 <span class=
"pull-right text-muted">127 likes -
3 comments
</span>
1413 <div class=
"box-footer box-comments">
1414 <div class=
"box-comment">
1416 <img class=
"img-circle img-sm" src=
"../dist/img/user3-128x128.jpg" alt=
"User Image">
1418 <div class=
"comment-text">
1419 <span class=
"username">
1421 <span class=
"text-muted pull-right">8:
03 PM Today
</span>
1422 </span><!-- /.username -->
1423 It is a long established fact that a reader will be distracted
1424 by the readable content of a page when looking at its layout.
1426 <!-- /.comment-text -->
1428 <!-- /.box-comment -->
1429 <div class=
"box-comment">
1431 <img class=
"img-circle img-sm" src=
"../dist/img/user4-128x128.jpg" alt=
"User Image">
1433 <div class=
"comment-text">
1434 <span class=
"username">
1436 <span class=
"text-muted pull-right">8:
03 PM Today
</span>
1437 </span><!-- /.username -->
1438 It is a long established fact that a reader will be distracted
1439 by the readable content of a page when looking at its layout.
1441 <!-- /.comment-text -->
1443 <!-- /.box-comment -->
1445 <!-- /.box-footer -->
1446 <div class=
"box-footer">
1447 <form action=
"#" method=
"post">
1448 <img class=
"img-responsive img-circle img-sm" src=
"../dist/img/user4-128x128.jpg" alt=
"Alt Text">
1449 <!-- .img-push is used to add margin to elements next to floating images -->
1450 <div class=
"img-push">
1451 <input type=
"text" class=
"form-control input-sm" placeholder=
"Press enter to post comment">
1455 <!-- /.box-footer -->
1460 <div class=
"col-md-6">
1461 <!-- Box Comment -->
1462 <div class=
"box box-widget">
1463 <div class=
"box-header with-border">
1464 <div class=
"user-block">
1465 <img class=
"img-circle" src=
"../dist/img/user1-128x128.jpg" alt=
"User Image">
1466 <span class=
"username"><a href=
"#">Jonathan Burke Jr.
</a></span>
1467 <span class=
"description">Shared publicly -
7:
30 PM Today
</span>
1469 <!-- /.user-block -->
1470 <div class=
"box-tools">
1471 <button type=
"button" class=
"btn btn-box-tool" data-toggle=
"tooltip" title=
"Mark as read">
1472 <i class=
"fa fa-circle-o"></i></button>
1473 <button type=
"button" class=
"btn btn-box-tool" data-widget=
"collapse"><i class=
"fa fa-minus"></i>
1475 <button type=
"button" class=
"btn btn-box-tool" data-widget=
"remove"><i class=
"fa fa-times"></i></button>
1477 <!-- /.box-tools -->
1479 <!-- /.box-header -->
1480 <div class=
"box-body">
1482 <p>Far far away, behind the word mountains, far from the
1483 countries Vokalia and Consonantia, there live the blind
1484 texts. Separated they live in Bookmarksgrove right at
</p>
1486 <p>the coast of the Semantics, a large language ocean.
1487 A small river named Duden flows by their place and supplies
1488 it with the necessary regelialia. It is a paradisematic
1489 country, in which roasted parts of sentences fly into
1493 <div class=
"attachment-block clearfix">
1494 <img class=
"attachment-img" src=
"../dist/img/photo1.png" alt=
"Attachment Image">
1496 <div class=
"attachment-pushed">
1497 <h4 class=
"attachment-heading"><a href=
"http://www.lipsum.com/">Lorem ipsum text generator
</a></h4>
1499 <div class=
"attachment-text">
1500 Description about the attachment can be placed here.
1501 Lorem Ipsum is simply dummy text of the printing and typesetting industry...
<a href=
"#">more
</a>
1503 <!-- /.attachment-text -->
1505 <!-- /.attachment-pushed -->
1507 <!-- /.attachment-block -->
1509 <!-- Social sharing buttons -->
1510 <button type=
"button" class=
"btn btn-default btn-xs"><i class=
"fa fa-share"></i> Share
</button>
1511 <button type=
"button" class=
"btn btn-default btn-xs"><i class=
"fa fa-thumbs-o-up"></i> Like
</button>
1512 <span class=
"pull-right text-muted">45 likes -
2 comments
</span>
1515 <div class=
"box-footer box-comments">
1516 <div class=
"box-comment">
1518 <img class=
"img-circle img-sm" src=
"../dist/img/user3-128x128.jpg" alt=
"User Image">
1520 <div class=
"comment-text">
1521 <span class=
"username">
1523 <span class=
"text-muted pull-right">8:
03 PM Today
</span>
1524 </span><!-- /.username -->
1525 It is a long established fact that a reader will be distracted
1526 by the readable content of a page when looking at its layout.
1528 <!-- /.comment-text -->
1530 <!-- /.box-comment -->
1531 <div class=
"box-comment">
1533 <img class=
"img-circle img-sm" src=
"../dist/img/user5-128x128.jpg" alt=
"User Image">
1535 <div class=
"comment-text">
1536 <span class=
"username">
1538 <span class=
"text-muted pull-right">8:
03 PM Today
</span>
1539 </span><!-- /.username -->
1540 The point of using Lorem Ipsum is that it has a more-or-less
1541 normal distribution of letters, as opposed to using
1542 'Content here, content here', making it look like readable English.
1544 <!-- /.comment-text -->
1546 <!-- /.box-comment -->
1548 <!-- /.box-footer -->
1549 <div class=
"box-footer">
1550 <form action=
"#" method=
"post">
1551 <img class=
"img-responsive img-circle img-sm" src=
"../dist/img/user4-128x128.jpg" alt=
"Alt Text">
1552 <!-- .img-push is used to add margin to elements next to floating images -->
1553 <div class=
"img-push">
1554 <input type=
"text" class=
"form-control input-sm" placeholder=
"Press enter to post comment">
1558 <!-- /.box-footer -->
1569 <!-- /.content-wrapper -->
1571 <footer class=
"main-footer">
1572 <div class=
"pull-right hidden-xs">
1573 <b>Version
</b> 2.3.7
1575 <strong>Copyright
© 2014-
2016 <a href=
"http://almsaeedstudio.com">Almsaeed Studio
</a>.
</strong> All rights
1579 <!-- Control Sidebar -->
1580 <aside class=
"control-sidebar control-sidebar-dark">
1581 <!-- Create the tabs -->
1582 <ul class=
"nav nav-tabs nav-justified control-sidebar-tabs">
1583 <li><a href=
"#control-sidebar-home-tab" data-toggle=
"tab"><i class=
"fa fa-home"></i></a></li>
1584 <li><a href=
"#control-sidebar-settings-tab" data-toggle=
"tab"><i class=
"fa fa-gears"></i></a></li>
1587 <div class=
"tab-content">
1588 <!-- Home tab content -->
1589 <div class=
"tab-pane" id=
"control-sidebar-home-tab">
1590 <h3 class=
"control-sidebar-heading">Recent Activity
</h3>
1591 <ul class=
"control-sidebar-menu">
1593 <a href=
"javascript:void(0)">
1594 <i class=
"menu-icon fa fa-birthday-cake bg-red"></i>
1596 <div class=
"menu-info">
1597 <h4 class=
"control-sidebar-subheading">Langdon's Birthday
</h4>
1599 <p>Will be
23 on April
24th
</p>
1604 <a href=
"javascript:void(0)">
1605 <i class=
"menu-icon fa fa-user bg-yellow"></i>
1607 <div class=
"menu-info">
1608 <h4 class=
"control-sidebar-subheading">Frodo Updated His Profile
</h4>
1610 <p>New phone +
1(
800)
555-
1234</p>
1615 <a href=
"javascript:void(0)">
1616 <i class=
"menu-icon fa fa-envelope-o bg-light-blue"></i>
1618 <div class=
"menu-info">
1619 <h4 class=
"control-sidebar-subheading">Nora Joined Mailing List
</h4>
1621 <p>nora@example.com
</p>
1626 <a href=
"javascript:void(0)">
1627 <i class=
"menu-icon fa fa-file-code-o bg-green"></i>
1629 <div class=
"menu-info">
1630 <h4 class=
"control-sidebar-subheading">Cron Job
254 Executed
</h4>
1632 <p>Execution time
5 seconds
</p>
1637 <!-- /.control-sidebar-menu -->
1639 <h3 class=
"control-sidebar-heading">Tasks Progress
</h3>
1640 <ul class=
"control-sidebar-menu">
1642 <a href=
"javascript:void(0)">
1643 <h4 class=
"control-sidebar-subheading">
1644 Custom Template Design
1645 <span class=
"label label-danger pull-right">70%
</span>
1648 <div class=
"progress progress-xxs">
1649 <div class=
"progress-bar progress-bar-danger" style=
"width: 70%"></div>
1654 <a href=
"javascript:void(0)">
1655 <h4 class=
"control-sidebar-subheading">
1657 <span class=
"label label-success pull-right">95%
</span>
1660 <div class=
"progress progress-xxs">
1661 <div class=
"progress-bar progress-bar-success" style=
"width: 95%"></div>
1666 <a href=
"javascript:void(0)">
1667 <h4 class=
"control-sidebar-subheading">
1669 <span class=
"label label-warning pull-right">50%
</span>
1672 <div class=
"progress progress-xxs">
1673 <div class=
"progress-bar progress-bar-warning" style=
"width: 50%"></div>
1678 <a href=
"javascript:void(0)">
1679 <h4 class=
"control-sidebar-subheading">
1681 <span class=
"label label-primary pull-right">68%
</span>
1684 <div class=
"progress progress-xxs">
1685 <div class=
"progress-bar progress-bar-primary" style=
"width: 68%"></div>
1690 <!-- /.control-sidebar-menu -->
1694 <!-- Stats tab content -->
1695 <div class=
"tab-pane" id=
"control-sidebar-stats-tab">Stats Tab Content
</div>
1697 <!-- Settings tab content -->
1698 <div class=
"tab-pane" id=
"control-sidebar-settings-tab">
1699 <form method=
"post">
1700 <h3 class=
"control-sidebar-heading">General Settings
</h3>
1702 <div class=
"form-group">
1703 <label class=
"control-sidebar-subheading">
1705 <input type=
"checkbox" class=
"pull-right" checked
>
1709 Some information about this general settings option
1712 <!-- /.form-group -->
1714 <div class=
"form-group">
1715 <label class=
"control-sidebar-subheading">
1717 <input type=
"checkbox" class=
"pull-right" checked
>
1721 Other sets of options are available
1724 <!-- /.form-group -->
1726 <div class=
"form-group">
1727 <label class=
"control-sidebar-subheading">
1728 Expose author name in posts
1729 <input type=
"checkbox" class=
"pull-right" checked
>
1733 Allow the user to show his name in blog posts
1736 <!-- /.form-group -->
1738 <h3 class=
"control-sidebar-heading">Chat Settings
</h3>
1740 <div class=
"form-group">
1741 <label class=
"control-sidebar-subheading">
1743 <input type=
"checkbox" class=
"pull-right" checked
>
1746 <!-- /.form-group -->
1748 <div class=
"form-group">
1749 <label class=
"control-sidebar-subheading">
1750 Turn off notifications
1751 <input type=
"checkbox" class=
"pull-right">
1754 <!-- /.form-group -->
1756 <div class=
"form-group">
1757 <label class=
"control-sidebar-subheading">
1759 <a href=
"javascript:void(0)" class=
"text-red pull-right"><i class=
"fa fa-trash-o"></i></a>
1762 <!-- /.form-group -->
1768 <!-- /.control-sidebar -->
1769 <!-- Add the sidebar's background. This div must be placed
1770 immediately after the control sidebar -->
1771 <div class=
"control-sidebar-bg"></div>
1775 <!-- jQuery 2.2.3 -->
1776 <script src=
"../plugins/jQuery/jquery-2.2.3.min.js"></script>
1777 <!-- Bootstrap 3.3.6 -->
1778 <script src=
"../bootstrap/js/bootstrap.min.js"></script>
1780 <script src=
"../plugins/slimScroll/jquery.slimscroll.min.js"></script>
1782 <script src=
"../plugins/fastclick/fastclick.js"></script>
1783 <!-- AdminLTE App -->
1784 <script src=
"../dist/js/app.min.js"></script>
1785 <!-- AdminLTE for demo purposes -->
1786 <script src=
"../dist/js/demo.js"></script>