[ 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: mail-inbox.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"> <!-- Font 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/inbox.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>UI UX Designer</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 NAVIGATION</li> <li> <a href="index.html" > <i class="zmdi zmdi-home"></i> <span>Dashboard</span> </a> </li> <li class="active open"> <a href="mail-inbox.html"> <i class="zmdi zmdi-email"></i> <span>Inbox</span> </a> </li> <li> <a href="mail-compose.html" > <i class="zmdi zmdi-plus-circle"></i> <span>Compose Mail</span> </a> </li> <li> <a href="mail-single.html" > <i class="zmdi zmdi-file-text"></i> <span>Single Mail</span> </a> </li> <li> <a href="javascript:void(0);" > <i class="zmdi zmdi-folder-star"></i> <span>Draft</span> </a> </li> <li> <a href="javascript:void(0);" > <i class="zmdi zmdi-folder-star"></i> <span>Important</span> </a> </li> <li> <a href="javascript:void(0);" > <i class="zmdi zmdi-delete"></i> <span>Bin</span> </a> </li> <li class="header">LABELS</li> <li> <a href="javascript:void(0);" > <i class="zmdi zmdi-label col-blue"></i> <span>Family</span> </a> </li> <li> <a href="javascript:void(0);" > <i class="zmdi zmdi-label col-green"></i> <span>Work</span> </a> </li> <li> <a href="javascript:void(0);" > <i class="zmdi zmdi-label col-amber"></i> <span>Shop</span> </a> </li> <li> <a href="javascript:void(0);" > <i class="zmdi zmdi-label col-blush"></i> <span>Themeforest</span> </a> </li> <li> <a href="javascript:void(0);" > <i class="zmdi zmdi-label col-red"></i> <span>Google</span> </a> </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> <section class="content inbox"> <div class="block-header"> <div class="row"> <div class="col-lg-7 col-md-6 col-sm-12"> <h2>Inbox <small class="text-muted">Welcome to Compass</small> </h2> </div> <div class="col-lg-5 col-md-6 col-sm-12"> <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">Inbox</li> </ul> </div> </div> </div> <div class="container-fluid"> <div class="row clearfix"> <div class="col-lg-12"> <div class="card action_bar"> <div class="body"> <div class="row clearfix"> <div class="col-lg-1 col-md-2 col-3"> <div class="checkbox inlineblock delete_all"> <input id="deleteall" type="checkbox"> <label for="deleteall"> All </label> </div> </div> <div class="col-lg-5 col-md-4 col-6"> <div class="input-group search"> <input type="text" class="form-control" placeholder="Search..."> <span class="input-group-addon"> <i class="zmdi zmdi-search"></i> </span> </div> </div> <div class="col-lg-6 col-md-6 col-3"> <div class="btn-group hidden-sm-down"> <div class="btn-group"> <button type="button" class="btn btn-simple btn-info dropdown-toggle btn-round" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="zmdi zmdi-label"></i> <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right slideDown"> <li> <a href="javascript:void(0);">Family</a> </li> <li> <a href="javascript:void(0);">Work</a> </li> <li> <a href="javascript:void(0);">Google</a> </li> <li role="separator" class="divider"></li> <li> <a href="javascript:void(0);">Create a Label</a> </li> </ul> </div> </div> <div class="btn-group hidden-md-down hidden-sm-down"> <button type="button" class="btn btn-simple btn-info dropdown-toggle btn-round" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="zmdi zmdi-folder"></i> <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right slideDown"> <li><a href="javascript:void(0);">Important</a></li> <li><a href="javascript:void(0);">Social</a></li> <li><a href="javascript:void(0);">Bank Statements</a></li> <li role="separator" class="divider"></li> <li><a href="javascript:void(0);">Create a folder</a></li> </ul> </div> <div class="btn-group hidden-sm-down"> <button type="button" class="btn btn-simple btn-warning dropdown-toggle btn-round" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">More<span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right slideDown"> <li><a href="javascript:void(0);">Unread</a></li> <li><a href="javascript:void(0);">Unimportant</a></li> <li><a href="javascript:void(0);">Add star</a></li> <li role="separator" class="divider"></li> <li><a href="javascript:void(0);">Mute</a></li> </ul> </div> <button type="button" class="btn btn-success btn-icon btn-icon-mini btn-round hidden-sm-down"> <i class="zmdi zmdi-plus-circle"></i> </button> <button type="button" class="btn btn-default btn-icon btn-simple btn-icon-mini btn-round hidden-sm-down"> <i class="zmdi zmdi-archive"></i> </button> <button type="button" class="btn btn-icon btn-simple btn-icon-mini btn-round btn-danger"> <i class="zmdi zmdi-delete"></i> </button> </div> </div> </div> </div> </div> </div> <div class="row clearfix"> <div class="col-md-12 col-lg-12 col-xl-12"> <ul class="mail_list list-group list-unstyled"> <li class="list-group-item"> <div class="media"> <div class="pull-left"> <div class="controls"> <div class="checkbox"> <input type="checkbox" id="basic_checkbox_1"> <label for="basic_checkbox_1"></label> </div> <a href="javascript:void(0);" class="favourite text-muted hidden-sm-down" data-toggle="active"><i class="zmdi zmdi-star-outline"></i></a> </div> <div class="thumb hidden-sm-down m-r-20"> <img src="assets/images/xs/avatar1.jpg" class="rounded-circle" alt=""> </div> </div> <div class="media-body"> <div class="media-heading"> <a href="mail-single.html" class="m-r-10">Velit a labore</a> <span class="badge bg-blue">Family</span> <small class="float-right text-muted"><time class="hidden-sm-down" datetime="2017">12:35 AM</time><i class="zmdi zmdi-attachment-alt"></i> </small> </div> <p class="msg">Lorem Ipsum is simply dumm dummy text of the printing and typesetting industry. </p> </div> </div> </li> <li class="list-group-item unread"> <div class="media"> <div class="pull-left"> <div class="controls"> <div class="checkbox"> <input type="checkbox" id="basic_checkbox_2"> <label for="basic_checkbox_2"></label> </div> <a href="javascript:void(0);" class="favourite col-amber hidden-sm-down" data-toggle="active"><i class="zmdi zmdi-star"></i></a> </div> <div class="thumb hidden-sm-down m-r-20"> <img src="assets/images/xs/avatar2.jpg" class="rounded-circle" alt=""> </div> </div> <div class="media-body"> <div class="media-heading"> <a href="mail-single.html" class="m-r-10">Simply dummy text</a> <span class="badge bg-amber">Shop</span> <small class="float-right text-muted"><time class="hidden-sm-down" datetime="2017">12:35 AM</time><i class="zmdi zmdi-attachment-alt"></i> </small> </div> <p class="msg">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="pull-left"> <div class="controls"> <div class="checkbox"> <input type="checkbox" id="basic_checkbox_3"> <label for="basic_checkbox_3"></label> </div> <a href="javascript:void(0);" class="favourite text-muted hidden-sm-down" data-toggle="active"><i class="zmdi zmdi-star-outline"></i></a> </div> <div class="thumb hidden-sm-down m-r-20"> <img src="assets/images/xs/avatar3.jpg" class="rounded-circle" alt=""> </div> </div> <div class="media-body"> <div class="media-heading"> <a href="mail-single.html" class="m-r-10">Velit a labore</a> <span class="badge bg-red">Google</span> <small class="float-right text-muted"><time class="hidden-sm-down" datetime="2017">12:35 AM</time><i class="zmdi zmdi-attachment-alt"></i> </small> </div> <p class="msg"> If you are going to use a passage of Lorem Ipsum, you need to be sure</p> </div> </div> </li> <li class="list-group-item unread"> <div class="media"> <div class="pull-left"> <div class="controls"> <div class="checkbox"> <input type="checkbox" id="basic_checkbox_4"> <label for="basic_checkbox_4"></label> </div> <a href="javascript:void(0);" class="favourite text-muted hidden-sm-down" data-toggle="active"><i class="zmdi zmdi-star-outline"></i></a> </div> <div class="thumb hidden-sm-down m-r-20"> <img src="assets/images/xs/avatar4.jpg" class="rounded-circle" alt=""> </div> </div> <div class="media-body"> <div class="media-heading"> <a href="mail-single.html" class="m-r-10">Variations of passages</a> <span class="badge bg-blush">Themeforest</span> <small class="float-right text-muted"><time class="hidden-sm-down" datetime="2017">12:35 AM</time><i class="zmdi zmdi-attachment-alt"></i> </small> </div> <p class="msg">There are many variations of passages of Lorem Ipsum available, but the majority </p> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="pull-left"> <div class="controls"> <div class="checkbox"> <input type="checkbox" id="basic_checkbox_5"> <label for="basic_checkbox_5"></label> </div> <a href="javascript:void(0);" class="favourite text-muted hidden-sm-down" data-toggle="active"><i class="zmdi zmdi-star-outline"></i></a> </div> <div class="thumb hidden-sm-down m-r-20"> <img src="assets/images/xs/avatar5.jpg" class="rounded-circle" alt=""> </div> </div> <div class="media-body"> <div class="media-heading"> <a href="mail-single.html" class="m-r-10">Generators on the Internet</a> <span class="badge bg-green">Work</span> <small class="float-right text-muted"><time class="hidden-sm-down" datetime="2017">12:35 AM</time><i class="zmdi zmdi-attachment-alt"></i> </small> </div> <p class="msg">LAll the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary</p> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="pull-left"> <div class="controls"> <div class="checkbox"> <input type="checkbox" id="basic_checkbox_6"> <label for="basic_checkbox_6"></label> </div> <a href="javascript:void(0);" class="favourite col-amber hidden-sm-down" data-toggle="active"><i class="zmdi zmdi-star"></i></a> </div> <div class="thumb hidden-sm-down m-r-20"> <img src="assets/images/xs/avatar6.jpg" class="rounded-circle" alt=""> </div> </div> <div class="media-body"> <div class="media-heading"> <a href="mail-single.html" class="m-r-10">Contrary to popular</a> <span class="badge bg-blush">Themeforest</span> <small class="float-right text-muted"><time class="hidden-sm-down" datetime="2017">12:35 AM</time><i class="zmdi zmdi-attachment-alt"></i> </small> </div> <p class="msg">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical</p> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="pull-left"> <div class="controls"> <div class="checkbox"> <input type="checkbox" id="basic_checkbox_7"> <label for="basic_checkbox_7"></label> </div> <a href="javascript:void(0);" class="favourite col-amber hidden-sm-down" data-toggle="active"><i class="zmdi zmdi-star"></i></a> </div> <div class="thumb hidden-sm-down m-r-20"> <img src="assets/images/xs/avatar7.jpg" class="rounded-circle" alt=""> </div> </div> <div class="media-body"> <div class="media-heading"> <a href="mail-single.html" class="m-r-10">Velit a labore</a> <span class="badge bg-green">Work</span> <small class="float-right text-muted"><time class="hidden-sm-down" datetime="2017">12:35 AM</time><i class="zmdi zmdi-attachment-alt"></i> </small> </div> <p class="msg">Lorem Ipsum is simply dumm dummy text of the printing and typesetting industry. </p> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="pull-left"> <div class="controls"> <div class="checkbox"> <input type="checkbox" id="basic_checkbox_8" checked> <label for="basic_checkbox_8"></label> </div> <a href="javascript:void(0);" class="favourite col-amber hidden-sm-down" data-toggle="active"><i class="zmdi zmdi-star"></i></a> </div> <div class="thumb hidden-sm-down m-r-20"> <img src="assets/images/xs/avatar8.jpg" class="rounded-circle" alt=""> </div> </div> <div class="media-body"> <div class="media-heading"> <a href="mail-single.html" class="m-r-10">Variations of passages</a> <span class="badge bg-blush">Themeforest</span> <small class="float-right text-muted"><time class="hidden-sm-down" datetime="2017">12:35 AM</time><i class="zmdi zmdi-attachment-alt"></i> </small> </div> <p class="msg">There are many variations of passages of Lorem Ipsum available, but the majority </p> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="pull-left"> <div class="controls"> <div class="checkbox"> <input type="checkbox" id="basic_checkbox_9"> <label for="basic_checkbox_9"></label> </div> <a href="javascript:void(0);" class="favourite text-muted hidden-sm-down" data-toggle="active"><i class="zmdi zmdi-star-outline"></i></a> </div> <div class="thumb hidden-sm-down m-r-20"> <img src="assets/images/xs/avatar9.jpg" class="rounded-circle" alt=""> </div> </div> <div class="media-body"> <div class="media-heading"> <a href="mail-single.html" class="m-r-10">Generators on the Internet</a> <span class="badge bg-green">Work</span> <small class="float-right text-muted"><time class="hidden-sm-down" datetime="2017">12:35 AM</time><i class="zmdi zmdi-attachment-alt"></i> </small> </div> <p class="msg">LAll the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary</p> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="pull-left"> <div class="controls"> <div class="checkbox"> <input type="checkbox" id="basic_checkbox_10"> <label for="basic_checkbox_10"></label> </div> <a href="javascript:void(0);" class="favourite text-muted hidden-sm-down" data-toggle="active"><i class="zmdi zmdi-star-outline"></i></a> </div> <div class="thumb hidden-sm-down m-r-20"> <img src="assets/images/xs/avatar10.jpg" class="rounded-circle" alt=""> </div> </div> <div class="media-body"> <div class="media-heading"> <a href="mail-single.html" class="m-r-10">Velit a labore</a> <span class="badge bg-blue">Family</span> <small class="float-right text-muted"><time class="hidden-sm-down" datetime="2017">12:35 AM</time><i class="zmdi zmdi-attachment-alt"></i> </small> </div> <p class="msg">Lorem Ipsum is simply dumm dummy text of the printing and typesetting industry. </p> </div> </div> </li> </ul> <div class="card m-t-5"> <div class="body"> <ul class="pagination pagination-primary m-b-0"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </div> </div> </div> </div> </div> </section> <!-- Jquery Core Js --> <script src="assets/bundles/libscripts.bundle.js"></script> <script src="assets/bundles/vendorscripts.bundle.js"></script> <script src="assets/bundles/mainscripts.bundle.js"></script> </body> </html>