Files
bigscreen/3/vertical/email-inbox.html
zhangxiaohui 77bec5d078 update
2021-04-14 08:39:43 +08:00

1096 lines
70 KiB
HTML
Raw 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" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<title>Stexo - Responsive Admin & Dashboard Template | Themesdesign</title>
<meta content="Responsive admin theme build on top of Bootstrap 4" name="description" />
<meta content="Themesdesign" name="author" />
<link rel="shortcut icon" href="assets/images/favicon.ico">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/metismenu.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/icons.css" rel="stylesheet" type="text/css">
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Begin page -->
<div id="wrapper">
<!-- Top Bar Start -->
<div class="topbar">
<!-- LOGO -->
<div class="topbar-left">
<a href="index.html" class="logo">
<span class="logo-light">
<i class="mdi mdi-camera-control"></i> Stexo
</span>
<span class="logo-sm">
<i class="mdi mdi-camera-control"></i>
</span>
</a>
</div>
<nav class="navbar-custom">
<ul class="navbar-right list-inline float-right mb-0">
<!-- language-->
<li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
<a class="nav-link dropdown-toggle arrow-none waves-effect" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<img src="assets/images/flags/us_flag.jpg" class="mr-2" height="12" alt="" /> English <span class="mdi mdi-chevron-down"></span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-animated language-switch">
<a class="dropdown-item" href="#"><img src="assets/images/flags/french_flag.jpg" alt="" height="16" /><span> French </span></a>
<a class="dropdown-item" href="#"><img src="assets/images/flags/spain_flag.jpg" alt="" height="16" /><span> Spanish </span></a>
<a class="dropdown-item" href="#"><img src="assets/images/flags/russia_flag.jpg" alt="" height="16" /><span> Russian </span></a>
<a class="dropdown-item" href="#"><img src="assets/images/flags/germany_flag.jpg" alt="" height="16" /><span> German </span></a>
<a class="dropdown-item" href="#"><img src="assets/images/flags/italy_flag.jpg" alt="" height="16" /><span> Italian </span></a>
</div>
</li>
<!-- full screen -->
<li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
<a class="nav-link waves-effect" href="#" id="btn-fullscreen">
<i class="mdi mdi-arrow-expand-all noti-icon"></i>
</a>
</li>
<!-- notification -->
<li class="dropdown notification-list list-inline-item">
<a class="nav-link dropdown-toggle arrow-none waves-effect" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<i class="mdi mdi-bell-outline noti-icon"></i>
<span class="badge badge-pill badge-danger noti-icon-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-animated dropdown-menu-lg px-1">
<!-- item-->
<h6 class="dropdown-item-text">
Notifications
</h6>
<div class="slimscroll notification-item-list">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item active">
<div class="notify-icon bg-success"><i class="mdi mdi-cart-outline"></i></div>
<p class="notify-details"><b>Your order is placed</b><span class="text-muted">Dummy text of the printing and typesetting industry.</span></p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-danger"><i class="mdi mdi-message-text-outline"></i></div>
<p class="notify-details"><b>New Message received</b><span class="text-muted">You have 87 unread messages</span></p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-info"><i class="mdi mdi-filter-outline"></i></div>
<p class="notify-details"><b>Your item is shipped</b><span class="text-muted">It is a long established fact that a reader will</span></p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-success"><i class="mdi mdi-message-text-outline"></i></div>
<p class="notify-details"><b>New Message received</b><span class="text-muted">You have 87 unread messages</span></p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-warning"><i class="mdi mdi-cart-outline"></i></div>
<p class="notify-details"><b>Your order is placed</b><span class="text-muted">Dummy text of the printing and typesetting industry.</span></p>
</a>
</div>
<!-- All-->
<a href="javascript:void(0);" class="dropdown-item text-center notify-all text-primary">
View all <i class="fi-arrow-right"></i>
</a>
</div>
</li>
<li class="dropdown notification-list list-inline-item">
<div class="dropdown notification-list nav-pro-img">
<a class="dropdown-toggle nav-link arrow-none nav-user" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<img src="assets/images/users/user-4.jpg" alt="user" class="rounded-circle">
</a>
<div class="dropdown-menu dropdown-menu-right profile-dropdown ">
<!-- item-->
<a class="dropdown-item" href="#"><i class="mdi mdi-account-circle"></i> Profile</a>
<a class="dropdown-item" href="#"><i class="mdi mdi-wallet"></i> My Wallet</a>
<a class="dropdown-item d-block" href="#"><span class="badge badge-success float-right">11</span><i class="mdi mdi-settings"></i> Settings</a>
<a class="dropdown-item" href="#"><i class="mdi mdi-lock-open-outline"></i> Lock screen</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger" href="#"><i class="mdi mdi-power text-danger"></i> Logout</a>
</div>
</div>
</li>
</ul>
<ul class="list-inline menu-left mb-0">
<li class="float-left">
<button class="button-menu-mobile open-left waves-effect">
<i class="mdi mdi-menu"></i>
</button>
</li>
<li class="d-none d-md-inline-block">
<form role="search" class="app-search">
<div class="form-group mb-0">
<input type="text" class="form-control" placeholder="Search..">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
</form>
</li>
</ul>
</nav>
</div>
<!-- Top Bar End -->
<!-- ========== Left Sidebar Start ========== -->
<div class="left side-menu">
<div class="slimscroll-menu" id="remove-scroll">
<!--- Sidemenu -->
<div id="sidebar-menu">
<!-- Left Menu Start -->
<ul class="metismenu" id="side-menu">
<li class="menu-title">Menu</li>
<li>
<a href="index.html" class="waves-effect">
<i class="icon-accelerator"></i><span class="badge badge-success badge-pill float-right">9+</span> <span> Dashboard </span>
</a>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect"><i class="icon-mail-open"></i><span> Email <span class="float-right menu-arrow"><i class="mdi mdi-chevron-right"></i></span> </span></a>
<ul class="submenu">
<li><a href="email-inbox.html">Inbox</a></li>
<li><a href="email-read.html">Email Read</a></li>
<li><a href="email-compose.html">Email Compose</a></li>
</ul>
</li>
<li>
<a href="calendar.html" class="waves-effect"><i class="icon-calendar"></i><span> Calendar </span></a>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect"><i class="icon-paper-sheet"></i><span> Pages <span class="float-right menu-arrow"><i class="mdi mdi-chevron-right"></i></span> </span></a>
<ul class="submenu">
<li><a href="pages-pricing.html">Pricing</a></li>
<li><a href="pages-invoice.html">Invoice</a></li>
<li><a href="pages-timeline.html">Timeline</a></li>
<li><a href="pages-faqs.html">FAQs</a></li>
<li><a href="pages-maintenance.html">Maintenance</a></li>
<li><a href="pages-comingsoon.html">Coming Soon</a></li>
<li><a href="pages-starter.html">Starter Page</a></li>
<li><a href="pages-login.html">Login</a></li>
<li><a href="pages-register.html">Register</a></li>
<li><a href="pages-recoverpw.html">Recover Password</a></li>
<li><a href="pages-lock-screen.html">Lock Screen</a></li>
<li><a href="pages-404.html">Error 404</a></li>
<li><a href="pages-500.html">Error 500</a></li>
</ul>
</li>
<li class="menu-title">Components</li>
<li>
<a href="javascript:void(0);" class="waves-effect"><i class="icon-pencil-ruler"></i> <span> UI Elements <span class="float-right menu-arrow"><i class="mdi mdi-chevron-right"></i></span> </span> </a>
<ul class="submenu">
<li><a href="ui-alerts.html">Alerts</a></li>
<li><a href="ui-badge.html">Badge</a></li>
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-cards.html">Cards</a></li>
<li><a href="ui-dropdowns.html">Dropdowns</a></li>
<li><a href="ui-navs.html">Navs</a></li>
<li><a href="ui-tabs-accordions.html">Tabs &amp; Accordions</a></li>
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-images.html">Images</a></li>
<li><a href="ui-progressbars.html">Progress Bars</a></li>
<li><a href="ui-pagination.html">Pagination</a></li>
<li><a href="ui-popover-tooltips.html">Popover & Tooltips</a></li>
<li><a href="ui-spinner.html">Spinner</a></li>
<li><a href="ui-carousel.html">Carousel</a></li>
<li><a href="ui-video.html">Video</a></li>
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-grid.html">Grid</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect"><i class="icon-diamond"></i> <span> Advanced UI <span class="float-right menu-arrow"><i class="mdi mdi-chevron-right"></i></span> </span> </a>
<ul class="submenu">
<li><a href="advanced-alertify.html">Alertify</a></li>
<li><a href="advanced-rating.html">Rating</a></li>
<li><a href="advanced-nestable.html">Nestable</a></li>
<li><a href="advanced-rangeslider.html">Range Slider</a></li>
<li><a href="advanced-sweet-alert.html">Sweet-Alert</a></li>
<li><a href="advanced-lightbox.html">Lightbox</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect"><i class="icon-todolist-check"></i><span> Forms <span class="badge badge-pill badge-danger float-right">8</span> </span></a>
<ul class="submenu">
<li><a href="form-elements.html">Form Elements</a></li>
<li><a href="form-validation.html">Form Validation</a></li>
<li><a href="form-advanced.html">Form Advanced</a></li>
<li><a href="form-editors.html">Form Editors</a></li>
<li><a href="form-uploads.html">Form File Upload</a></li>
<li><a href="form-mask.html">Form Mask</a></li>
<li><a href="form-summernote.html">Summernote</a></li>
<li><a href="form-xeditable.html">Form Xeditable</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect"><i class="icon-graph"></i><span> Charts <span class="float-right menu-arrow"><i class="mdi mdi-chevron-right"></i></span> </span></a>
<ul class="submenu">
<li><a href="charts-morris.html">Morris Chart</a></li>
<li><a href="charts-chartist.html">Chartist Chart</a></li>
<li><a href="charts-chartjs.html">Chartjs Chart</a></li>
<li><a href="charts-flot.html">Flot Chart</a></li>
<li><a href="charts-c3.html">C3 Chart</a></li>
<li><a href="charts-other.html">Jquery Knob Chart</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect"><i class="icon-spread"></i><span> Tables <span class="float-right menu-arrow"><i class="mdi mdi-chevron-right"></i></span> </span></a>
<ul class="submenu">
<li><a href="tables-basic.html">Basic Tables</a></li>
<li><a href="tables-datatable.html">Data Table</a></li>
<li><a href="tables-responsive.html">Responsive Table</a></li>
<li><a href="tables-editable.html">Editable Table</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect"><i class="icon-coffee"></i> <span> Icons <span class="float-right menu-arrow"><i class="mdi mdi-chevron-right"></i></span></span> </a>
<ul class="submenu">
<li><a href="icons-material.html">Material Design</a></li>
<li><a href="icons-fontawesome.html">Font Awesome</a></li>
<li><a href="icons-outline.html">Outline Icons</a></li>
<li><a href="icons-themify.html">Themify Icons</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect"><i class="icon-map"></i><span> Maps <span class="float-right menu-arrow"><i class="mdi mdi-chevron-right"></i></span> </span></a>
<ul class="submenu">
<li><a href="maps-google.html"> Google Map</a></li>
<li><a href="maps-vector.html"> Vector Map</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect"><i class="icon-share"></i><span> Multi Level <span class="float-right menu-arrow"><i class="mdi mdi-chevron-right"></i></span> </span></a>
<ul class="submenu">
<li><a href="javascript:void(0);"> Menu 1</a></li>
<li>
<a href="javascript:void(0);">Menu 2 <span class="float-right menu-arrow"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="submenu">
<li><a href="javascript:void(0);">Menu 2.1</a></li>
<li><a href="javascript:void(0);">Menu 2.1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- Sidebar -->
<div class="clearfix"></div>
</div>
<!-- Sidebar -left -->
</div>
<!-- Left Sidebar End -->
<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="content-page">
<!-- Start content -->
<div class="content">
<div class="container-fluid">
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-sm-6">
<h4 class="page-title">Inbox</h4>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-right">
<li class="breadcrumb-item"><a href="javascript:void(0);">Stexo</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0);">Email</a></li>
<li class="breadcrumb-item active">Inbox</li>
</ol>
</div>
</div>
<!-- end row -->
</div>
<!-- end page-title -->
<div class="row">
<div class="col-12">
<!-- Left sidebar -->
<div class="email-leftbar card">
<a href="email-compose.html" class="btn btn-danger rounded btn-custom btn-block waves-effect waves-light">Compose</a>
<h6 class="m-t-30">My Email</h6>
<div class="mail-list m-t-10">
<a href="#" class="active"> <span class="float-right">89</span> <i class="ti-archive mr-2"></i> Inbox </a>
<a href="#"><span class="float-right">24</span><i class="ti-location-arrow mr-2"></i> Sent</a>
<a href="#"><span class="float-right">48</span><i class="ti-star mr-2"></i> Starred</a>
<a href="#"><span class="float-right">72</span><i class="ti-pencil mr-2"></i> Draft</a>
<a href="#"><span class="float-right">16</span><i class="ti-alert mr-2"></i> Spam</a>
<a href="#"><span class="float-right">02</span><i class="ti-trash mr-2"></i> Deleted</a>
</div>
<h6 class="m-t-20">Filter by Labels</h6>
<div class="mail-list m-t-10">
<a href="#"><span class="mdi mdi-label-outline text-danger mr-2"></span>Freelance</a>
<a href="#"><span class="mdi mdi-label-outline text-info mr-2"></span>Social</a>
<a href="#"><span class="mdi mdi-label-outline text-primary mr-2"></span>Friends</a>
<a href="#"><span class="mdi mdi-label-outline text-success mr-2"></span>Family</a>
</div>
</div>
<!-- End Left sidebar -->
<!-- Right Sidebar -->
<div class="email-rightbar mb-3">
<div class="card">
<div class="row p-3">
<div class="col-lg-4">
<form role="search" class="email-inbox">
<div class="form-group mb-0">
<input type="text" class="form-control rounded" placeholder="Search Your mail..">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
</form>
</div>
<div class="col-lg-8">
<div class="btn-toolbar float-lg-right" role="toolbar">
<div class="btn-group mo-mb-2">
<button type="button" class="btn btn-primary waves-light waves-effect"><i class="fa fa-inbox"></i></button>
<button type="button" class="btn btn-primary waves-light waves-effect"><i class="fa fa-exclamation-circle"></i></button>
<button type="button" class="btn btn-primary waves-light waves-effect"><i class="far fa-trash-alt"></i></button>
</div>
<div class="btn-group ml-1 mo-mb-2">
<button type="button" class="btn btn-primary waves-light waves-effect dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-folder"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Updates</a>
<a class="dropdown-item" href="#">Social</a>
<a class="dropdown-item" href="#">Team Manage</a>
</div>
</div>
<div class="btn-group ml-1 mo-mb-2">
<button type="button" class="btn btn-primary waves-light waves-effect dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-tag"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Updates</a>
<a class="dropdown-item" href="#">Social</a>
<a class="dropdown-item" href="#">Team Manage</a>
</div>
</div>
<div class="btn-group ml-1 mo-mb-2">
<button type="button" class="btn btn-primary waves-light waves-effect dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
More
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Mark as Unread</a>
<a class="dropdown-item" href="#">Mark as Important</a>
<a class="dropdown-item" href="#">Add to Tasks</a>
<a class="dropdown-item" href="#">Add Star</a>
<a class="dropdown-item" href="#">Mute</a>
</div>
</div>
</div>
</div>
</div>
<ul class="message-list">
<!-- start 1 -->
<li>
<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">
<img class="mr-3 rounded-circle float-left mt-2" src="assets/images/users/user-1.jpg" alt="" height="40">
<h6 class="mb-0">Whitney Gordon <span class="font-12"> (2)</span></h6>
<p class="text-muted mt-1 mb-0">Des 16, 2019</p>
</a>
<span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">
<h6 class="mb-0"> <span class="badge-warning badge mr-2">Freelance</span> Wolombo has been arranged, then Jenna will come get </h6>
<p class="text-muted mt-1 mb-0"> Hello <span class="teaser">Trip home from Colombo has been arranged, then Jenna will come get me from Stockholm. :)
</span></p>
</a>
<div class="date">
<a href="">
<i class="mdi mdi-link-variant mr-2 font-16 "></i> 7:25 AM
</a>
</div>
</div>
</li>
<!-- end 1 -->
<!-- start 2 -->
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk2">
<label for="chk2" class="toggle"></label>
</div>
<a href="#" class="title">
<img class="mr-3 rounded-circle float-left mt-2" src="assets/images/users/user-2.jpg" alt="" height="40">
<h6 class="mb-0">me, Susanna</h6>
<p class="text-muted mt-1 mb-0">April 23, 2019</p>
</a>
<span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">
<h6 class="mb-0">Delectus, ut aut reiciendis voluptatibus maiores alias consequatur</h6>
<p class="text-muted mt-1 mb-0"> Hello <span class="teaser">Alright thanks. I'll have to re-book that somehow, i'll get back to you.
</span></p>
</a>
<div class="date">
<a href="">
<i class="mdi mdi-link-variant mr-2 font-16 "></i> 8:12 PM
</a>
</div>
</div>
</li>
<!-- end 2 -->
<!-- start 3 -->
<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">
<img class="mr-3 rounded-circle float-left mt-2" src="assets/images/users/user-3.jpg" alt="" height="40">
<h6 class="mb-0">Web Support <span class="font-12"> (1)</span></h6>
<p class="text-muted mt-1 mb-0">Jun 02, 2019</p>
</a>
<span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">
<h6 class="mb-0">Have to re-book that somehow, i'll get back dolorem eum fugiat quo voluptas nulla</h6>
<p class="text-muted mt-1 mb-0"> Re: New mail settings <span class="teaser">Will you answer him asap?
</span></p>
</a>
<div class="date">
<a href="">
<i class="mdi mdi-link-variant mr-2 font-16 "></i> 12:46 PM
</a>
</div>
</div>
</li>
<!-- end 3 -->
<!-- start 4 -->
<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">
<img class="mr-3 rounded-circle float-left mt-2" src="assets/images/users/user-4.jpg" alt="" height="40">
<h6 class="mb-0">me, Peter <span class="font-12"> (3)</span></h6>
<p class="text-muted mt-1 mb-0">Des 24, 2019</p>
</a>
<span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">
<h6 class="mb-0"> <span class="badge-info badge mr-2">Support</span>Might as well stay here with us from my iPhone 4 4 mar 2019 </h6>
<p class="text-muted mt-1 mb-0"> Hello <span class="teaser">Eff that place, you might as well stay here with us instead! 2019 at 5:55 pm
</span></p>
</a>
<div class="date">
<a href="">
<i class="mdi mdi-link-variant mr-2 font-16 "></i> 2:18 AM
</a>
</div>
</div>
</li>
<!-- end 4 -->
<!-- start 5 -->
<li>
<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">
<img class="mr-3 rounded-circle float-left mt-2" src="assets/images/users/user-5.jpg" alt="" height="40">
<h6 class="mb-0">Medium</h6>
<p class="text-muted mt-1 mb-0">Des 24, 2019</p>
</a>
<span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">
<h6 class="mb-0"> <span class="badge-primary badge mr-2">Social</span>Might as well stay here with us from my iPhone 4 4 mar 2014 </h6>
<p class="text-muted mt-1 mb-0"> This Week's Top Stories <span class="teaser">
Our top pick for you on Medium this week The Man Who Destroyed Americas Ego
</span></p>
</a>
<div class="date">
<a href="">
<i class="mdi mdi-link-variant mr-2 font-16 "></i> 11:35 PM
</a>
</div>
</div>
</li>
<!-- end 5 -->
<!-- start 6 -->
<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">
<img class="mr-3 rounded-circle float-left mt-2" src="assets/images/users/user-6.jpg" alt="" height="40">
<h6 class="mb-0">Death to Stock</h6>
<p class="text-muted mt-1 mb-0">April 25, 2019</p>
</a>
<span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">
<h6 class="mb-0">Pleasures, or else he endures pains to avoid worse pains." </h6>
<p class="text-muted mt-1 mb-0"> Montly High-Res Photos <span class="teaser">
To create this month's pack, we hosted a party with local musician Jared Mahone here in Columbus, Ohio.
</span></p>
</a>
<div class="date">
<a href="">
<i class="mdi mdi-link-variant mr-2 font-16 "></i> 10:16 AM
</a>
</div>
</div>
</li>
<!-- end 6 -->
<!-- start 7 -->
<li class="unread">
<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">
<img class="mr-3 rounded-circle float-left mt-2" src="assets/images/users/user-4.jpg" alt="" height="40">
<h6 class="mb-0">Randy, me (5)</h6>
<p class="text-muted mt-1 mb-0">Feb 29, 2019</p>
</a>
<span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">
<h6 class="mb-0"> <span class="badge-success badge mr-2">Family</span>Might as well stay here with us from my iPhone 4 4 mar 2014 </h6>
<p class="text-muted mt-1 mb-0"> This Week's Top Stories <span class="teaser">
Our top pick for you on Medium this week The Man Who Destroyed Americas Ego
</span></p>
</a>
<div class="date">
<a href="">
<i class="mdi mdi-link-variant mr-2 font-16 "></i> 9:35 PM
</a>
</div>
</div>
</li>
<!-- end 7 -->
<!-- start 8 -->
<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">
<img class="mr-3 rounded-circle float-left mt-2" src="assets/images/users/user-6.jpg" alt="" height="40">
<h6 class="mb-0">Andrew Zimmer</h6>
<p class="text-muted mt-1 mb-0">April 19, 2019</p>
</a>
<span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">
<h6 class="mb-0">Pleasures, or else he endures pains to avoid worse pains." </h6>
<p class="text-muted mt-1 mb-0"> Mochila Beta: Subscription Confirmed <span class="teaser">
You've been confirmed! Welcome to the submitted to us...
</span></p>
</a>
<div class="date">
<a href="">
<i class="mdi mdi-link-variant mr-2 font-16 "></i> 4:22 PM
</a>
</div>
</div>
</li>
<!-- end 8 -->
<!-- start 9 -->
<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">
<img class="mr-3 rounded-circle float-left mt-2" src="assets/images/users/user-1.jpg" alt="" height="40">
<h6 class="mb-0">Infinity HR</h6>
<p class="text-muted mt-1 mb-0">April 11, 2019</p>
</a>
<span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">
<h6 class="mb-0">Froin porttitor enim nisl ac finibus lacus commodo sit amet.</h6>
<p class="text-muted mt-1 mb-0"> Sveriges Hetaste sommarjobb <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></p>
</a>
<div class="date">
<a href="">
<i class="mdi mdi-link-variant mr-2 font-16 "></i> 7:22 PM
</a>
</div>
</div>
</li>
<!-- end 9 -->
<!-- start 10 -->
<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">
<img class="mr-3 rounded-circle float-left mt-2" src="assets/images/users/user-4.jpg" alt="" height="40">
<h6 class="mb-0">Revibe</h6>
<p class="text-muted mt-1 mb-0">Jan 18, 2019</p>
</a>
<span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">
<h6 class="mb-0"> <span class="badge-danger badge mr-2">Friends</span>Vivamus sagittis hendrerit elit, at porta sapien facilisis feugiat. </h6>
<p class="text-muted mt-1 mb-0"> Weekend on Revibe <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></p>
</a>
<div class="date">
<a href="">
<i class="mdi mdi-link-variant mr-2 font-16 "></i> 8:55 AM
</a>
</div>
</div>
</li>
<!-- end 10 -->
<!-- start 11 -->
<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">
<img class="mr-3 rounded-circle float-left mt-2" src="assets/images/users/user-1.jpg" alt="" height="40">
<h6 class="mb-0">Erik, me (5)</h6>
<p class="text-muted mt-1 mb-0">April 2, 2019</p>
</a>
<span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">
<h6 class="mb-0">Convallis ut orci congue odio.</h6>
<p class="text-muted mt-1 mb-0"> Regarding our meeting <span class="teaser">
That's great, see you on Thursday!
</span></p>
</a>
<div class="date">
<a href="">
<i class="mdi mdi-link-variant mr-2 font-16 "></i> 9:32 PM
</a>
</div>
</div>
</li>
<!-- end 11 -->
<!-- start 12 -->
<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">
<img class="mr-3 rounded-circle float-left mt-2" src="assets/images/users/user-4.jpg" alt="" height="40">
<h6 class="mb-0">KanbanFlow</h6>
<p class="text-muted mt-1 mb-0">Jun, 2019</p>
</a>
<span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">
<h6 class="mb-0"> <span class="badge-primary badge mr-2">Social</span>Tristique senectus et netus et malesuada fames ac turpis egestas. </h6>
<p class="text-muted mt-1 mb-0"> Task assigned: Clone ARP's website <span class="teaser">
You have been assigned a task by Alex@Work on the board Web.
</span></p>
</a>
<div class="date">
<a href="">
<i class="mdi mdi-link-variant mr-2 font-16 "></i> 8:55 AM
</a>
</div>
</div>
</li>
<!-- end 12 -->
<!-- start 13 -->
<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">
<img class="mr-3 rounded-circle float-left mt-2" src="assets/images/users/user-5.jpg" alt="" height="40">
<h6 class="mb-0">Tobias Berggren</h6>
<p class="text-muted mt-1 mb-0">Feb 13, 2019</p>
</a>
<span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">
<h6 class="mb-0">Suspendisse tristique orci rhoncus neque tempor facilisis.</h6>
<p class="text-muted mt-1 mb-0"> Let's go fishing! <span class="teaser">
Hey, You wanna join me and Fred at the lake tomorrow? It'll be awesome.
</span></p>
</a>
<div class="date">
<a href="">
<i class="mdi mdi-link-variant mr-2 font-16 "></i> 4:55 PM
</a>
</div>
</div>
</li>
<!-- end 13 -->
<!-- start 14 -->
<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">
<img class="mr-3 rounded-circle float-left mt-2" src="assets/images/users/user-7.jpg" alt="" height="40">
<h6 class="mb-0">Charukaw, me (7)</h6>
<p class="text-muted mt-1 mb-0">Feb 13, 2019</p>
</a>
<span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">
<h6 class="mb-0"> Aliquam pellentesque velit nec velit gravida vitae faucibus felis </h6>
<p class="text-muted mt-1 mb-0"> Hey man <span class="teaser">
Nah man sorry i don't. Should i get it?
</span></p>
</a>
<div class="date">
<a href="">
<i class="mdi mdi-link-variant mr-2 font-16 "></i> 7:25 AM
</a>
</div>
</div>
</li>
<!-- end 14 -->
<!-- start 15 -->
<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">
<img class="mr-3 rounded-circle float-left mt-2" src="assets/images/users/user-9.jpg" alt="" height="40">
<h6 class="mb-0">me, Peter (5)</h6>
<p class="text-muted mt-1 mb-0">Jun, 2019</p>
</a>
<span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">
<h6 class="mb-0"> <span class="badge-info badge mr-2">Support</span>Tristique senectus et netus et malesuada fames ac turpis egestas. </h6>
<p class="text-muted mt-1 mb-0"> Home again! <span class="teaser">
That's just perfect! See you tomorrow.
</span></p>
</a>
<div class="date">
<a href="">
<i class="mdi mdi-link-variant mr-2 font-16 "></i> 1:55 AM
</a>
</div>
</div>
</li>
<!-- end 15 -->
<!-- start 16 -->
<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">
<img class="mr-3 rounded-circle float-left mt-2" src="assets/images/users/user-5.jpg" alt="" height="40">
<h6 class="mb-0">Stack Exchange</h6>
<p class="text-muted mt-1 mb-0">Feb 13, 2019</p>
</a>
<span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">
<h6 class="mb-0"> Phasellus a dui erat. In fringilla eget odio nec faucibus. </h6>
<p class="text-muted mt-1 mb-0"> 1 new items in your Stackexchange inbox <span class="teaser">
The following items were added to your Stack Exchange global inbox since you last checked it.
</span></p>
</a>
<div class="date">
<a href="">
<i class="mdi mdi-link-variant mr-2 font-16 "></i> 6:45 AM
</a>
</div>
</div>
</li>
<!-- end 16 -->
<!-- start 17 -->
<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">
<img class="mr-3 rounded-circle float-left mt-2" src="assets/images/users/user-8.jpg" alt="" height="40">
<h6 class="mb-0">Google Drive Team</h6>
<p class="text-muted mt-1 mb-0">Jun 13, 2019</p>
</a>
<span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">
<h6 class="mb-0"> Aliquam pellentesque velit lorem vulputate sodales nec velit gravida vitae faucibus felis </h6>
<p class="text-muted mt-1 mb-0"> You can now use your storage in Google Drive <span class="teaser">
Hey Nicklas Sandell! Thank you for purchasing extra storage space in Google Drive.
</span></p>
</a>
<div class="date">
<a href="">
<i class="mdi mdi-link-variant mr-2 font-16 "></i> 3:45 PM
</a>
</div>
</div>
</li>
<!-- end 17 -->
<!-- start 18 -->
<li>
<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">
<img class="mr-3 rounded-circle float-left mt-2" src="assets/images/users/user-2.jpg" alt="" height="40">
<h6 class="mb-0">me, Susanna (11)</h6>
<p class="text-muted mt-1 mb-0">Feb 26, 2019</p>
</a>
<span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">
<h6 class="mb-0"> Donec hendrerit mauris eu lacus dignissim ac egestas mauris semper. </h6>
<p class="text-muted mt-1 mb-0"> Train/Bus <span class="teaser">
Yes ok, great! I'm not stuck in Stockholm anymore, we're making progress.
</span></p>
</a>
<div class="date">
<a href="">
<i class="mdi mdi-link-variant mr-2 font-16 "></i> 12:36 AM
</a>
</div>
</div>
</li>
<!-- end 18 -->
</ul>
</div>
<!-- card -->
<div class="row m-t-20">
<div class="col-7">
Showing 1 - 20 of 1,524
</div>
<div class="col-5">
<div class="btn-group float-right">
<button type="button" class="btn btn-sm btn-success waves-effect"><i class="fa fa-chevron-left"></i></button>
<button type="button" class="btn btn-sm btn-success waves-effect"><i class="fa fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>
<!-- end Col-9 -->
</div>
</div>
<!-- End row -->
</div>
<!-- container-fluid -->
</div>
<!-- content -->
<footer class="footer">
© 2019 Stexo <span class="d-none d-sm-inline-block"> - Crafted with <i class="mdi mdi-heart text-danger"></i> by Themesdesign</span>.
</footer>
</div>
<!-- ============================================================== -->
<!-- End Right content here -->
<!-- ============================================================== -->
</div>
<!-- END wrapper -->
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/metismenu.min.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/waves.min.js"></script>
<!-- App js -->
<script src="assets/js/app.js"></script>
</body>
</html>