[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
Aplikasi
/
Macbook Air
/
Download-an
/
caraka
/
[
Home
]
File: widgets-app.html
<!doctype html> <html class="no-js " lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <meta name="description" content="Responsive Bootstrap 4 and web Application ui kit."> <title>:: Compass RealEstate Bootstrap4 Admin ::</title> <!-- Favicon--> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css"> <!-- Custom Css --> <link rel="stylesheet" href="assets/css/main.css"> <link rel="stylesheet" href="assets/css/color_skins.css"> </head> <body class="theme-blue"> <!-- Page Loader --> <div class="page-loader-wrapper"> <div class="loader"> <div class="m-t-30"><img class="zmdi-hc-spin" src="assets/images/logo.svg" width="48" height="48" alt="Compass"></div> <p>Please wait...</p> </div> </div> <!-- Overlay For Sidebars --> <div class="overlay"></div> <!-- Top Bar --> <nav class="navbar"> <div class="col-12"> <div class="navbar-header"> <a href="javascript:void(0);" class="bars"></a> <a class="navbar-brand" href="index.html"><img src="assets/images/logo.svg" width="30" alt="Compass"><span class="m-l-10">Estate</span></a> </div> <ul class="nav navbar-nav navbar-left"> <li><a href="javascript:void(0);" class="ls-toggle-btn" data-close="true"><i class="zmdi zmdi-swap"></i></a></li> <li class="hidden-sm-down"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search..."> <span class="input-group-addon"> <i class="zmdi zmdi-search"></i> </span> </div> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button"><i class="zmdi zmdi-notifications"></i> <div class="notify"><span class="heartbit"></span><span class="point"></span></div> </a> <ul class="dropdown-menu dropdown-menu-right slideDown"> <li class="header">NOTIFICATIONS</li> <li class="body"> <ul class="menu list-unstyled"> <li> <a href="javascript:void(0);"> <div class="icon-circle bg-blue"><i class="zmdi zmdi-account"></i></div> <div class="menu-info"> <h4>8 New Members joined</h4> <p><i class="zmdi zmdi-time"></i> 14 mins ago </p> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="icon-circle bg-amber"><i class="zmdi zmdi-shopping-cart"></i></div> <div class="menu-info"> <h4>4 Sales made</h4> <p> <i class="zmdi zmdi-time"></i> 22 mins ago </p> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="icon-circle bg-red"><i class="zmdi zmdi-delete"></i></div> <div class="menu-info"> <h4><b>Nancy Doe</b> Deleted account</h4> <p> <i class="zmdi zmdi-time"></i> 3 hours ago </p> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="icon-circle bg-green"><i class="zmdi zmdi-edit"></i></div> <div class="menu-info"> <h4><b>Nancy</b> Changed name</h4> <p> <i class="zmdi zmdi-time"></i> 2 hours ago </p> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="icon-circle bg-grey"><i class="zmdi zmdi-comment-text"></i></div> <div class="menu-info"> <h4><b>John</b> Commented your post</h4> <p> <i class="zmdi zmdi-time"></i> 4 hours ago </p> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="icon-circle bg-purple"><i class="zmdi zmdi-refresh"></i></div> <div class="menu-info"> <h4><b>John</b> Updated status</h4> <p> <i class="zmdi zmdi-time"></i> 3 hours ago </p> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="icon-circle bg-light-blue"><i class="zmdi zmdi-settings"></i></div> <div class="menu-info"> <h4>Settings Updated</h4> <p> <i class="zmdi zmdi-time"></i> Yesterday </p> </div> </a> </li> </ul> </li> <li class="footer"> <a href="javascript:void(0);">View All Notifications</a> </li> </ul> </li> <li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button"><i class="zmdi zmdi-flag"></i> <div class="notify"><span class="heartbit"></span><span class="point"></span></div> </a> <ul class="dropdown-menu dropdown-menu-right slideDown"> <li class="header">TASKS</li> <li class="body"> <ul class="menu tasks list-unstyled"> <li> <a href="javascript:void(0);"> <div class="progress-container progress-primary"> <span class="progress-badge">Footer display issue</span> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 86%;"> <span class="progress-value">86%</span> </div> </div> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="progress-container progress-info"> <span class="progress-badge">Answer GitHub questions</span> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width: 35%;"> <span class="progress-value">35%</span> </div> </div> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="progress-container progress-success"> <span class="progress-badge">Solve transition issue</span> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%;"> <span class="progress-value">72%</span> </div> </div> </div> </a> </li> <li><a href="javascript:void(0);"> <div class="progress-container"> <span class="progress-badge"> Create new dashboard</span> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;"> <span class="progress-value">45%</span> </div> </div> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="progress-container progress-warning"> <span class="progress-badge">Panding Project</span> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="29" aria-valuemin="0" aria-valuemax="100" style="width: 29%;"> <span class="progress-value">29%</span> </div> </div> </div> </a> </li> </ul> </li> <li class="footer"><a href="javascript:void(0);">View All</a></li> </ul> </li> <li> <a href="javascript:void(0);" class="fullscreen hidden-sm-down" data-provide="fullscreen" data-close="true"><i class="zmdi zmdi-fullscreen"></i></a> </li> <li><a href="sign-in.html" class="mega-menu" data-close="true"><i class="zmdi zmdi-power"></i></a></li> <li class=""><a href="javascript:void(0);" class="js-right-sidebar" data-close="true"><i class="zmdi zmdi-settings zmdi-hc-spin"></i></a></li> </ul> </div> </nav> <!-- Left Sidebar --> <aside id="leftsidebar" class="sidebar"> <div class="menu"> <ul class="list"> <li> <div class="user-info"> <div class="image"><a href="profile.html"><img src="assets/images/profile_av.jpg" alt="User"></a></div> <div class="detail"> <h4>Michael</h4> <small>Agent</small> </div> <a href="events.html" title="Events"><i class="zmdi zmdi-calendar"></i></a> <a href="mail-inbox.html" title="Inbox"><i class="zmdi zmdi-email"></i></a> <a href="contact.html" title="Contact List"><i class="zmdi zmdi-account-box-phone"></i></a> <a href="chat.html" title="Chat App"><i class="zmdi zmdi-comments"></i></a> <a href="sign-in.html" title="Sign out"><i class="zmdi zmdi-power"></i></a> </div> </li> <li class="header">MAIN</li> <li><a href="index.html"><i class="zmdi zmdi-home"></i><span>Dashboard</span></a></li> <li><a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-city"></i><span>Property</span> </a> <ul class="ml-menu"> <li><a href="property-list.html">Property List</a></li> <li><a href="property-list3.html">3 Column</a></li> <li><a href="property-list4.html">4 Column</a></li> <li><a href="add-property.html">Add Property</a></li> <li><a href="property-detail.html">Property Detail</a></li> </ul> </li> <li><a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-city"></i><span>Types</span> </a> <ul class="ml-menu"> <li><a href="apartment.html">Apartment</a></li> <li><a href="office.html">Office</a></li> <li><a href="shop.html">Shop</a></li> <li><a href="villa.html">Villa</a></li> </ul> </li><li><a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-accounts-outline"></i><span>Agents</span> </a> <ul class="ml-menu"> <li><a href="agent.html">All Agents</a></li> <li><a href="add-agent.html">Add Agent</a></li> <li><a href="profile.html">Agent Profile</a></li> <li><a href="invoices.html">Agent Invoice</a></li> </ul> </li> <li><a href="map.html"><i class="zmdi zmdi-pin"></i><span>Map</span></a></li> <li><a href="reports.html"><i class="zmdi zmdi-file-text"></i><span>Reports</span></a></li> <li> <a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-apps"></i><span>App</span> </a> <ul class="ml-menu"> <li><a href="mail-inbox.html">Inbox</a></li> <li><a href="chat.html">Chat</a></li> <li><a href="events.html">Calendar</a></li> <li><a href="file-dashboard.html">File Manager</a></li> <li><a href="contact.html">Contact list</a></li> <li><a href="blog-dashboard.html">Blog</a></li> </ul> </li> <li class="header">EXTRA COMPONENTS</li> <li class="active open"> <a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-delicious"></i><span>Widgets</span> </a> <ul class="ml-menu"> <li class="active"><a href="widgets-app.html">Apps Widgetse</a></li> <li><a href="widgets-data.html">Data Widgetse</a></li> </ul> </li> <li> <a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-lock"></i><span>Authentication</span> </a> <ul class="ml-menu"> <li><a href="sign-in.html">Sign In</a> </li> <li><a href="sign-up.html">Sign Up</a> </li> <li><a href="forgot-password.html">Forgot Password</a> </li> <li><a href="404.html">Page 404</a> </li> <li><a href="500.html">Page 500</a> </li> <li><a href="page-offline.html">Page Offline</a> </li> <li><a href="locked.html">Locked Screen</a> </li> </ul> </li> <li> <a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-copy"></i><span>Sample Pages</span> </a> <ul class="ml-menu"> <li><a href="blank.html">Blank Page</a> </li> <li><a href="image-gallery.html">Image Gallery</a> </li> <li><a href="profile.html">Profile</a></li> <li><a href="timeline.html">Timeline</a></li> <li><a href="pricing.html">Pricing</a></li> <li><a href="invoices.html">Invoices</a></li> <li><a href="search-results.html">Search Results</a></li> </ul> </li> <li class="header">Extra</li> <li> <div class="progress-container progress-primary m-t-10"> <span class="progress-badge">Traffic this Month</span> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100" style="width: 67%;"> <span class="progress-value">67%</span> </div> </div> </div> <div class="progress-container progress-info"> <span class="progress-badge">Server Load</span> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 86%;"> <span class="progress-value">86%</span> </div> </div> </div> </li> </ul> </div> </aside> <!-- Right Sidebar --> <aside id="rightsidebar" class="right-sidebar"> <ul class="nav nav-tabs"> <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#setting"><i class="zmdi zmdi-settings zmdi-hc-spin"></i></a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#chat"><i class="zmdi zmdi-comments"></i></a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#activity">Activity</a></li> </ul> <div class="tab-content"> <div class="tab-pane active slideRight" id="setting"> <div class="slim_scroll"> <div class="card"> <h6>Skins</h6> <ul class="choose-skin list-unstyled"> <li data-theme="purple"> <div class="purple"></div> </li> <li data-theme="blue" class="active"> <div class="blue"></div> </li> <li data-theme="cyan"> <div class="cyan"></div> </li> <li data-theme="green"> <div class="green"></div> </li> <li data-theme="orange"> <div class="orange"></div> </li> <li data-theme="blush"> <div class="blush"></div> </li> </ul> </div> <div class="card"> <h6>Left Menu</h6> <ul class="list-unstyled theme-light-dark"> <li> <div class="t-light btn btn-default btn-simple btn-round">Light</div> </li> <li> <div class="t-dark btn btn-default btn-round">Dark</div> </li> </ul> </div> <div class="card"> <h6>General Settings</h6> <ul class="setting-list list-unstyled"> <li> <div class="checkbox"> <input id="checkbox1" type="checkbox"> <label for="checkbox1">Report Panel Usage</label> </div> </li> <li> <div class="checkbox"> <input id="checkbox2" type="checkbox" checked=""> <label for="checkbox2">Email Redirect</label> </div> </li> <li> <div class="checkbox"> <input id="checkbox3" type="checkbox" checked=""> <label for="checkbox3">Notifications</label> </div> </li> <li> <div class="checkbox"> <input id="checkbox4" type="checkbox" checked=""> <label for="checkbox4">Auto Updates</label> </div> </li> </ul> </div> <div class="card"> <h6>Account Settings</h6> <ul class="setting-list list-unstyled"> <li> <div class="checkbox"> <input id="checkbox5" type="checkbox" checked=""> <label for="checkbox5">Offline</label> </div> </li> <li> <div class="checkbox"> <input id="checkbox6" type="checkbox" checked=""> <label for="checkbox6">Location Permission</label> </div> </li> </ul> </div> </div> </div> <div class="tab-pane right_chat pullUp" id="chat"> <div class="slim_scroll"> <div class="card"> <div class="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search..."> <span class="input-group-addon"> <i class="zmdi zmdi-search"></i> </span> </div> </div> </div> <div class="card"> <h6>Recent</h6> <ul class="list-unstyled"> <li class="online"> <a href="javascript:void(0);"> <div class="media"> <img class="media-object " src="assets/images/xs/avatar4.jpg" alt=""> <div class="media-body"> <span class="name">Sophia</span> <span class="message">There are many variations of passages of Lorem Ipsum available</span> <span class="badge badge-outline status"></span> </div> </div> </a> </li> <li class="online"> <a href="javascript:void(0);"> <div class="media"> <img class="media-object " src="assets/images/xs/avatar5.jpg" alt=""> <div class="media-body"> <span class="name">Grayson</span> <span class="message">All the Lorem Ipsum generators on the</span> <span class="badge badge-outline status"></span> </div> </div> </a> </li> <li class="offline"> <a href="javascript:void(0);"> <div class="media"> <img class="media-object " src="assets/images/xs/avatar2.jpg" alt=""> <div class="media-body"> <span class="name">Isabella</span> <span class="message">Contrary to popular belief, Lorem Ipsum</span> <span class="badge badge-outline status"></span> </div> </div> </a> </li> <li class="me"> <a href="javascript:void(0);"> <div class="media"> <img class="media-object " src="assets/images/xs/avatar1.jpg" alt=""> <div class="media-body"> <span class="name">John</span> <span class="message">It is a long established fact that a reader</span> <span class="badge badge-outline status"></span> </div> </div> </a> </li> <li class="online"> <a href="javascript:void(0);"> <div class="media"> <img class="media-object " src="assets/images/xs/avatar3.jpg" alt=""> <div class="media-body"> <span class="name">Alexander</span> <span class="message">Richard McClintock, a Latin professor</span> <span class="badge badge-outline status"></span> </div> </div> </a> </li> </ul> </div> <div class="card"> <h6>New Agent</h6> <ul class="list-unstyled"> <li class="offline inlineblock"> <a href="javascript:void(0);"> <div class="media"> <img class="media-object " src="assets/images/xs/avatar10.jpg" alt=""> <div class="media-body"> <span class="badge badge-outline status"></span> </div> </div> </a> </li> <li class="offline inlineblock"> <a href="javascript:void(0);"> <div class="media"> <img class="media-object " src="assets/images/xs/avatar6.jpg" alt=""> <div class="media-body"> <span class="badge badge-outline status"></span> </div> </div> </a> </li> <li class="offline inlineblock"> <a href="javascript:void(0);"> <div class="media"> <img class="media-object " src="assets/images/xs/avatar7.jpg" alt=""> <div class="media-body"> <span class="badge badge-outline status"></span> </div> </div> </a> </li> <li class="offline inlineblock"> <a href="javascript:void(0);"> <div class="media"> <img class="media-object " src="assets/images/xs/avatar8.jpg" alt=""> <div class="media-body"> <span class="badge badge-outline status"></span> </div> </div> </a> </li> <li class="offline inlineblock"> <a href="javascript:void(0);"> <div class="media"> <img class="media-object " src="assets/images/xs/avatar9.jpg" alt=""> <div class="media-body"> <span class="badge badge-outline status"></span> </div> </div> </a> </li> <li class="online inlineblock"> <a href="javascript:void(0);"> <div class="media"> <img class="media-object " src="assets/images/xs/avatar5.jpg" alt=""> <div class="media-body"> <span class="badge badge-outline status"></span> </div> </div> </a> </li> <li class="offline inlineblock"> <a href="javascript:void(0);"> <div class="media"> <img class="media-object " src="assets/images/xs/avatar4.jpg" alt=""> <div class="media-body"> <span class="badge badge-outline status"></span> </div> </div> </a> </li> <li class="offline inlineblock"> <a href="javascript:void(0);"> <div class="media"> <img class="media-object " src="assets/images/xs/avatar3.jpg" alt=""> <div class="media-body"> <span class="badge badge-outline status"></span> </div> </div> </a> </li> <li class="online inlineblock"> <a href="javascript:void(0);"> <div class="media"> <img class="media-object " src="assets/images/xs/avatar2.jpg" alt=""> <div class="media-body"> <span class="badge badge-outline status"></span> </div> </div> </a> </li> <li class="offline inlineblock"> <a href="javascript:void(0);"> <div class="media"> <img class="media-object " src="assets/images/xs/avatar1.jpg" alt=""> <div class="media-body"> <span class="badge badge-outline status"></span> </div> </div> </a> </li> </ul> </div> </div> </div> <div class="tab-pane slideRight" id="activity"> <div class="slim_scroll"> <div class="card"> <h6>Recent Activity</h6> <ul class="list-unstyled activity"> <li> <a href="javascript:void(0)"> <i class="zmdi zmdi-cake bg-blue"></i> <div class="info"> <h4>Admin Birthday</h4> <small>Will be Jan 01</small> </div> </a> </li> <li> <a href="javascript:void(0)"> <i class="zmdi zmdi-file-text bg-red"></i> <div class="info"> <h4>Bungalows for sale</h4> <small>Will be Jan 02</small> </div> </a> </li> <li> <a href="javascript:void(0)"> <i class="zmdi zmdi-account-box-phone bg-green"></i> <div class="info"> <h4>Star New project</h4> <small>Will be Jan 12</small> </div> </a> </li> <li> <a href="javascript:void(0)"> <i class="zmdi zmdi-email bg-amber"></i> <div class="info"> <h4>New Email</h4> <small>Will be Jan 18</small> </div> </a> </li> </ul> </div> <div class="card"> <h6>Project Status</h6> <div class="progress-container progress-primary"> <span class="progress-badge">AWR Business Center</span> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 86%;"> <span class="progress-value">86%</span> </div> </div> <ul class="list-unstyled team-info"> <li class="m-r-15"><small>Team</small></li> <li> <img src="assets/images/xs/avatar2.jpg" alt="Avatar"> </li> <li> <img src="assets/images/xs/avatar3.jpg" alt="Avatar"> </li> <li> <img src="assets/images/xs/avatar4.jpg" alt="Avatar"> </li> </ul> </div> <div class="progress-container"> <span class="progress-badge">Sandals Bungalows</span> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;"> <span class="progress-value">45%</span> </div> </div> <ul class="list-unstyled team-info"> <li class="m-r-15"><small>Team</small></li> <li> <img src="assets/images/xs/avatar10.jpg" alt="Avatar"> </li> <li> <img src="assets/images/xs/avatar9.jpg" alt="Avatar"> </li> <li> <img src="assets/images/xs/avatar8.jpg" alt="Avatar"> </li> <li> <img src="assets/images/xs/avatar7.jpg" alt="Avatar"> </li> <li> <img src="assets/images/xs/avatar6.jpg" alt="Avatar"> </li> </ul> </div> <div class="progress-container progress-warning"> <span class="progress-badge">Hill Status Flat</span> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="29" aria-valuemin="0" aria-valuemax="100" style="width: 29%;"> <span class="progress-value">29%</span> </div> </div> <ul class="list-unstyled team-info"> <li class="m-r-15"><small>Team</small></li> <li> <img src="assets/images/xs/avatar5.jpg" alt="Avatar"> </li> <li> <img src="assets/images/xs/avatar2.jpg" alt="Avatar"> </li> <li> <img src="assets/images/xs/avatar7.jpg" alt="Avatar"> </li> </ul> </div> </div> </div> </div> </div> </aside> <!-- Chat-launcher --> <div class="chat-launcher"></div> <div class="chat-wrapper"> <div class="card"> <div class="header"> <ul class="list-unstyled team-info margin-0"> <li class="m-r-15"><h2>Agent Team</h2></li> <li> <img src="assets/images/xs/avatar2.jpg" alt="Avatar"> </li> <li> <img src="assets/images/xs/avatar3.jpg" alt="Avatar"> </li> <li> <img src="assets/images/xs/avatar4.jpg" alt="Avatar"> </li> <li> <img src="assets/images/xs/avatar6.jpg" alt="Avatar"> </li> <li> <a href="javascript:void(0);" title="Add Member"><i class="zmdi zmdi-plus-circle"></i></a> </li> </ul> </div> <div class="body"> <div class="chat-widget"> <ul class="chat-scroll-list clearfix"> <li class="left float-left"> <img src="assets/images/xs/avatar3.jpg" class="rounded-circle" alt=""> <div class="chat-info"> <a class="name" href="#">Alexander</a> <span class="datetime">6:12</span> <span class="message">Hello, John </span> </div> </li> <li class="right"> <div class="chat-info"><span class="datetime">6:15</span> <span class="message">Hi, Alexander<br> How are you!</span> </div> </li> <li class="right"> <div class="chat-info"><span class="datetime">6:16</span> <span class="message">There are many variations of passages of Lorem Ipsum available</span> </div> </li> <li class="left float-left"> <img src="assets/images/xs/avatar2.jpg" class="rounded-circle" alt=""> <div class="chat-info"> <a class="name" href="#">Elizabeth</a> <span class="datetime">6:25</span> <span class="message">Hi, Alexander,<br> John <br> What are you doing?</span> </div> </li> <li class="left float-left"> <img src="assets/images/xs/avatar1.jpg" class="rounded-circle" alt=""> <div class="chat-info"> <a class="name" href="#">Michael</a> <span class="datetime">6:28</span> <span class="message">I would love to join the team.</span> </div> </li> <li class="right"> <div class="chat-info"><span class="datetime">7:02</span> <span class="message">Hello, <br>Michael</span> </div> </li> </ul> </div> <div class="input-group p-t-15"> <input type="text" class="form-control" placeholder="Enter text here..."> <span class="input-group-addon"> <i class="zmdi zmdi-mail-send"></i> </span> </div> </div> </div> </div> <!-- Main Content --> <section class="content"> <div class="block-header"> <div class="row"> <div class="col-lg-7 col-md-6 col-sm-12"> <h2>App Widgets <small class="text-muted">Welcome to Compass</small> </h2> </div> <div class="col-lg-5 col-md-6 col-sm-12"> <button class="btn btn-primary btn-icon btn-round hidden-sm-down float-right m-l-10" type="button"> <i class="zmdi zmdi-plus"></i> </button> <ul class="breadcrumb float-md-right"> <li class="breadcrumb-item"><a href="index.html"><i class="zmdi zmdi-home"></i> Compass</a></li> <li class="breadcrumb-item active">Widgets</li> <li class="breadcrumb-item active">App</li> </ul> </div> </div> </div> <div class="container-fluid"> <div class="row clearfix"> <div class="col-md-12 col-lg-4"> <div class="card weather l-pink"> <div class="body"> <div class="city"> <span>sky is clear</span> <h3>New York</h3> <img src="assets/images/weather/summer.svg" alt=""> </div> <ul class="row days list-unstyled m-b-0"> <li> <h5>SUN</h5> <img src="assets/images/weather/sky.svg" alt=""> <span class="degrees">77</span> </li> <li> <h5>MON</h5> <img src="assets/images/weather/rain.svg" alt=""> <span class="degrees">81</span> </li> <li> <h5>TUE</h5> <img src="assets/images/weather/summer.svg" alt=""> <span class="degrees">82</span> </li> <li> <h5>WED</h5> <img src="assets/images/weather/summer.svg" alt=""> <span class="degrees">82</span> </li> <li> <h5>THU</h5> <img src="assets/images/weather/cloudy.svg" alt=""> <span class="degrees">81</span> </li> <li> <h5>FRI</h5> <img src="assets/images/weather/summer.svg" alt=""> <span class="degrees">67</span> </li> <li> <h5>SAT</h5> <img src="assets/images/weather/cloudy.svg" alt=""> <span class="degrees">81</span> </li> </ul> </div> </div> <div class="card top-report"> <div class="body"> <h3 class="m-t-0 m-b-0">50.5 Gb</h3> <p class="text-muted">Traffic this month</p> <div class="progressbar-xs progress-rounded progress-striped progress ng-isolate-scope" value="68" type="success"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%;"></div> </div> <small>4% higher than last month</small> </div> </div> </div> <div class="col-md-12 col-lg-4"> <div class="card"> <div class="header"> <h2><strong>New</strong> Friends</h2> </div> <div class="body"> <ul class="new_friend_list list-unstyled row"> <li class="col-lg-4 col-md-2 col-sm-6 col-4"> <a href=""> <img src="assets/images/sm/avatar1.jpg" class="img-thumbnail" alt="User Image"> <h6 class="users_name">Jackson</h6> <small class="join_date">Today</small> </a> </li> <li class="col-lg-4 col-md-2 col-sm-6 col-4"> <a href=""> <img src="assets/images/sm/avatar2.jpg" class="img-thumbnail" alt="User Image"> <h6 class="users_name">Aubrey</h6> <small class="join_date">Yesterday</small> </a> </li> <li class="col-lg-4 col-md-2 col-sm-6 col-4"> <a href=""> <img src="assets/images/sm/avatar3.jpg" class="img-thumbnail" alt="User Image"> <h6 class="users_name">Oliver</h6> <small class="join_date">08 Nov</small> </a> </li> <li class="col-lg-4 col-md-2 col-sm-6 col-4"> <a href=""> <img src="assets/images/sm/avatar4.jpg" class="img-thumbnail" alt="User Image"> <h6 class="users_name">Isabella</h6> <small class="join_date">12 Dec</small> </a> </li> <li class="col-lg-4 col-md-2 col-sm-6 col-4"> <a href=""> <img src="assets/images/sm/avatar1.jpg" class="img-thumbnail" alt="User Image"> <h6 class="users_name">Jacob</h6> <small class="join_date">12 Dec</small> </a> </li> <li class="col-lg-4 col-md-2 col-sm-6 col-4"> <a href=""> <img src="assets/images/sm/avatar5.jpg" class="img-thumbnail" alt="User Image"> <h6 class="users_name">Matthew</h6> <small class="join_date">17 Dec</small> </a> </li> </ul> </div> </div> </div> <div class="col-md-12 col-lg-4"> <div class="card activities"> <div class="header"> <h2><strong>Activities</strong> <small>Recent user Activities</small></h2> </div> <div class="body"> <ul class="list-unstyled activity"> <li> <a href="javascript:void(0)"> <i class="zmdi zmdi-cake bg-blue"></i> <div class="info"> <h4>Admin Birthday</h4> <small>Will be Dec 21th</small> </div> </a> </li> <li> <a href="javascript:void(0)"> <i class="zmdi zmdi-file-text bg-red"></i> <div class="info"> <h4>Code Change</h4> <small>Will be Dec 22th</small> </div> </a> </li> <li> <a href="javascript:void(0)"> <i class="zmdi zmdi-account-box-phone bg-green"></i> <div class="info"> <h4>Add New Contact</h4> <small>Will be Dec 23th</small> </div> </a> </li> <li> <a href="javascript:void(0)"> <i class="zmdi zmdi-email bg-amber"></i> <div class="info"> <h4>New Email</h4> <small>Will be July 28th</small> </div> </a> </li> <li> <a href="javascript:void(0)"> <i class="zmdi zmdi-account-box-phone bg-green"></i> <div class="info"> <h4>Add New Contact</h4> <small>Will be Dec 23th</small> </div> </a> </li> </ul> </div> </div> </div> </div> <div class="row clearfix"> <div class="col-md-12"> <div class="card-group text-center"> <div class="card"> <img class="img-fluid" src="assets/images/image2.jpg" alt="Card image cap"> <div class="body"> <h4 class="title">Card title</h4> <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos iure, esse beatae sapiente dolor aliquid ea ipsam, ducimus facere. Ut culpa at asperiores voluptatibus ipsa vero natus, voluptates, quasi cum!</p> <p class="text"> <small class="text-muted">Last updated 3 mins ago</small> </p> </div> </div> <div class="card"> <img class="img-fluid" src="assets/images/image3.jpg" alt="Card image cap"> <div class="body"> <h4 class="title">Card title</h4> <p class="text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="text"> <small class="text-muted">Last updated 3 mins ago</small> </p> </div> </div> <div class="card"> <img class="img-fluid" src="assets/images/image1.jpg" alt="Card image cap"> <div class="body"> <h4 class="title">Card title</h4> <p class="text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <a href="#" class="btn btn-primary btn-round waves-effect">Button</a> <p class="text"> <small class="text-muted">Last updated 3 mins ago</small> </p> </div> </div> </div> </div> </div> <div class="row clearfix"> <div class="col-lg-12"> <div class="card"> <ul class="row profile_state list-unstyled"> <li class="col-lg-3 col-md-3 col-6"> <div class="body"> <i class="zmdi zmdi-eye col-amber"></i> <h4>2,365</h4> <span>Post View</span> </div> </li> <li class="col-lg-3 col-md-3 col-6"> <div class="body"> <i class="zmdi zmdi-thumb-up col-blue"></i> <h4>365</h4> <span>Likes</span> </div> </li> <li class="col-lg-3 col-md-3 col-6"> <div class="body"> <i class="zmdi zmdi-comment-text col-red"></i> <h4>65</h4> <span>Comments</span> </div> </li> <li class="col-lg-3 col-md-3 col-6"> <div class="body"> <i class="zmdi zmdi-account text-success"></i> <h4>2,055</h4> <span>Profile Views</span> </div> </li> </ul> </div> </div> </div> <div class="row clearfix"> <div class="col-sm-12 col-md-12 col-lg-7"> <div class="row clearfix"> <div class="col-lg-6 col-md-12"> <div class="card"> <div class="carousel slide twitter-feed" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item text-center active"> <div class="col-12"> <i class="zmdi zmdi-twitter"></i> </div> <div class="col-12"> <p><i class="zmdi zmdi-quote"></i>Lorem Ipsum is simply typesetting industry. Lorem Ipsum has been the industry's standard</p> </div> </div> <div class="carousel-item text-center"> <div class="col-12"> <i class="zmdi zmdi-twitter"></i> </div> <div class="col-12"> <p><i class="zmdi zmdi-quote"></i>It is a long established fact that a reader will ontent of a page when looking at its layout.</p> </div> </div> </div> </div> </div> </div> <div class="col-lg-6 col-md-12"> <div class="card"> <div class="carousel slide facebook-feed" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item text-center active"> <div class="col-12"> <i class="zmdi zmdi-facebook"></i> </div> <div class="col-12"> <p><i class="zmdi zmdi-quote"></i>Lorem Ipsum is simply typesetting industry. Lorem Ipsum has been the industry's standard</p> </div> </div> <div class="carousel-item text-center"> <div class="col-12"><i class="zmdi zmdi-facebook"></i></div> <div class="col-12"> <p><i class="zmdi zmdi-quote"></i>It is a long established fact that a reader will ontent of a page when looking at its layout.</p> </div> </div> </div> </div> </div> </div> </div> <div class="row clearfix social-widget"> <div class="col-lg-4 col-md-4 col-6"> <div class="card info-box-2 hover-zoom-effect facebook-widget"> <div class="icon"><i class="zmdi zmdi-facebook"></i></div> <div class="content"> <div class="text">Like</div> <div class="number">123</div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-6"> <div class="card info-box-2 hover-zoom-effect instagram-widget"> <div class="icon"><i class="zmdi zmdi-instagram"></i></div> <div class="content"> <div class="text">Followers</div> <div class="number">231</div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-6"> <div class="card info-box-2 hover-zoom-effect twitter-widget"> <div class="icon"><i class="zmdi zmdi-twitter"></i></div> <div class="content"> <div class="text">Followers</div> <div class="number">31</div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-6"> <div class="card info-box-2 hover-zoom-effect google-widget"> <div class="icon"><i class="zmdi zmdi-google"></i></div> <div class="content"> <div class="text">Like</div> <div class="number">254</div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-6"> <div class="card info-box-2 hover-zoom-effect linkedin-widget"> <div class="icon"><i class="zmdi zmdi-linkedin"></i></div> <div class="content"> <div class="text">Followers</div> <div class="number">2510</div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-6"> <div class="card info-box-2 hover-zoom-effect behance-widget"> <div class="icon"><i class="zmdi zmdi-behance"></i></div> <div class="content"> <div class="text">Project</div> <div class="number">121</div> </div> </div> </div> </div> </div> <div class="col-sm-12 col-md-12 col-lg-5"> <div class="card"> <div class="header"> <h2><strong>Inbox</strong></h2> <ul class="header-dropdown"> <li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <i class="zmdi zmdi-more"></i> </a> <ul class="dropdown-menu dropdown-menu-right slideUp float-right"> <li><a href="javascript:void(0);">Edit</a></li> <li><a href="javascript:void(0);">Delete</a></li> <li><a href="javascript:void(0);">Report</a></li> </ul> </li> <li class="remove"> <a role="button" class="boxs-close"><i class="zmdi zmdi-close"></i></a> </li> </ul> </div> <div class="body"> <ul class="inbox-widget list-unstyled clearfix"> <li class="inbox-inner"> <a href="javascript:void(0)"> <div class="inbox-item"> <div class="inbox-img"> <img src="assets/images/xs/avatar1.jpg" alt=""> </div> <div class="inbox-item-info"> <p class="author">Aaron Enlightened</p> <p class="inbox-message">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p> <p class="inbox-date">13:34 PM</p> </div> </div> </a> </li> <li class="inbox-inner"> <a href="javascript:void(0)"> <div class="inbox-item"> <div class="inbox-img"> <img src="assets/images/xs/avatar2.jpg" alt=""> </div> <div class="inbox-item-info"> <p class="author">Alvin Doe</p> <p class="inbox-message">Lorem Ipsum is simply dummy text oftting industry. Lorem Ipsum has been the industry's</p> <p class="inbox-date">13:34 PM</p> </div> </div> </a> </li> <li class="inbox-inner"> <a href="javascript:void(0)"> <div class="inbox-item"> <div class="inbox-img"> <img src="assets/images/xs/avatar3.jpg" alt=""> </div> <div class="inbox-item-info"> <p class="author">Austin</p> <p class="inbox-message">text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p> <p class="inbox-date">13:34 PM</p> </div> </div> </a> </li> <li class="inbox-inner"> <a href="javascript:void(0)"> <div class="inbox-item"> <div class="inbox-img"> <img src="assets/images/xs/avatar4.jpg" alt=""> </div> <div class="inbox-item-info"> <p class="author">John Benjamin</p> <p class="inbox-message">simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p> <p class="inbox-date">13:34 PM</p> </div> </div> </a> </li> <li class="inbox-inner"> <a href="javascript:void(0)"> <div class="inbox-item"> <div class="inbox-img"> <img src="assets/images/xs/avatar5.jpg" alt=""> </div> <div class="inbox-item-info"> <p class="author">Broderick</p> <p class="inbox-message">text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p> <p class="inbox-date">13:34 PM</p> </div> </div> </a> </li> </ul> </div> </div> </div> </div> <div class="row clearfix"> <div class="col-lg-4 col-md-12"> <div class="card w_calender"> <div class="date l-slategray"> <span>Sunday, December 28</span> <span>2017</span> </div> <div class="body days"> <ul class="m-t-10"> <li>MON</li> <li>TUE</li> <li>WED</li> <li>THU</li> <li>FRI</li> <li>SAT</li> <li>SUN</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> <ul> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> </ul> <ul> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> <li>21</li> </ul> <ul> <li>22</li> <li>23</li> <li>24</li> <li>25</li> <li>26</li> <li>27</li> <li><em>28</em></li> </ul> <ul> <li>29</li> <li>30</li> <li>31</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </div> </div> <div class="col-lg-4 col-md-12"> <div class="card member-card"> <div class="header l-pink"> <h4 class="m-t-10">Eliana Smith</h4> </div> <div class="member-img"> <a href="profile.html" class=""> <img src="assets/images/lg/avatar2.jpg" class="rounded-circle" alt="profile-image"> </a> </div> <div class="body"> <div class="col-12"> <ul class="social-links list-unstyled"> <li> <a title="facebook" href="#"> <i class="zmdi zmdi-facebook"></i> </a> </li> <li> <a title="twitter" href="#"> <i class="zmdi zmdi-twitter"></i> </a> </li> <li> <a title="instagram" href="javascript:void(0);"> <i class="zmdi zmdi-instagram"></i> </a> </li> </ul> <p class="text-muted">795 Folsom Ave, Suite 600 San Francisco, CADGE 94107</p> </div> <hr> <div class="row"> <div class="col-4"> <h5>18</h5> <small>Files</small> </div> <div class="col-4"> <h5>2GB</h5> <small>Used</small> </div> <div class="col-4"> <h5>65,6$</h5> <small>Spent</small> </div> </div> </div> </div> </div> <div class="col-lg-4 col-md-12"> <div class="card member-card"> <div class="header l-cyan"> <h4 class="m-t-10">Michael Dorsey</h4> </div> <div class="member-img"> <a href="profile.html" class=""> <img src="assets/images/lg/avatar1.jpg" class="rounded-circle" alt="profile-image"> </a> </div> <div class="body"> <div class="col-12"> <ul class="social-links list-unstyled"> <li> <a title="facebook" href="#"> <i class="zmdi zmdi-facebook"></i> </a> </li> <li> <a title="twitter" href="#"> <i class="zmdi zmdi-twitter"></i> </a> </li> <li> <a title="instagram" href="javascript:void(0);"> <i class="zmdi zmdi-instagram"></i> </a> </li> </ul> <p class="text-muted">795 Folsom Ave, Suite 600 San Francisco, CADGE 94107</p> </div> <hr> <div class="row"> <div class="col-4"> <h5>57</h5> <small>Files</small> </div> <div class="col-4"> <h5>12GB</h5> <small>Used</small> </div> <div class="col-4"> <h5>1,256$</h5> <small>Spent</small> </div> </div> </div> </div> </div> </div> <div class="row clearfix"> <div class="col-sm-12 col-md-12 col-lg-4"> <div class="card current_progress"> <div class="header"> <h2><strong>Chat</strong> Box<small>Design Team</small></h2> </div> <div class="body"> <div class="chat-widget"> <ul class="chat-scroll-list clearfix"> <li class="left float-left"> <img src="assets/images/xs/avatar3.jpg" class="rounded-circle" alt=""> <div class="chat-info"> <a class="name" href="#">Alexander</a> <span class="datetime">6:12</span> <span class="message">Hello, John </span> </div> </li> <li class="right"> <div class="chat-info"><span class="datetime">6:15</span> <span class="message">Hi, Alexander<br> How are you!</span> </div> </li> <li class="right"> <div class="chat-info"><span class="datetime">6:16</span> <span class="message">There are many variations of passages of Lorem Ipsum available</span> </div> </li> <li class="left float-left"> <img src="assets/images/xs/avatar2.jpg" class="rounded-circle" alt=""> <div class="chat-info"> <a class="name" href="#">Elizabeth</a> <span class="datetime">6:25</span> <span class="message">Hi, Alexander,<br> John <br> What are you doing?</span> </div> </li> <li class="left float-left"> <img src="assets/images/xs/avatar1.jpg" class="rounded-circle" alt=""> <div class="chat-info"> <a class="name" href="#">Michael</a> <span class="datetime">6:28</span> <span class="message">I would love to join the team.</span> </div> </li> <li class="right"> <div class="chat-info"><span class="datetime">7:02</span> <span class="message">Hello, <br>Michael</span> </div> </li> </ul> </div> <div class="input-group p-t-15"> <input type="text" class="form-control" placeholder="Enter text here..."> <span class="input-group-addon"> <i class="zmdi zmdi-mail-send"></i> </span> </div> </div> </div> </div> <div class="col-sm-12 col-md-12 col-lg-8"> <div class="card"> <div class="header"> <h2><strong>Social</strong> Media</h2> <ul class="header-dropdown"> <li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <i class="zmdi zmdi-more"></i> </a> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="javascript:void(0);">Action</a></li> <li><a href="javascript:void(0);">Another action</a></li> <li><a href="javascript:void(0);">Something else</a></li> </ul> </li> <li class="remove"> <a role="button" class="boxs-close"><i class="zmdi zmdi-close"></i></a> </li> </ul> </div> <div class="body"> <div class="table-responsive social_media_table"> <table class="table table-hover"> <thead> <tr> <th>Media</th> <th>Name</th> <th>Like</th> <th>Comments</th> <th>Share</th> <th>Members</th> </tr> </thead> <tbody> <tr> <td><span class="social_icon linkedin"><i class="zmdi zmdi-linkedin"></i></span> </td> <td><span class="list-name">Linked In</span> <span class="text-muted">Florida, United States</span> </td> <td>19K</td> <td>14K</td> <td>10K</td> <td> <span class="badge badge-success">2341</span> </td> </tr> <tr> <td><span class="social_icon twitter-table"><i class="zmdi zmdi-twitter"></i></span> </td> <td><span class="list-name">Twitter</span> <span class="text-muted">Arkansas, United States</span> </td> <td>7K</td> <td>11K</td> <td>21K</td> <td> <span class="badge badge-success">952</span> </td> </tr> <tr> <td><span class="social_icon facebook"><i class="zmdi zmdi-facebook"></i></span> </td> <td><span class="list-name">Facebook</span> <span class="text-muted">Illunois, United States</span> </td> <td>15K</td> <td>18K</td> <td>8K</td> <td> <span class="badge badge-success">6127</span> </td> </tr> <tr> <td><span class="social_icon google"><i class="zmdi zmdi-google-plus"></i></span> </td> <td><span class="list-name">Google Plus</span> <span class="text-muted">Arizona, United States</span> </td> <td>15K</td> <td>18K</td> <td>154</td> <td> <span class="badge badge-success">325</span> </td> </tr> <tr> <td><span class="social_icon youtube"><i class="zmdi zmdi-youtube-play"></i></span> </td> <td><span class="list-name">YouTube</span> <span class="text-muted">Alaska, United States</span> </td> <td>15K</td> <td>18K</td> <td>200</td> <td> <span class="badge badge-success">160</span> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <div class="row clearfix"> <div class="col-lg-4 col-md-12"> <div class="card project_widget"> <div class="pw_img"> <img class="img-responsive" src="assets/images/image2.jpg" alt="About the image"> </div> <div class="pw_content"> <div class="pw_header"> <h6>Magazine Design</h6> <small class="text-muted">Compass | Last Update: 12 Dec 2017</small> </div> <div class="pw_meta"> <span>4,870 USD</span> <small class="text-muted">Budget / Salary</small> <small class="text-danger">17 Days Remaining</small> </div> </div> </div> </div> <div class="col-lg-4 col-md-12"> <div class="card project_widget"> <div class="pw_img"> <img class="img-responsive" src="assets/images/image4.jpg" alt="About the image"> </div> <div class="pw_content"> <div class="pw_header"> <h6>New Dashboard</h6> <small class="text-muted">Compass | Last Update: 17 Dec 2017</small> </div> <div class="pw_meta"> <span>921 USD</span> <small class="text-muted">Budget / Salary</small> <small class="text-success">Early Dec 2017</small> </div> </div> </div> </div> <div class="col-lg-4 col-md-12"> <div class="card project_widget"> <div class="pw_img"> <img class="img-responsive" src="assets/images/image3.jpg" alt="About the image"> </div> <div class="pw_content"> <div class="pw_header"> <h6>Mobile App</h6> <small class="text-muted">Compass | Last Update: 21 Dec 2017</small> </div> <div class="pw_meta"> <span>1,870 USD</span> <small class="text-muted">Budget / Salary</small> <small class="text-danger">10 Days Remaining</small> </div> </div> </div> </div> </div> <div class="row clearfix"> <div class="col-lg-6 col-md-12"> <div class="card"> <div class="body"> <div id="demo2" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo2" data-slide-to="0" class="active"></li> <li data-target="#demo2" data-slide-to="1" class=""></li> <li data-target="#demo2" data-slide-to="2" class=""></li> </ul> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="assets/images/image-gallery/5.jpg" class="img-fluid" alt=""> <div class="carousel-caption"> <h3>Chicago</h3> <p>Thank you, Chicago!</p> </div> </div> <div class="carousel-item"> <img src="assets/images/image-gallery/6.jpg" class="img-fluid" alt=""> <div class="carousel-caption"> <h3>New York</h3> <p>We love the Big Apple!</p> </div> </div> <div class="carousel-item"> <img src="assets/images/image-gallery/12.jpg" class="img-fluid" alt=""> <div class="carousel-caption"> <h3>Los Angeles</h3> <p>We had such a great time in LA!</p> </div> </div> </div> <!-- Controls --> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo2" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo2" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div> </div> </div> <div class="col-lg-3 col-md-6"> <div class="card"> <div class="header"> <h2><strong>Reports</strong></h2> <ul class="header-dropdown m-r--5"> <li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <i class="zmdi zmdi-more-vert"></i> </a> <ul class="dropdown-menu float-right"> <li> <a href="javascript:void(0);">Action</a> </li> <li> <a href="javascript:void(0);">Another action</a> </li> <li> <a href="javascript:void(0);">Something else here</a> </li> </ul> </li> </ul> </div> <div class="body table-responsive"> <table class="table table-hover m-b-0"> <thead> <tr> <th>First Name</th> <th>Charts</th> </tr> </thead> <tbody> <tr> <td>Dean Otto</td> <td> <span class="sparkbar">5,8,6,3,5,9,2</span> </td> </tr> <tr> <td>K. Thornton</td> <td> <span class="sparkbar">10,8,9,3,5,8,5</span> </td> </tr> <tr> <td>Kane D.</td> <td> <span class="sparkbar">7,5,9,3,5,2,5</span> </td> </tr> <tr> <td>Jack Bird</td> <td> <span class="sparkbar">10,8,1,3,3,8,7</span> </td> </tr> <tr> <td>Hughe L.</td> <td> <span class="sparkbar">2,8,9,8,5,1,5</span> </td> </tr> </tbody> </table> </div> </div> </div> <div class="col-lg-3 col-md-6"> <div class="card"> <div class="header"> <h2><strong>Visits</strong> from countries</h2> </div> <div class="body"> <ul class="country-state list-unstyled"> <li class="m-b-20"> <h6>6350</h6> <small>From India</small> <div class="float-right">58% <i class="fa fa-level-up text-success"></i> </div> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:58%;"> <span class="sr-only">58% Complete</span> </div> </div> </li> <li class="m-b-20"> <h6>3250</h6> <small>From UAE</small> <div class="float-right">90% <i class="fa fa-level-up text-success"></i> </div> <div class="progress"> <div class="progress-bar progress-bar-inverse" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="sr-only">90% Complete</span> </div> </div> </li> <li class="m-b-20"> <h6>1250</h6> <small>From Australia</small> <div class="float-right">70% <i class="fa fa-level-down text-danger"></i> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:70%;"> <span class="sr-only">70% Complete</span> </div> </div> </li> <li class="m-b-10"> <h6>1350</h6> <small>From USA</small> <div class="float-right">70% <i class="fa fa-level-up text-success"></i> </div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:70%;"> <span class="sr-only">70% Complete</span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </section> <!-- Jquery Core Js --> <script src="assets/bundles/libscripts.bundle.js"></script> <!-- Lib Scripts Plugin Js --> <script src="assets/bundles/vendorscripts.bundle.js"></script> <!-- Lib Scripts Plugin Js --> <script src="assets/bundles/sparkline.bundle.js"></script> <script src="assets/bundles/mainscripts.bundle.js"></script> <script src="assets/js/pages/charts/sparkline.js"></script> </body> </html>