<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.min.css"> <link href="../assets/vendor/fonts/circular-std/style.css" rel="stylesheet"> <link rel="stylesheet" href="../assets/libs/css/style.css"> <link rel="stylesheet" href="../assets/vendor/fonts/fontawesome/css/fontawesome-all.css"> <link rel="stylesheet" href="../assets/vendor/fonts/material-design-iconic-font/css/materialdesignicons.min.css"> <title>Concept - Bootstrap 4 Admin Dashboard Template</title> </head> <body> <!-- ============================================================== --> <!-- main wrapper --> <!-- ============================================================== --> <div class="dashboard-main-wrapper"> <!-- ============================================================== --> <!-- navbar --> <!-- ============================================================== --> <div class="dashboard-header"> <nav class="navbar navbar-expand-lg bg-white fixed-top"> <a class="navbar-brand" href="../index.html">Concept</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse " id="navbarSupportedContent"> <ul class="navbar-nav ml-auto navbar-right-top"> <li class="nav-item"> <div id="custom-search" class="top-search-bar"> <input class="form-control" type="text" placeholder="Search.."> </div> </li> <li class="nav-item dropdown notification"> <a class="nav-link nav-icons" href="#" id="navbarDropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-fw fa-bell"></i> <span class="indicator"></span></a> <ul class="dropdown-menu dropdown-menu-right notification-dropdown"> <li> <div class="notification-title"> Notification</div> <div class="notification-list"> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action active"> <div class="notification-info"> <div class="notification-list-user-img"><img src="../assets/images/avatar-2.jpg" alt="" class="user-avatar-md rounded-circle"></div> <div class="notification-list-user-block"><span class="notification-list-user-name">Jeremy Rakestraw</span>accepted your invitation to join the team. <div class="notification-date">2 min ago</div> </div> </div> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="notification-info"> <div class="notification-list-user-img"><img src="../assets/images/avatar-3.jpg" alt="" class="user-avatar-md rounded-circle"></div> <div class="notification-list-user-block"><span class="notification-list-user-name">John Abraham</span>is now following you <div class="notification-date">2 days ago</div> </div> </div> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="notification-info"> <div class="notification-list-user-img"><img src="../assets/images/avatar-4.jpg" alt="" class="user-avatar-md rounded-circle"></div> <div class="notification-list-user-block"><span class="notification-list-user-name">Monaan Pechi</span> is watching your main repository <div class="notification-date">2 min ago</div> </div> </div> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="notification-info"> <div class="notification-list-user-img"><img src="../assets/images/avatar-5.jpg" alt="" class="user-avatar-md rounded-circle"></div> <div class="notification-list-user-block"><span class="notification-list-user-name">Jessica Caruso</span>accepted your invitation to join the team. <div class="notification-date">2 min ago</div> </div> </div> </a> </div> </div> </li> <li> <div class="list-footer"> <a href="#">View all notifications</a></div> </li> </ul> </li> <li class="nav-item dropdown connection"> <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-fw fa-th"></i> </a> <ul class="dropdown-menu dropdown-menu-right connection-dropdown"> <li class="connection-list"> <div class="row"> <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 "> <a href="#" class="connection-item"><img src="../assets/images/github.png" alt="" > <span>Github</span></a> </div> <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 "> <a href="#" class="connection-item"><img src="../assets/images/dribbble.png" alt="" > <span>Dribbble</span></a> </div> <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 "> <a href="#" class="connection-item"><img src="../assets/images/dropbox.png" alt="" > <span>Dropbox</span></a> </div> </div> <div class="row"> <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 "> <a href="#" class="connection-item"><img src="../assets/images/bitbucket.png" alt=""> <span>Bitbucket</span></a> </div> <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 "> <a href="#" class="connection-item"><img src="../assets/images/mail_chimp.png" alt="" ><span>Mail chimp</span></a> </div> <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 "> <a href="#" class="connection-item"><img src="../assets/images/slack.png" alt="" > <span>Slack</span></a> </div> </div> </li> <li> <div class="conntection-footer"><a href="#">More</a></div> </li> </ul> </li> <li class="nav-item dropdown nav-user"> <a class="nav-link nav-user-img" href="#" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="../assets/images/avatar-1.jpg" alt="" class="user-avatar-md rounded-circle"></a> <div class="dropdown-menu dropdown-menu-right nav-user-dropdown" aria-labelledby="navbarDropdownMenuLink2"> <div class="nav-user-info"> <h5 class="mb-0 text-white nav-user-name">John Abraham</h5> <span class="status"></span><span class="ml-2">Available</span> </div> <a class="dropdown-item" href="#"><i class="fas fa-user mr-2"></i>Account</a> <a class="dropdown-item" href="#"><i class="fas fa-cog mr-2"></i>Setting</a> <a class="dropdown-item" href="#"><i class="fas fa-power-off mr-2"></i>Logout</a> </div> </li> </ul> </div> </nav> </div> <!-- ============================================================== --> <!-- end navbar --> <!-- ============================================================== --> <!-- ============================================================== --> <!-- left sidebar --> <!-- ============================================================== --> <div class="nav-left-sidebar sidebar-dark"> <div class="menu-list"> <nav class="navbar navbar-expand-lg navbar-light"> <a class="d-xl-none d-lg-none" href="#">Dashboard</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav flex-column"> <li class="nav-divider"> Menu </li> <li class="nav-item "> <a class="nav-link active" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1" aria-controls="submenu-1"><i class="fa fa-fw fa-user-circle"></i>Dashboard <span class="badge badge-success">6</span></a> <div id="submenu-1" class="collapse submenu" style=""> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="index.html" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1-2" aria-controls="submenu-1-2">E-Commerce</a> <div id="submenu-1-2" class="collapse submenu" style=""> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="../index.html">E Commerce Dashboard</a> </li> <li class="nav-item"> <a class="nav-link" href="../ecommerce-product.html">Product List</a> </li> <li class="nav-item"> <a class="nav-link" href="../ecommerce-product-single.html">Product Single</a> </li> <li class="nav-item"> <a class="nav-link" href="../ecommerce-product-checkout.html">Product Checkout</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" href="../dashboard-finance.html">Finance</a> </li> <li class="nav-item"> <a class="nav-link" href="../dashboard-sales.html">Sales</a> </li> <li class="nav-item"> <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1-1" aria-controls="submenu-1-1">Infulencer</a> <div id="submenu-1-1" class="collapse submenu" style=""> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="../dashboard-influencer.html">Influencer</a> </li> <li class="nav-item"> <a class="nav-link" href="../influencer-finder.html">Influencer Finder</a> </li> <li class="nav-item"> <a class="nav-link" href="../influencer-profile.html">Influencer Profile</a> </li> </ul> </div> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-2" aria-controls="submenu-2"><i class="fa fa-fw fa-rocket"></i>UI Elements</a> <div id="submenu-2" class="collapse submenu" style=""> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="cards.html">Cards <span class="badge badge-secondary">New</span></a> </li> <li class="nav-item"> <a class="nav-link" href="general.html">General</a> </li> <li class="nav-item"> <a class="nav-link" href="carousel.html">Carousel</a> </li> <li class="nav-item"> <a class="nav-link" href="listgroup.html">List Group</a> </li> <li class="nav-item"> <a class="nav-link" href="typography.html">Typography</a> </li> <li class="nav-item"> <a class="nav-link" href="accordions.html">Accordions</a> </li> <li class="nav-item"> <a class="nav-link" href="tabs.html">Tabs</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-3" aria-controls="submenu-3"><i class="fas fa-fw fa-chart-pie"></i>Chart</a> <div id="submenu-3" class="collapse submenu" style=""> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="chart-c3.html">C3 Charts</a> </li> <li class="nav-item"> <a class="nav-link" href="chart-chartist.html">Chartist Charts</a> </li> <li class="nav-item"> <a class="nav-link" href="chart-charts.html">Chart</a> </li> <li class="nav-item"> <a class="nav-link" href="chart-morris.html">Morris</a> </li> <li class="nav-item"> <a class="nav-link" href="chart-sparkline.html">Sparkline</a> </li> <li class="nav-item"> <a class="nav-link" href="chart-gauge.html">Guage</a> </li> </ul> </div> </li> <li class="nav-item "> <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-4" aria-controls="submenu-4"><i class="fab fa-fw fa-wpforms"></i>Forms</a> <div id="submenu-4" class="collapse submenu" style=""> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="form-elements.html">Form Elements</a> </li> <li class="nav-item"> <a class="nav-link" href="form-validation.html">Parsely Validations</a> </li> <li class="nav-item"> <a class="nav-link" href="multiselect.html">Multiselect</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-5" aria-controls="submenu-5"><i class="fas fa-fw fa-table"></i>Tables</a> <div id="submenu-5" class="collapse submenu" style=""> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="general-table.html">General Tables</a> </li> <li class="nav-item"> <a class="nav-link" href="data-tables.html">Data Tables</a> </li> </ul> </div> </li> <li class="nav-divider"> Features </li> <li class="nav-item"> <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-6" aria-controls="submenu-6"><i class="fas fa-fw fa-file"></i>Pages</a> <div id="submenu-6" class="collapse submenu" style=""> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="invoice.html">Invoice</a> </li> <li class="nav-item"> <a class="nav-link" href="blank-page.html">Blank Page</a> </li> <li class="nav-item"> <a class="nav-link" href="blank-page-header.html">Blank Page Header</a> </li> <li class="nav-item"> <a class="nav-link" href="login.html">Login</a> </li> <li class="nav-item"> <a class="nav-link" href="404-page.html">404 page</a> </li> <li class="nav-item"> <a class="nav-link" href="sign-up.html">Sign up Page</a> </li> <li class="nav-item"> <a class="nav-link" href="forgot-password.html">Forgot Password</a> </li> <li class="nav-item"> <a class="nav-link" href="pricing.html">Pricing Tables</a> </li> <li class="nav-item"> <a class="nav-link" href="timeline.html">Timeline</a> </li> <li class="nav-item"> <a class="nav-link" href="calendar.html">Calendar</a> </li> <li class="nav-item"> <a class="nav-link" href="sortable-nestable-lists.html">Sortable/Nestable List</a> </li> <li class="nav-item"> <a class="nav-link" href="widgets.html">Widgets</a> </li> <li class="nav-item"> <a class="nav-link" href="media-object.html">Media Objects</a> </li> <li class="nav-item"> <a class="nav-link" href="cropper-image.html">Cropper</a> </li> <li class="nav-item"> <a class="nav-link" href="color-picker.html">Color Picker</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-7" aria-controls="submenu-7"><i class="fas fa-fw fa-inbox"></i>Apps <span class="badge badge-secondary">New</span></a> <div id="submenu-7" class="collapse submenu" style=""> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="inbox.html">Inbox</a> </li> <li class="nav-item"> <a class="nav-link" href="email-details.html">Email Detail</a> </li> <li class="nav-item"> <a class="nav-link" href="email-compose.html">Email Compose</a> </li> <li class="nav-item"> <a class="nav-link" href="message-chat.html">Message Chat</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-8" aria-controls="submenu-8"><i class="fas fa-fw fa-columns"></i>Icons</a> <div id="submenu-8" class="collapse submenu" style=""> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="icon-fontawesome.html">FontAwesome Icons</a> </li> <li class="nav-item"> <a class="nav-link" href="icon-material.html">Material Icons</a> </li> <li class="nav-item"> <a class="nav-link" href="icon-simple-lineicon.html">Simpleline Icon</a> </li> <li class="nav-item"> <a class="nav-link" href="icon-themify.html">Themify Icon</a> </li> <li class="nav-item"> <a class="nav-link" href="icon-flag.html">Flag Icons</a> </li> <li class="nav-item"> <a class="nav-link" href="icon-weather.html">Weather Icon</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-9" aria-controls="submenu-9"><i class="fas fa-fw fa-map-marker-alt"></i>Maps</a> <div id="submenu-9" class="collapse submenu" style=""> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="map-google.html">Google Maps</a> </li> <li class="nav-item"> <a class="nav-link" href="map-vector.html">Vector Maps</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-10" aria-controls="submenu-10"><i class="fas fa-f fa-folder"></i>Menu Level</a> <div id="submenu-10" class="collapse submenu" style=""> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="#">Level 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-11" aria-controls="submenu-11">Level 2</a> <div id="submenu-11" class="collapse submenu" style=""> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="#">Level 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Level 2</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Level 3</a> </li> </ul> </div> </li> </ul> </div> </nav> </div> </div> <!-- ============================================================== --> <!-- end left sidebar --> <!-- ============================================================== --> <!-- ============================================================== --> <!-- wrapper --> <!-- ============================================================== --> <div class="dashboard-wrapper"> <div class="container-fluid"> <aside class="page-aside"> <div class="aside-content"> <div class="aside-header"> <button class="navbar-toggle" data-target=".aside-nav" data-toggle="collapse" type="button"><span class="icon"><i class="fas fa-caret-down"></i></span></button><span class="title">Mail Service</span> <p class="description">Service description</p> </div> <div class="aside-compose"><a class="btn btn-lg btn-secondary btn-block" href="#">Compose Email</a></div> <div class="aside-nav collapse"> <ul class="nav"> <li class="active"><a href="#"><span class="icon"><i class="fas fa-fw fa-inbox"></i></span>Inbox<span class="badge badge-primary float-right">8</span></a></li> <li><a href="#"><span class="icon"><i class="fas fa-fw fa-envelope"></i></span>Sent Mail</a></li> <li><a href="#"><span class="icon"><i class="fas fa-fw fa-briefcase"></i></span>Important<span class="badge badge-secondary float-right">4</span></a></li> <li><a href="#"><span class="icon"><i class="fas fa-fw fa-file"></i></span>Drafts</a></li> <li><a href="#"><span class="icon"><i class="fas fa-fw fa-star"></i></span>Tags</a></li> <li><a href="#"><span class="icon"><i class="fas fa-fw fa-trash"></i></span>Trash</a></li> </ul><span class="title">Labels</span> <ul class="nav nav-pills nav-stacked"> <li><a href="#"><i class="m-r-10 mdi mdi-label text-secondary"></i> Important </a></li> <li><a href="#"> <i class="m-r-10 mdi mdi-label text-primary"></i> Business </a></li> <li><a href="#"> <i class="m-r-10 mdi mdi-label text-brand"></i> Inspiration </a></li> </ul> </div> </div> </aside> <div class="main-content container-fluid p-0"> <div class="email-inbox-header"> <div class="row"> <div class="col-lg-6"> <div class="email-title"><span class="icon"><i class="fas fa-inbox"></i></span> Inbox <span class="new-messages">(2 new messages)</span> </div> </div> <div class="col-lg-6"> <div class="email-search"> <div class="input-group input-search"> <input class="form-control" type="text" placeholder="Search mail..."><span class="input-group-btn"> <button class="btn btn-secondary" type="button"><i class="fas fa-search"></i></button></span> </div> </div> </div> </div> </div> <div class="email-filters"> <div class="email-filters-left"> <label class="custom-control custom-checkbox be-select-all"> <input class="custom-control-input chk_all" type="checkbox" name="chk_all"><span class="custom-control-label"></span> </label> <div class="btn-group"> <button class="btn btn-light dropdown-toggle" data-toggle="dropdown" type="button"> With selected <span class="caret"></span></button> <div class="dropdown-menu" role="menu"><a class="dropdown-item" href="#">Mark as rea</a><a class="dropdown-item" href="#">Mark as unread</a><a class="dropdown-item" href="#">Spam</a> <div class="dropdown-divider"></div><a class="dropdown-item" href="#">Delete</a> </div> </div> <div class="btn-group"> <button class="btn btn-light" type="button">Archive</button> <button class="btn btn-light" type="button">Span</button> <button class="btn btn-light" type="button">Delete</button> </div> <div class="btn-group"> <button class="btn btn-light dropdown-toggle" data-toggle="dropdown" type="button">Order by <span class="caret"></span></button> <div class="dropdown-menu dropdown-menu-right" role="menu"><a class="dropdown-item" href="#">Date</a><a class="dropdown-item" href="#">From</a><a class="dropdown-item" href="#">Subject</a> <div class="dropdown-divider"></div><a class="dropdown-item" href="#">Size</a> </div> </div> </div> <div class="email-filters-right"><span class="email-pagination-indicator">1-50 of 253</span> <div class="btn-group email-pagination-nav"> <button class="btn btn-light" type="button"><i class="fas fa-angle-left"></i></button> <button class="btn btn-light" type="button"><i class="fas fa-angle-right"></i></button> </div> </div> </div> <div class="email-list"> <div class="email-list-item email-list-item--unread"> <div class="email-list-actions"> <label class="custom-control custom-checkbox"> <input class="custom-control-input checkboxes" type="checkbox" value="1" id="one"><span class="custom-control-label"></span> </label><a class="favorite active" href="#"><span><i class="fas fa-star"></i></span></a> </div> <div class="email-list-detail"><span class="date float-right"><span class="icon"><i class="fas fa-paperclip"></i> </span>28 Jul</span><span class="from">Penelope Thornton</span> <p class="msg">Urgent - You forgot your keys in the class room, please come imediatly!</p> </div> </div> <div class="email-list-item email-list-item--unread"> <div class="email-list-actions"> <label class="custom-control custom-checkbox"> <input class="custom-control-input checkboxes" type="checkbox" value="2" id="two"><span class="custom-control-label"></span> </label><a class="favorite" href="#"><span><i class="fas fa-star"></i></span></a> </div> <div class="email-list-detail"><span class="date float-right"></span><span class="date float-right"><span class="icon"><i class="fas fa-paperclip"></i></span> 13 Jul</span><span class="from">Benji Harper</span> <p class="msg">Urgent - You forgot your keys in the class room, please come imediatly!</p> </div> </div> <div class="email-list-item"> <div class="email-list-actions"> <label class="custom-control custom-checkbox"> <input class="custom-control-input checkboxes" type="checkbox" value="3" id="three"><span class="custom-control-label"></span> </label><a class="favorite" href="#"><span><i class="fas fa-star"></i></span></a> </div> <div class="email-list-detail"><span class="date float-right">23 Jun</span><span class="from">Justine Myranda</span> <p class="msg">Urgent - You forgot your keys in the class room, please come imediatly!</p> </div> </div> <div class="email-list-item"> <div class="email-list-actions"> <label class="custom-control custom-checkbox"> <input class="custom-control-input checkboxes" type="checkbox" value="4" id="four"><span class="custom-control-label"></span> </label><a class="favorite" href="#"><span><i class="fas fa-star"></i></span></a> </div> <div class="email-list-detail"><span class="date float-right">17 May</span><span class="from">John Doe</span> <p class="msg">Urgent - You forgot your keys in the class room, please come imediatly!</p> </div> </div> <div class="email-list-item"> <div class="email-list-actions"> <label class="custom-control custom-checkbox"> <input class="custom-control-input checkboxes" type="checkbox" value="5" id="five"><span class="custom-control-label"></span> </label><a class="favorite" href="#"><span><i class="fas fa-star"></i></span></a> </div> <div class="email-list-detail"><span class="date float-right">16 May</span><span class="from">Sherwood Clifford</span> <p class="msg">Urgent - You forgot your keys in the class room, please come imediatly!</p> </div> </div> <div class="email-list-item"> <div class="email-list-actions"> <label class="custom-control custom-checkbox"> <input class="custom-control-input checkboxes" type="checkbox" value="6" id="six"><span class="custom-control-label"></span> </label><a class="favorite" href="#"><span><i class="fas fa-star"></i></span></a> </div> <div class="email-list-detail"><span class="date float-right">12 May</span><span class="from">Kristopher Donny</span> <p class="msg">Urgent - You forgot your keys in the class room, please come imediatly!</p> </div> </div> <div class="email-list-item"> <div class="email-list-actions"> <label class="custom-control custom-checkbox"> <input class="custom-control-input checkboxes" type="checkbox" value="7" id="seven"><span class="custom-control-label"></span> </label><a class="favorite" href="#"><span><i class="fas fa-star"></i></span></a> </div> <div class="email-list-detail"><span class="date float-right">12 May</span><span class="from">Kristopher Donny</span> <p class="msg">Urgent - You forgot your keys in the class room, please come imediatly!</p> </div> </div> <div class="email-list-item"> <div class="email-list-actions"> <label class="custom-control custom-checkbox"> <input class="custom-control-input checkboxes" type="checkbox" value="8" id="eight"><span class="custom-control-label"></span> </label><a class="favorite" href="#"><span><i class="fas fa-star"></i></span></a> </div> <div class="email-list-detail"><span class="date float-right">12 May</span><span class="from">Kristopher Donny</span> <p class="msg">Urgent - You forgot your keys in the class room, please come imediatly!</p> </div> </div> </div> </div> </div> </div> </div> <!-- ============================================================== --> <!-- end main wrapper --> <!-- ============================================================== --> <!-- Optional JavaScript --> <script src="../assets/vendor/jquery/jquery-3.3.1.min.js"></script> <script src="../assets/vendor/bootstrap/js/bootstrap.bundle.js"></script> <script src="../assets/vendor/slimscroll/jquery.slimscroll.js"></script> <script src="../assets/libs/js/main-js.js"></script> <script> $(document).ready(function() { // binding the check all box to onClick event $(".chk_all").click(function() { var checkAll = $(".chk_all").prop('checked'); if (checkAll) { $(".checkboxes").prop("checked", true); } else { $(".checkboxes").prop("checked", false); } }); // if all checkboxes are selected, then checked the main checkbox class and vise versa $(".checkboxes").click(function() { if ($(".checkboxes").length == $(".subscheked:checked").length) { $(".chk_all").attr("checked", "checked"); } else { $(".chk_all").removeAttr("checked"); } }); }); </script> </body> </html>