MIF_E31222756/template/DB/email-inbox.html

1072 lines
74 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Inbox | Adminox - Responsive Bootstrap 4 Admin Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
<meta content="Coderthemes" name="author" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- App favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- App css -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" id="bootstrap-stylesheet" />
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/app.min.css" rel="stylesheet" type="text/css" id="app-stylesheet" />
</head>
<body>
<!-- Begin page -->
<div id="wrapper">
<!-- Topbar Start -->
<div class="navbar-custom">
<ul class="list-unstyled topnav-menu float-right mb-0">
<li class="dropdown notification-list dropdown d-none d-lg-inline-block ml-2">
<a class="nav-link dropdown-toggle mr-0 waves-effect waves-light" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<img src="assets/images/flags/us.jpg" alt="lang-image" height="12">
</a>
<div class="dropdown-menu dropdown-menu-right profile-dropdown ">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<img src="assets/images/flags/germany.jpg" alt="lang-image" class="mr-1" height="12"> <span
class="align-middle">German</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<img src="assets/images/flags/italy.jpg" alt="lang-image" class="mr-1" height="12"> <span
class="align-middle">Italian</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<img src="assets/images/flags/spain.jpg" alt="lang-image" class="mr-1" height="12"> <span
class="align-middle">Spanish</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<img src="assets/images/flags/russia.jpg" alt="lang-image" class="mr-1" height="12"> <span
class="align-middle">Russian</span>
</a>
</div>
</li>
<li class="dropdown notification-list">
<a class="nav-link dropdown-toggle waves-effect waves-light" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<i class="dripicons-bell noti-icon"></i>
<span class="badge badge-pink rounded-circle noti-icon-badge">4</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-lg">
<div class="dropdown-header noti-title">
<h5 class="text-overflow m-0"><span class="float-right">
<span class="badge badge-danger float-right">5</span>
</span>Notification</h5>
</div>
<div class="slimscroll noti-scroll">
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-success"><i class="mdi mdi-comment-account-outline"></i></div>
<p class="notify-details">Robert S. Taylor commented on Admin<small class="text-muted">1 min ago</small></p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-primary">
<i class="mdi mdi-settings-outline"></i>
</div>
<p class="notify-details">New settings
<small class="text-muted">There are new settings available</small>
</p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-warning">
<i class="mdi mdi-bell-outline"></i>
</div>
<p class="notify-details">Updates
<small class="text-muted">There are 2 new updates available</small>
</p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon">
<img src="assets/images/users/avatar-4.jpg" class="img-fluid rounded-circle" alt="" /> </div>
<p class="notify-details">Karen Robinson</p>
<p class="text-muted mb-0 user-msg">
<small>Wow ! this admin looks good and awesome design</small>
</p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-danger">
<i class="mdi mdi-account-plus"></i>
</div>
<p class="notify-details">New user
<small class="text-muted">You have 10 unread messages</small>
</p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-info">
<i class="mdi mdi-comment-account-outline"></i>
</div>
<p class="notify-details">Caleb Flakelar commented on Admin
<small class="text-muted">4 days ago</small>
</p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-secondary">
<i class="mdi mdi-heart"></i>
</div>
<p class="notify-details">Carlos Crouch liked
<b>Admin</b>
<small class="text-muted">13 days ago</small>
</p>
</a>
</div>
<!-- All-->
<a href="javascript:void(0);" class="dropdown-item text-center text-primary notify-item notify-all">
View all
<i class="fi-arrow-right"></i>
</a>
</div>
</li>
<li class="dropdown notification-list">
<a class="nav-link dropdown-toggle nav-user mr-0 waves-effect waves-light" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<img src="assets/images/users/avatar-1.jpg" alt="user-image" class="rounded-circle">
<span class="pro-user-name ml-1">
Maxine K <i class="mdi mdi-chevron-down"></i>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right profile-dropdown ">
<!-- item-->
<div class="dropdown-header noti-title">
<h6 class="text-overflow m-0">Welcome !</h6>
</div>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="fe-user"></i>
<span>Profile</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="fe-settings"></i>
<span>Settings</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="fe-lock"></i>
<span>Lock Screen</span>
</a>
<div class="dropdown-divider"></div>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="fe-log-out"></i>
<span>Logout</span>
</a>
</div>
</li>
<li class="dropdown notification-list">
<a href="javascript:void(0);" class="nav-link right-bar-toggle waves-effect waves-light">
<i class="fe-settings noti-icon"></i>
</a>
</li>
</ul>
<!-- LOGO -->
<div class="logo-box">
<a href="index.html" class="logo text-center">
<span class="logo-lg">
<img src="assets/images/logo-light.png" alt="" height="25">
<!-- <span class="logo-lg-text-light">UBold</span> -->
</span>
<span class="logo-sm">
<!-- <span class="logo-sm-text-dark">U</span> -->
<img src="assets/images/logo-sm.png" alt="" height="28">
</span>
</a>
</div>
<ul class="list-unstyled topnav-menu topnav-menu-left m-0">
<li>
<button class="button-menu-mobile waves-effect waves-light">
<i class="fe-menu"></i>
</button>
</li>
<li class="d-none d-sm-block">
<form class="app-search">
<div class="app-search-box">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search...">
<div class="input-group-append">
<button class="btn" type="submit">
<i class="fe-search"></i>
</button>
</div>
</div>
</div>
</form>
</li>
</ul>
</div>
<!-- end Topbar -->
<!-- ========== Left Sidebar Start ========== -->
<div class="left-side-menu">
<div class="slimscroll-menu">
<!--- Sidemenu -->
<div id="sidebar-menu">
<ul class="metismenu" id="side-menu">
<li class="menu-title">Navigation</li>
<li>
<a href="javascript: void(0);">
<i class="fe-airplay"></i>
<span class="badge badge-success badge-pill float-right">2</span>
<span> Dashboard </span>
</a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="index.html">Dashboard 1</a></li>
<li> <a href="dashboard-2.html">Dashboard 2</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);">
<i class="fe-sidebar"></i>
<span> Layouts </span>
<span class="menu-arrow"></span>
</a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="layouts-horizontal.html">Horizontal</a></li>
<li><a href="layouts-menucollapsed.html">Menu Collapsed</a></li>
<li><a href="layouts-light-sidebar.html">Light Sidebar</a></li>
<li><a href="layouts-small-sidebar.html">Small Sidebar</a></li>
<li><a href="layouts-boxed.html">Boxed</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);">
<i class="fe-file-plus"></i>
<span> Pages </span>
<span class="menu-arrow"></span>
</a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="page-starter.html">Starter Page</a></li>
<li><a href="page-login.html">Login</a></li>
<li><a href="page-register.html">Register</a></li>
<li><a href="page-logout.html">Logout</a></li>
<li><a href="page-recoverpw.html">Recover Password</a></li>
<li><a href="page-lock-screen.html">Lock Screen</a></li>
<li><a href="page-confirm-mail.html">Confirm Mail</a></li>
<li><a href="page-404.html">Error 404</a></li>
<li><a href="page-404-alt.html">Error 404-alt</a></li>
<li><a href="page-500.html">Error 500</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);">
<i class="fe-plus-square"></i>
<span> Extra Pages </span>
<span class="menu-arrow"></span>
</a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="extras-about.html">About Us</a></li>
<li><a href="extras-contact.html">Contact</a></li>
<li><a href="extras-companies.html">Companies</a></li>
<li><a href="extras-members.html">Members</a></li>
<li><a href="extras-members-2.html">Members 2</a></li>
<li><a href="extras-timeline.html">Timeline</a></li>
<li><a href="extras-invoice.html">Invoice</a></li>
<li><a href="extras-maintenance.html">Maintenance</a></li>
<li><a href="extras-coming-soon.html">Coming Soon</a></li>
<li><a href="extras-faq.html">FAQ</a></li>
<li><a href="extras-pricing.html">Pricing</a></li>
<li><a href="extras-profile.html">Profile</a></li>
<li><a href="extras-email-template.html">Email Templates</a></li>
<li><a href="extras-search-result.html">Search Results</a></li>
<li><a href="extras-sitemap.html">Site Map</a></li>
</ul>
</li>
<li class="menu-title">Apps</li>
<li>
<a href="javascript: void(0);">
<i class="fe-mail"></i>
<span> Email </span>
<span class="menu-arrow"></span>
</a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="email-inbox.html">Inbox</a></li>
<li><a href="email-read.html">Read Email</a></li>
<li><a href="email-compose.html">Compose Email</a></li>
</ul>
</li>
<li>
<a href="calendar.html">
<i class="fe-calendar"></i>
<span> Calendar </span>
</a>
</li>
<li>
<a href="tickets.html">
<i class="fe-life-buoy"></i>
<span> Tickets </span>
<span class="badge badge-danger badge-pill float-right">New</span>
</a>
</li>
<li>
<a href="taskboard.html">
<i class="fe-file-text"></i>
<span> Task Board </span>
</a>
</li>
<li>
<a href="todo.html">
<i class="fe-layers"></i>
<span> Todo </span>
</a>
</li>
<li class="menu-title">Components</li>
<li>
<a href="javascript: void(0);">
<i class="fe-target"></i>
<span> Admin UI </span>
<span class="menu-arrow"></span>
</a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="admin-grid.html">Grid</a></li>
<li><a href="admin-sweet-alert.html">Sweet Alert</a></li>
<li><a href="admin-tiles.html">Tiles Box</a></li>
<li><a href="admin-nestable.html">Nestable List</a></li>
<li><a href="admin-rangeslider.html">Range Slider</a></li>
<li><a href="admin-ratings.html">Ratings</a></li>
<li><a href="admin-filemanager.html">File Manager</a></li>
<li><a href="admin-lightbox.html">Lightbox</a></li>
<li><a href="admin-scrollbar.html">Scroll bar</a></li>
<li><a href="admin-slider.html">Slider</a></li>
<li><a href="admin-treeview.html">Treeview</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);">
<i class="fe-briefcase"></i>
<span> UI Kit </span>
<span class="menu-arrow"></span>
</a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-cards.html">Cards</a></li>
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li>
<li><a href="ui-spinners.html">Spinners</a></li>
<li><a href="ui-ribbons.html">Ribbons</a></li>
<li><a href="ui-portlets.html">Portlets</a></li>
<li><a href="ui-tabs.html">Tabs</a></li>
<li><a href="ui-progressbars.html">Progress Bars</a></li>
<li><a href="ui-notifications.html">Notification</a></li>
<li><a href="ui-carousel.html">Carousel</a></li>
<li><a href="ui-video.html">Video</a></li>
<li><a href="ui-tooltips-popovers.html">Tooltips &amp; Popovers</a></li>
<li><a href="ui-images.html">Images</a></li>
<li><a href="ui-bootstrap.html">Bootstrap UI</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);">
<i class="fe-box"></i>
<span> Icons </span>
<span class="menu-arrow"></span>
</a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="icons-colored.html">Colored Icons</a></li>
<li><a href="icons-materialdesign.html">Material Design</a></li>
<li><a href="icons-dripicons.html">Dripicons</a></li>
<li><a href="icons-fontawesome.html">Font awesome</a></li>
<li><a href="icons-feather.html">Feather Icons</a></li>
<li><a href="icons-simple-line.html">Simple line Icons</a></li>
<li><a href="icons-flags.html">Flag Icons</a></li>
<li><a href="icons-file.html">File Icons</a></li>
<li><a href="icons-pe7.html">PE7 Icons</a></li>
<li><a href="icons-typicons.html">Typicons</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);">
<i class="fe-bar-chart-2"></i>
<span> Graphs </span>
<span class="menu-arrow"></span>
</a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="chart-flot.html">Flot Chart</a></li>
<li><a href="chart-morris.html">Morris Chart</a></li>
<li><a href="chart-google.html">Google Chart</a></li>
<li><a href="chart-echart.html">Echarts</a></li>
<li><a href="chart-chartist.html">Chartist Charts</a></li>
<li><a href="chart-chartjs.html">Chartjs Chart</a></li>
<li><a href="chart-c3.html">C3 Chart</a></li>
<li><a href="chart-sparkline.html">Sparkline Chart</a></li>
<li><a href="chart-knob.html">Jquery Knob</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);">
<i class="fe-disc"></i>
<span class="badge badge-warning badge-pill float-right">12</span>
<span> Forms </span>
</a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="form-elements.html">Form Elements</a></li>
<li><a href="form-advanced.html">Form Advanced</a></li>
<li><a href="form-layouts.html">Form Layouts</a></li>
<li><a href="form-validation.html">Form Validation</a></li>
<li><a href="form-pickers.html">Form Pickers</a></li>
<li><a href="form-wizard.html">Form Wizard</a></li>
<li><a href="form-mask.html">Form Masks</a></li>
<li><a href="form-summernote.html">Summernote</a></li>
<li><a href="form-quilljs.html">Quilljs Editor</a></li>
<li><a href="form-typeahead.html">Typeahead</a></li>
<li><a href="form-x-editable.html">X Editable</a></li>
<li><a href="form-uploads.html">Multiple File Upload</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);">
<i class="fe-layout"></i>
<span> Tables </span>
<span class="menu-arrow"></span>
</a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="tables-basic.html">Basic Tables</a></li>
<li><a href="tables-layouts.html">Tables Layouts</a></li>
<li><a href="tables-datatable.html">Data Tables</a></li>
<li><a href="tables-foo-tables.html">Foo Tables</a></li>
<li><a href="tables-responsive.html">Responsive Table</a></li>
<li><a href="tables-tablesaw.html">Tablesaw Tables</a></li>
<li><a href="tables-editable.html">Editable Tables</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);">
<i class="fe-map"></i>
<span> Maps </span>
<span class="menu-arrow"></span>
</a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="maps-google.html">Google Maps</a></li>
<li><a href="maps-vector.html">Vector Maps</a></li>
<li><a href="maps-mapael.html">Mapael Maps</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);">
<i class="fe-folder-plus"></i>
<span> Multi Level </span>
<span class="menu-arrow"></span>
</a>
<ul class="nav-second-level nav" aria-expanded="false">
<li>
<a href="javascript: void(0);">Level 1.1</a>
</li>
<li>
<a href="javascript: void(0);" aria-expanded="false">Level 1.2
<span class="menu-arrow"></span>
</a>
<ul class="nav-third-level nav" aria-expanded="false">
<li>
<a href="javascript: void(0);">Level 2.1</a>
</li>
<li>
<a href="javascript: void(0);">Level 2.2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- End Sidebar -->
<div class="clearfix"></div>
</div>
<!-- Sidebar -left -->
</div>
<!-- Left Sidebar End -->
<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->
<div class="content-page">
<div class="content">
<!-- Start Content-->
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box">
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="javascript: void(0);">Adminox</a></li>
<li class="breadcrumb-item"><a href="javascript: void(0);">Email</a></li>
<li class="breadcrumb-item active">Inbox</li>
</ol>
</div>
<h4 class="page-title">Inbox</h4>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<!-- Right Sidebar -->
<div class="col-lg-12">
<div class="card-box">
<!-- Left sidebar -->
<div class="inbox-leftbar">
<a href="email-compose.html" class="btn btn-danger btn-block waves-effect waves-light">Compose</a>
<div class="mail-list mt-3">
<a href="#" class="list-group-item border-0 text-danger"><i class="mdi mdi-inbox font-18 align-middle mr-2"></i>Inbox<span class="badge badge-danger float-right ml-2 mt-1">8</span></a>
<a href="#" class="list-group-item border-0"><i class="mdi mdi-star font-18 align-middle mr-2"></i>Starred</a>
<a href="#" class="list-group-item border-0"><i class="mdi mdi-file-document-box font-18 align-middle mr-2"></i>Draft<span class="badge badge-info float-right ml-2 mt-1">32</span></a>
<a href="#" class="list-group-item border-0"><i class="mdi mdi-send font-18 align-middle mr-2"></i>Sent Mail</a>
<a href="#" class="list-group-item border-0"><i class="mdi mdi-delete font-18 align-middle mr-2"></i>Trash</a>
</div>
<h5 class="mt-4">Labels</h5>
<div class="list-group b-0 mail-list mt-4">
<a href="#" class="list-group-item border-0"><span class="fa fa-circle text-info mr-2"></span>Web App</a>
<a href="#" class="list-group-item border-0"><span class="fa fa-circle text-warning mr-2"></span>Recharge</a>
<a href="#" class="list-group-item border-0"><span class="fa fa-circle text-purple mr-2"></span>Wallet Balance</a>
<a href="#" class="list-group-item border-0"><span class="fa fa-circle text-pink mr-2"></span>Friends</a>
<a href="#" class="list-group-item border-0"><span class="fa fa-circle text-success mr-2"></span>Family</a>
</div>
</div>
<!-- End Left sidebar -->
<div class="inbox-rightbar">
<div class="" role="toolbar">
<div class="btn-group mr-1">
<button type="button" class="btn btn-sm btn-light waves-effect"><i class="mdi mdi-archive font-18 vertical-middle"></i></button>
<button type="button" class="btn btn-sm btn-light waves-effect"><i class="mdi mdi-alert-octagon font-18 vertical-middle"></i></button>
<button type="button" class="btn btn-sm btn-light waves-effect"><i class="mdi mdi-delete-variant font-18 vertical-middle"></i></button>
</div>
<div class="btn-group mr-1">
<button type="button" class="btn btn-sm btn-light dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-folder font-18 align-middle"></i>
<i class="mdi mdi-chevron-down"></i>
</button>
<div class="dropdown-menu">
<span class="dropdown-header">Move to</span>
<a class="dropdown-item" href="javascript: void(0);">Social</a>
<a class="dropdown-item" href="javascript: void(0);">Promotions</a>
<a class="dropdown-item" href="javascript: void(0);">Updates</a>
<a class="dropdown-item" href="javascript: void(0);">Forums</a>
</div>
</div>
<div class="btn-group mr-1">
<button type="button" class="btn btn-sm btn-light dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-label font-18 align-middle"></i>
<i class="mdi mdi-chevron-down"></i>
</button>
<div class="dropdown-menu">
<span class="dropdown-header">Label as:</span>
<a class="dropdown-item" href="javascript: void(0);">Updates</a>
<a class="dropdown-item" href="javascript: void(0);">Social</a>
<a class="dropdown-item" href="javascript: void(0);">Promotions</a>
<a class="dropdown-item" href="javascript: void(0);">Forums</a>
</div>
</div>
<div class="btn-group mr-1">
<button type="button" class="btn btn-sm btn-light dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-horizontal font-18 align-middle mr-1"></i> More <i class="mdi mdi-chevron-down"></i>
</button>
<div class="dropdown-menu">
<span class="dropdown-header">More Option :</span>
<a class="dropdown-item" href="javascript: void(0);">Mark as Unread</a>
<a class="dropdown-item" href="javascript: void(0);">Add to Tasks</a>
<a class="dropdown-item" href="javascript: void(0);">Add Star</a>
<a class="dropdown-item" href="javascript: void(0);">Mute</a>
</div>
</div>
</div>
<div class="">
<div class="mt-3">
<div class="">
<ul class="message-list">
<li class="unread">
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk1">
<label for="chk1" class="toggle"></label>
</div>
<a href="#" class="title">Lucas Kriebel (via Twitter)</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Lucas Kriebel (@LucasKriebel) has sent
you a direct message on Twitter! &nbsp;&nbsp;
<span class="teaser">@LucasKriebel - Very cool :) Nicklas, You have a new direct message.</span>
</a>
<div class="date">11:49 am</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk3">
<label for="chk3" class="toggle"></label>
</div>
<a href="#" class="title">Randy, me (5)</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Last pic over my village &nbsp;&nbsp;
<span class="teaser">Yeah i'd like that! Do you remember the video you showed me of your train ride between Colombo and Kandy? The one with the mountain view? I would love to see that one again!</span>
</a>
<div class="date">5:01 am</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk4">
<label for="chk4" class="toggle"></label>
</div>
<a href="#" class="title">Andrew Zimmer</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Mochila Beta: Subscription Confirmed
&nbsp;&nbsp; <span class="teaser">You've been confirmed! Welcome to the ruling class of the inbox. For your records, here is a copy of the information you submitted to us...</span>
</a>
<div class="date">Mar 8</div>
</div>
</li>
<li class="unread">
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk5">
<label for="chk5" class="toggle"></label>
</div>
<a href="#" class="title">Infinity HR</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Sveriges Hetaste sommarjobb &nbsp;&nbsp;
<span class="teaser">Hej Nicklas Sandell! Vi vill bjuda in dig till "First tour 2014", ett rekryteringsevent som erbjuder jobb på 16 semesterorter iSverige.</span>
</a>
<div class="date">Mar 8</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk6">
<label for="chk6" class="toggle"></label>
</div>
<a href="#" class="title">Web Support Dennis</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Re: New mail settings &nbsp;&nbsp;
<span class="teaser">Will you answer him asap?</span>
</a>
<div class="date">Mar 7</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk7">
<label for="chk7" class="toggle"></label>
</div>
<a href="#" class="title">me, Peter (2)</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Off on Thursday &nbsp;&nbsp;
<span class="teaser">Eff that place, you might as well stay here with us instead! Sent from my iPhone 4 &gt; 4 mar 2014 at 5:55 pm</span>
</a>
<div class="date">Mar 4</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk8">
<label for="chk8" class="toggle"></label>
</div>
<a href="#" class="title">Medium</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">This Week's Top Stories &nbsp;&nbsp;
<span class="teaser">Our top pick for you on Medium this week The Man Who Destroyed Americas Ego</span>
</a>
<div class="date">Feb 28</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk9">
<label for="chk9" class="toggle"></label>
</div>
<a href="#" class="title">Death to Stock</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Montly High-Res Photos &nbsp;&nbsp;
<span class="teaser">To create this month's pack, we hosted a party with local musician Jared Mahone here in Columbus, Ohio.</span>
</a>
<div class="date">Feb 28</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk10">
<label for="chk10" class="toggle"></label>
</div>
<a href="#" class="title">Revibe</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Weekend on Revibe &nbsp;&nbsp;
<span class="teaser">Today's Friday and we thought maybe you want some music inspiration for the weekend. Here are some trending tracks and playlists we think you should give a listen!</span>
</a>
<div class="date">Feb 27</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk11">
<label for="chk11" class="toggle"></label>
</div>
<a href="#" class="title">Erik, me (5)</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Regarding our meeting &nbsp;&nbsp;
<span class="teaser">That's great, see you on Thursday!</span>
</a>
<div class="date">Feb 24</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk12">
<label for="chk12" class="toggle"></label>
</div>
<a href="#" class="title">KanbanFlow</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Task assigned: Clone ARP's website
&nbsp;&nbsp; <span class="teaser">You have been assigned a task by Alex@Work on the board Web.</span>
</a>
<div class="date">Feb 24</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk13">
<label for="chk13" class="toggle"></label>
</div>
<a href="#" class="title">Tobias Berggren</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Let's go fishing! &nbsp;&nbsp;
<span class="teaser">Hey, You wanna join me and Fred at the lake tomorrow? It'll be awesome.</span>
</a>
<div class="date">Feb 23</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk14">
<label for="chk14" class="toggle"></label>
</div>
<a href="#" class="title">Charukaw, me (7)</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Hey man &nbsp;&nbsp; <span class="teaser">Nah man sorry i don't. Should i get it?</span>
</a>
<div class="date">Feb 23</div>
</div>
</li>
<li class="unread">
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk15">
<label for="chk15" class="toggle"></label>
</div>
<a href="#" class="title">me, Peter (5)</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Home again! &nbsp;&nbsp; <span class="teaser">That's just perfect! See you tomorrow.</span>
</a>
<div class="date">Feb 21</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk16">
<label for="chk16" class="toggle"></label>
</div>
<a href="#" class="title">Stack Exchange</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">1 new items in your Stackexchange inbox
&nbsp;&nbsp; <span class="teaser">The following items were added to your Stack Exchange global inbox since you last checked it.</span>
</a>
<div class="date">Feb 21</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk17">
<label for="chk17" class="toggle"></label>
</div>
<a href="#" class="title">Google Drive Team</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">You can now use your storage in Google
Drive &nbsp;&nbsp; <span class="teaser">Hey Nicklas Sandell! Thank you for purchasing extra storage space in Google Drive.</span>
</a>
<div class="date">Feb 20</div>
</div>
</li>
<li class="unread">
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk18">
<label for="chk18" class="toggle"></label>
</div>
<a href="#" class="title">me, Susanna (11)</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Train/Bus &nbsp;&nbsp; <span class="teaser">Yes ok, great! I'm not stuck in Stockholm anymore, we're making progress.</span>
</a>
<div class="date">Feb 19</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk19">
<label for="chk19" class="toggle"></label>
</div>
<a href="#" class="title">Peter, me (3)</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Hello &nbsp;&nbsp; <span class="teaser">Trip home from Colombo has been arranged, then Jenna will come get me from Stockholm. :)</span>
</a>
<div class="date">Mar. 6</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk20">
<label for="chk20" class="toggle"></label>
</div>
<a href="#" class="title">me, Susanna (7)</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Since you asked... and i'm
inconceivably bored at the train station &nbsp;&nbsp;
<span class="teaser">Alright thanks. I'll have to re-book that somehow, i'll get back to you.</span>
</a>
<div class="date">Mar. 6</div>
</div>
</li>
</ul>
</div>
</div> <!-- card body -->
</div> <!-- card -->
<div class="row">
<div class="col-7">
Showing 1 - 20 of 289
</div>
<div class="col-5">
<div class="btn-group float-right">
<button type="button" class="btn btn-primary waves-light waves-effect btn-sm"><i class="fa fa-chevron-left"></i></button>
<button type="button" class="btn btn-primary waves-effect waves-light btn-sm"><i class="fa fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div> <!-- end Col -->
</div>
</div> <!-- end container-fluid -->
</div> <!-- end content -->
<!-- Footer Start -->
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
2017 - 2019 &copy; Adminox theme by <a href="">Coderthemes</a>
</div>
</div>
</div>
</footer>
<!-- end Footer -->
</div>
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->
</div>
<!-- END wrapper -->
<!-- Right Sidebar -->
<div class="right-bar">
<div class="rightbar-title">
<a href="javascript:void(0);" class="right-bar-toggle float-right">
<i class="mdi mdi-close"></i>
</a>
<h4 class="font-16 m-0 text-white">Theme Customizer</h4>
</div>
<div class="slimscroll-menu">
<div class="p-3">
<div class="alert alert-warning" role="alert">
<strong>Customize </strong> the overall color scheme, layout, etc.
</div>
<div class="mb-2">
<img src="assets/images/layouts/light.png" class="img-fluid img-thumbnail" alt="">
</div>
<div class="custom-control custom-switch mb-3">
<input type="checkbox" class="custom-control-input theme-choice" id="light-mode-switch" checked />
<label class="custom-control-label" for="light-mode-switch">Light Mode</label>
</div>
<div class="mb-2">
<img src="assets/images/layouts/dark.png" class="img-fluid img-thumbnail" alt="">
</div>
<div class="custom-control custom-switch mb-3">
<input type="checkbox" class="custom-control-input theme-choice" id="dark-mode-switch" data-bsStyle="assets/css/bootstrap-dark.min.css"
data-appStyle="assets/css/app-dark.min.css" />
<label class="custom-control-label" for="dark-mode-switch">Dark Mode</label>
</div>
<div class="mb-2">
<img src="assets/images/layouts/rtl.png" class="img-fluid img-thumbnail" alt="">
</div>
<div class="custom-control custom-switch mb-3">
<input type="checkbox" class="custom-control-input theme-choice" id="rtl-mode-switch" data-appStyle="assets/css/app-rtl.min.css" />
<label class="custom-control-label" for="rtl-mode-switch">RTL Mode</label>
</div>
<div class="mb-2">
<img src="assets/images/layouts/dark-rtl.png" class="img-fluid img-thumbnail" alt="">
</div>
<div class="custom-control custom-switch mb-5">
<input type="checkbox" class="custom-control-input theme-choice" id="dark-rtl-mode-switch" data-bsStyle="assets/css/bootstrap-dark.min.css"
data-appStyle="assets/css/app-dark-rtl.min.css" />
<label class="custom-control-label" for="dark-rtl-mode-switch">Dark RTL Mode</label>
</div>
<a href="https://1.envato.market/y2YAD" class="btn btn-danger btn-block mt-3" target="_blank"><i class="mdi mdi-download mr-1"></i> Download Now</a>
</div>
</div> <!-- end slimscroll-menu-->
</div>
<!-- /Right-bar -->
<!-- Right bar overlay-->
<div class="rightbar-overlay"></div>
<a href="javascript:void(0);" class="right-bar-toggle demos-show-btn">
<i class="mdi mdi-settings-outline mdi-spin"></i> &nbsp;Choose Demos
</a>
<!-- Vendor js -->
<script src="assets/js/vendor.min.js"></script>
<!-- App js -->
<script src="assets/js/app.min.js"></script>
</body>
</html>