materialx-yoo

<!DOCTYPE html> <html class="no-js" 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" /> <meta name="author" content="YooKits" />  <title>Dashboard</title>  <link rel="icon" href="assets/img/favicon.png">  <link rel="stylesheet" type="text/css" href="assets/css/material-icons.css" /> <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="assets/css/materialX.css" /> </head> <body> <div class="yoo-height-b60 yoo-height-lg-b60"></div> <header class="yoo-header yoo-style1 yoo-sticky-menu"> <div class="yoo-main-header"> <div class="yoo-main-header-in"> <div class="yoo-main-header-left"> <a href="index.html" class="yoo-logo-link yoo-light-logo"><img src="assets/img/logo.svg" alt="logo-light" /></a>   </div> <div class="yoo-main-header-right"> <div class="yoo-nav-wrap yoo-fade-up"> <div class="yoo-nav-toggle"> <i class="material-icons-outlined">more_vert</i> </div> <nav class="yoo-nav yoo-desktop-nav"> <ul class="yoo-nav-list"> <li> <a href="#"><i class="material-icons">home</i> Home</a> </li> <li> <a href="#"><i class="material-icons">folder</i> Contact</a> </li> </ul> </nav>  </div>  <ul class="yoo-ex-nav yoo-style1 yoo-flex yoo-mp0"> <li> <div class="yoo-search-wrap"> <form action="#" class="yoo-search yoo-style1"> <input type="text" placeholder="Search people & places" class="yoo-search-input"> <button class="yoo-search-submit"><i class="material-icons-outlined">search</i></button> </form> <span class="yoo-search-toggle-mb yoo-ex-nav-btn"><i class="material-icons-outlined">search</i></span> </div> </li> <li> <div class="yoo-toggle-body yoo-language-nav"> <div class="yoo-toggle-btn yoo-ex-nav-btn" data-ripple="ripple" data-ripple-color="#fff"> <i class="material-icons">translate</i> <span class="yoo-selected-language">English</span> <span class="yoo-language-arrow"><i class="material-icons">keyboard_arrow_down</i></span> </div> <ul class="yoo-dropdown yoo-style1"> <li> <a href="#">English</a> </li> <li> <a href="#">Русский</a> </li> <li> <a href="#">Español</a> </li> <li> <a href="#">日本語</a> </li> </ul> </div> </li> <li> <div class="yoo-toggle-body yoo-message-area yoo-style1"> <span class="yoo-toggle-btn yoo-ex-nav-btn yoo-message-btn"> <i class="material-icons">email</i> </span> <div class="yoo-dropdown yoo-notify-dropdown"> <h2 class="yoo-nofify-title"> <span class="yoo-nofify-title-left">Messages</span> <span class="yoo-nofify-title-right"><a href="#">Mark All as Read</a></span> </h2> <ul class="yoo-nofify-list yoo-style1 yoo-mp0"> <li> <a href="#"> <div class="yoo-nofify-thumb"> <img src="assets/img/user/1.jpg" alt=""> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head"> Bob Dylan <span class="yoo-online-status yoo-live"></span> </h3> <div class="yoo-msg"> Thank you for purchasing! <br> When you arrive prepared to negotiate </div> <span class="yoo-notify-time">10:23</span> </div> </a> </li> <li> <a href="#" class="active"> <div class="yoo-nofify-thumb"> <img src="assets/img/user/2.jpg" alt=""> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head"> David Gilmour <span class="yoo-online-status"></span> </h3> <div class="yoo-msg"> Thank you for purchasing! <br> When you arrive prepared to negotiate </div> <span class="yoo-notify-time">12:23</span> </div> </a> </li> <li> <a href="#"> <div class="yoo-nofify-thumb"> <img src="assets/img/user/3.jpg" alt=""> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head"> Jeff Beck <span class="yoo-online-status yoo-live"></span> </h3> <div class="yoo-msg"> Thank you for purchasing! <br> When you arrive prepared to negotiate </div> <span class="yoo-notify-time">Jan 05</span> </div> </a> </li> <li> <a href="#"> <div class="yoo-nofify-thumb"> <img src="assets/img/user/4.jpg" alt=""> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head"> Guthrie Govan <span class="yoo-online-status"></span> </h3> <div class="yoo-msg"> Thank you for purchasing! <br> When you arrive prepared to negotiate </div> <span class="yoo-notify-time">Jan 10</span> </div> </a> </li> <li> <a href="#"> <div class="yoo-nofify-thumb"> <img src="assets/img/user/5.jpg" alt=""> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head"> Eric Johnson <span class="yoo-online-status"></span> </h3> <div class="yoo-msg"> Thank you for purchasing! <br> When you arrive prepared to negotiate </div> <span class="yoo-notify-time">Jan 16</span> </div> </a> </li> </ul> <a href="#" class="yoo-btn yoo-style2">SEE ALL <i class="material-icons-outlined">navigate_next</i></a> </div> </div> </li> <li> <div class="yoo-toggle-body yoo-notice-area yoo-style1"> <span class="yoo-toggle-btn yoo-ex-nav-btn yoo-notice-btn"> <i class="material-icons">notifications</i> <span class="yoo-ex-nav-label">3</span> </span> <div class="yoo-dropdown yoo-notify-dropdown"> <h2 class="yoo-nofify-title">Notification</h2> <ul class="yoo-nofify-list yoo-style1 yoo-mp0"> <li> <a href="#" class="yoo-nofify-list-in"> <div class="yoo-nofify-icon yoo-purple-box"> <i class="material-icons-outlined">supervisor_account</i> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head">Invite your friends to dashboard.</h3> <span class="yoo-notify-time">5 hour ago</span> </div> </a> </li> <li> <a href="#" class="yoo-nofify-list-in"> <div class="yoo-nofify-icon yoo-green-box"> <i class="material-icons-outlined">calendar_today</i> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head">3 Tasks pending this month.</h3> <span class="yoo-notify-time">6 hour ago</span> </div> </a> </li> <li> <a href="#" class="yoo-nofify-list-in"> <div class="yoo-nofify-icon yoo-blue-box"> <i class="material-icons-outlined">favorite_border</i> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head">7 People loved your activity.</h3> <span class="yoo-notify-time">9 hour ago</span> </div> </a> </li> <li> <a href="#" class="yoo-nofify-list-in"> <div class="yoo-nofify-icon yoo-purple-box"> <i class="material-icons-outlined">chat_bubble_outline</i> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head">John commented on activity.</h3> <span class="yoo-notify-time">1 day ago</span> </div> </a> </li> <li> <a href="#" class="yoo-nofify-list-in"> <div class="yoo-nofify-icon yoo-indigo-box"> <img src="assets/img/user/1.jpg" alt="msg1" /> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head">Click your picture or add an account.</h3> <span class="yoo-notify-time">2 days ago</span> </div> </a> </li> </ul> <a href="#" class="yoo-btn yoo-style2">SEE ALL <i class="material-icons-outlined">navigate_next</i></a> </div> </div> </li> <li> <div class="yoo-toggle-body yoo-profile-nav yoo-style1"> <div class="yoo-toggle-btn yoo-profile-nav-btn"> <div class="yoo-profile-nav-text"> <span>Welcome,</span> <h4>Thom Yorke</h4> </div> <div class="yoo-profile-nav-img"> <img src="assets/img/profile-pic.png" alt="profile"> </div> </div> <ul class="yoo-dropdown yoo-style1"> <li> <a href="#"><i class="material-icons">account_circle</i>My Profile</a> </li> <li> <a href="#"><i class="material-icons">settings</i>Settings</a> </li> <li> <a href="#"><i class="material-icons">videocam</i>Upload</a> </li> <li> <a href="#"><i class="material-icons">help</i>Help</a> </li> <li class="yoo-dropdown-cta"><a href="#">Sign Out</a></li> </ul> </div> </li> </ul> </div> </div> </div> </header> <div class="yoo-sidebarheader-toggle"> <div class="yoo-button-bar1"></div> <div class="yoo-button-bar2"></div> <div class="yoo-button-bar3"></div> </div> <div class="yoo-sidebarheader"> <div class="yoo-add"> <div class="yoo-add-in"> <a target="_blank" href="https://yookits.com/product/materialx-material-bootstrap-admin-template" class="yoo-add-thumb"> <img src="assets/img/MATERIAL-X-3.png" alt="MaterialXPro"> </a> <h2 class="yoo-add-title"><a target="_blank" href="https://yookits.com/product/materialx-material-bootstrap-admin-template">Go Pro & unlock 100+ more UI components & pages.</a></h2> <a target="_blank" href="https://yookits.com/product/materialx-material-bootstrap-admin-template" class="yoo-add-btn btn btn-success btn-sm">Show Me</a> </div> </div> <div class="yoo-sidebarheader-in" data-scrollbar> <div class="yoo-sidebar-nav"> <ul class="yoo-sidebar-nav-list yoo-mp0"> <li class="active"> <a href="index.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">dashboard</i></span> <span class="yoo-sidebar-link-text">Dashboard</span> </span> </a> </li> <li> <a href="settings.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">settings</i></span> <span class="yoo-sidebar-link-text">Profile Settings</span> </span> </a> </li> <li> <a href="calender.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">event_note</i></span> <span class="yoo-sidebar-link-text">Calender</span> </span> </a> </li> <li class="yoo-sidebar-has-children"> <a href="#" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">account_circle</i></span> <span class="yoo-sidebar-link-text">Sign In/Sign Up</span> </span> </a> <ul class="yoo-sidebar-nav-dropdown"> <li> <a href="login.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Log In</span> </span> </a> </li> <li> <a href="login.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Sign Up</span> </span> </a> </li> </ul> </li> <li> <a href="alerts.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">insert_drive_file</i></span> <span class="yoo-sidebar-link-text">Notifications</span> </span> </a> </li> <li> <a href="button.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">folder</i></span> <span class="yoo-sidebar-link-text">Buttons</span> </span> </a> </li> <li> <a href="tables.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">table_chart</i></span> <span class="yoo-sidebar-link-text">Table</span> </span> </a> </li> <li> <a href="forms.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">add_to_photos</i></span> <span class="yoo-sidebar-link-text">Forms</span> </span> </a> </li> <li> <a href="pagination.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">flag</i></span> <span class="yoo-sidebar-link-text">Pagination</span> </span> </a> </li> <li> <a href="typography.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">font_download</i></span> <span class="yoo-sidebar-link-text">Typography</span> </span> </a> </li> <li class="yoo-sidebar-has-children"> <a href="#" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">cloud</i></span> <span class="yoo-sidebar-link-text">Components</span> </span> </a> <ul class="yoo-sidebar-nav-dropdown"> <li> <a href="badge.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Badge</span> </span> </a> </li> <li> <a href="breadcrumb.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Breadcrumb</span> </span> </a> </li> <li> <a href="card.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Card</span> </span> </a> </li> <li> <a href="carousel.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Carousel</span> </span> </a> </li> <li> <a href="collapse.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Collapse</span> </span> </a> </li> <li> <a href="dropdowns.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Dropdowns</span> </span> </a> </li> <li> <a href="list-group.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">List Group</span> </span> </a> </li> <li> <a href="modal.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Modal</span> </span> </a> </li> <li> <a href="tooltips.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Tooltips</span> </span> </a> </li> </ul> </li> <li> <a href="icons.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">archive</i></span> <span class="yoo-sidebar-link-text">Icons</span> </span> </a> </li> <li> <a href="svgmaps.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">explore</i></span> <span class="yoo-sidebar-link-text">SVG Maps</span> </span> </a> </li> <li> <a href="documentation.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">library_books</i></span> <span class="yoo-sidebar-link-text">Documentation</span> </span> </a> </li> </ul> </div> </div> </div> <div class="yoo-content yoo-style1"> <div class="container-fluid"> <div class="yoo-uikits-heading"> <ul class="yoo-breadcamb yoo-style1 yoo-mp0"> <li><a href="#">Home</a></li> <li>Dashboard</li> </ul> <h2 class="yoo-uikits-title">Dashboard</h2> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> <div class="container-fluid"> <div class="row"> <div class="col-xl-3 col-md-6"> <div class="yoo-iconbox yoo-style1"> <div class="yoo-iconbox-in"> <div class="yoo-iconbox-title">PAGE VIEWS</div> <div class="yoo-iconbox-number">5,508</div> <span class="yoo-iconbox-percentage yoo-red-color"><i class="material-icons">trending_down</i> -5%</span> <div class="yoo-height-b15 yoo-height-lg-b15"></div> <div class="yoo-progress-wrap yoo-style3"> <div class="yoo-progress-head"> <div class="yoo-progressbar-title">Target: 10,345</div> </div> <div class="progress"> <div class="progress-bar yoo-indigo-bg" role="progressbar" style="width: 56%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> <div class="yoo-iconbox-icon yoo-indigo-box"><i class="material-icons">store</i></div> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> </div> <div class="col-xl-3 col-md-6"> <div class="yoo-iconbox yoo-style1"> <div class="yoo-iconbox-in"> <div class="yoo-iconbox-title">TOTAL TRAFFIC</div> <div class="yoo-iconbox-number">350,897</div> <span class="yoo-iconbox-percentage yoo-green-color"><i class="material-icons">trending_up</i> +8%</span> <div class="yoo-height-b15 yoo-height-lg-b15"></div> <div class="yoo-progress-wrap yoo-style3"> <div class="yoo-progress-head"> <div class="yoo-progressbar-title">Target: 10,345</div> </div> <div class="progress"> <div class="progress-bar yoo-green-bg" role="progressbar" style="width: 80%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> <div class="yoo-iconbox-icon yoo-green-box"><i class="material-icons">people</i></div> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> </div> <div class="col-xl-3 col-md-6"> <div class="yoo-iconbox yoo-style1"> <div class="yoo-iconbox-in"> <div class="yoo-iconbox-title">CONVERSATION RATE</div> <div class="yoo-iconbox-number">350,897</div> <span class="yoo-iconbox-percentage yoo-green-color"><i class="material-icons">trending_up</i> +17%</span> <div class="yoo-height-b15 yoo-height-lg-b15"></div> <div class="yoo-progress-wrap yoo-style3"> <div class="yoo-progress-head"> <div class="yoo-progressbar-title">Target: 10,345</div> </div> <div class="progress"> <div class="progress-bar yoo-orange-bg" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> <div class="yoo-iconbox-icon yoo-orange-box"><i class="material-icons">subscriptions</i></div> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> </div> <div class="col-xl-3 col-md-6"> <div class="yoo-iconbox yoo-style1"> <div class="yoo-iconbox-in"> <div class="yoo-iconbox-title">NEW USERS</div> <div class="yoo-iconbox-number">45,089</div> <span class="yoo-iconbox-percentage yoo-green-color"><i class="material-icons">trending_up</i> +8%</span> <div class="yoo-height-b15 yoo-height-lg-b15"></div> <div class="yoo-progress-wrap yoo-style3"> <div class="yoo-progress-head"> <div class="yoo-progressbar-title">Target: 10,345</div> </div> <div class="progress"> <div class="progress-bar yoo-blue-gray-bg" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> <div class="yoo-iconbox-icon yoo-blue-gray-box"><i class="material-icons">inbox</i></div> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> </div> <div class="col-lg-8"> <div class="yoo-card yoo-style1"> <div class="yoo-card-heading"> <div class="yoo-card-heading-left"> <h2 class="yoo-card-title">Analytics</h2> </div> <div class="yoo-card-heading-right"> <div class="yoo-toggle-body yoo-profile-nav yoo-style1"> <div class="yoo-toggle-btn yoo-card-toggle-btn" data-ripple="ripple" data-ripple-color="#666"><i class="material-icons">more_vert</i></div> <ul class="yoo-dropdown yoo-style1"> <li> <a href="#"><i class="material-icons">watch_later</i>Activity</a> </li> <li> <a href="#"><i class="material-icons">settings</i>Settings</a> </li> <li> <a href="#"><i class="material-icons">flag</i>Report</a> </li> <li> <a href="#"><i class="material-icons">help</i>Help</a> </li> <li class="yoo-dropdown-cta"><a href="#"><i class="material-icons">share</i>Share</a></li> </ul> </div> </div> </div> <div class="yoo-card-body"> <ul class="nav nav-tabs yoo-analytics-tab"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#AreaCharts" data-ripple="ripple" data-ripple-color="#3f51ae"> Area Charts </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#BarChart" data-ripple="ripple" data-ripple-color="#3f51ae"> Bar Chart </a> </li> </ul> <div class="yoo-padd-lr-20"> <div class="tab-content"> <div class="tab-pane fade show active" id="AreaCharts"> <div id="yooChart2"></div> </div> <div class="tab-pane fade" id="BarChart"> <div id="yooChart1"></div> </div> </div> </div> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> </div> <div class="col-lg-4"> <div class="yoo-card yoo-style1"> <div class="yoo-card-heading"> <div class="yoo-card-heading-left"> <h2 class="yoo-card-title">New Users</h2> </div> <div class="yoo-card-heading-right"> <div class="yoo-toggle-body yoo-profile-nav yoo-style1"> <div class="yoo-toggle-btn yoo-card-toggle-btn" data-ripple="ripple" data-ripple-color="#666"><i class="material-icons">more_vert</i></div> <ul class="yoo-dropdown yoo-style1"> <li> <a href="#"><i class="material-icons">watch_later</i>Activity</a> </li> <li> <a href="#"><i class="material-icons">settings</i>Settings</a> </li> <li> <a href="#"><i class="material-icons">flag</i>Report</a> </li> <li> <a href="#"><i class="material-icons">help</i>Help</a> </li> <li class="yoo-dropdown-cta"><a href="#"><i class="material-icons">share</i>Share</a></li> </ul> </div> </div> </div> <div class="yoo-card-body"> <div class="yoo-padd-lr-20"> <div class="yoo-height-b20 yoo-height-lg-b20"></div> <ul class="yoo-list-group yoo-style1 yoo-type1 yoo-mp0"> <li> <div class="yoo-medias yoo-style1 yoo-type1"> <div class="yoo-media-img"> <div class="yoo-box-md yoo-radious50 yoo-img-box yoo-user-img"><img src="assets/img/user/9.png" alt=""></div> </div> <div class="yoo-media-meta"> <h2 class="yoo-media-title yoo-margin-bottom-0">Deborah Clarke</h2> <div class="yoo-media-subtitle">dc@gmail.com</div> </div> <span class="badge badge-light">Sign Up</span> </div> </li> <li> <div class="yoo-medias yoo-style1 yoo-type1"> <div class="yoo-media-img"> <div class="yoo-box-md yoo-radious50 yoo-img-box yoo-user-img"><img src="assets/img/user/10.png" alt=""></div> </div> <div class="yoo-media-meta"> <h2 class="yoo-media-title yoo-margin-bottom-0">Jay Bryant</h2> <div class="yoo-media-subtitle">jb@gmail.com</div> </div> <span class="badge badge-light">Sign Up</span> </div> </li> <li> <div class="yoo-medias yoo-style1 yoo-type1"> <div class="yoo-media-img"> <div class="yoo-box-md yoo-radious50 yoo-img-box yoo-user-img"><img src="assets/img/user/11.png" alt=""></div> </div> <div class="yoo-media-meta"> <h2 class="yoo-media-title yoo-margin-bottom-0">Rita Parks</h2> <div class="yoo-media-subtitle">rp@gmail.com</div> </div> <span class="badge badge-light">Subscribe</span> </div> </li> <li> <div class="yoo-medias yoo-style1 yoo-type1"> <div class="yoo-media-img"> <div class="yoo-box-md yoo-radious50 yoo-img-box yoo-user-img"><img src="assets/img/user/12.png" alt=""></div> </div> <div class="yoo-media-meta"> <h2 class="yoo-media-title yoo-margin-bottom-0">Eula Bailey</h2> <div class="yoo-media-subtitle">eb@gmail.com</div> </div> <span class="badge badge-light">Sign Up</span> </div> </li> <li> <div class="yoo-medias yoo-style1 yoo-type1"> <div class="yoo-media-img"> <div class="yoo-box-md yoo-radious50 yoo-img-box yoo-user-img"><img src="assets/img/user/13.png" alt=""></div> </div> <div class="yoo-media-meta"> <h2 class="yoo-media-title yoo-margin-bottom-0">Darin Osborne</h2> <div class="yoo-media-subtitle">do@gmail.com</div> </div> <span class="badge badge-light">Subscribe</span> </div> </li> </ul> <div class="yoo-height-b20 yoo-height-lg-b20"></div> </div> <hr> <a href="#" class="yoo-btn yoo-style2">SEE ALL <i class="material-icons-outlined">navigate_next</i></a> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> </div> <div class="col-lg-12"> <div class="yoo-card yoo-style1"> <div class="yoo-card-heading"> <div class="yoo-card-heading-left"> <h2 class="yoo-card-title">Data Table</h2> </div> <div class="yoo-card-heading-right"> <div class="yoo-toggle-body yoo-profile-nav yoo-style1"> <div class="yoo-toggle-btn yoo-card-toggle-btn" data-ripple="ripple" data-ripple-color="#666"><i class="material-icons">more_vert</i></div> <ul class="yoo-dropdown yoo-style1"> <li> <a href="#"><i class="material-icons">watch_later</i>Activity</a> </li> <li> <a href="#"><i class="material-icons">settings</i>Settings</a> </li> <li> <a href="#"><i class="material-icons">flag</i>Report</a> </li> <li> <a href="#"><i class="material-icons">help</i>Help</a> </li> <li class="yoo-dropdown-cta"><a href="#"><i class="material-icons">share</i>Share</a></li> </ul> </div> </div> </div> <div class="yoo-card-body"> <div class=""> <div class="yoo-height-b15 yoo-height-lg-b15"></div> <div class="yoo-table-heading yoo-style1 yoo-padd-lr-20"> <div class="yoo-table-heading-left"> <form action="#" class="yoo-search yoo-style1 yoo-search-md"> <input type="text" placeholder="Search..." class="yoo-search-input"> <button class="yoo-search-submit"><i class="material-icons">search</i></button> </form> </div> <div class="yoo-table-heading-right"> <ul class="yoo-table-heading-btn-list yoo-mp0"> <li> <div class="yoo-page-number">15 of 31</div> </li> <li> <nav> <ul class="pagination"> <li class="page-item active"> <a class="page-link" href="#"> <span><i class="material-icons">chevron_left</i></span> <span class="sr-only">Previous</span> </a> </li> <li class="page-item"> <a class="page-link" href="#"> <span><i class="material-icons">chevron_right</i></span> <span class="sr-only">Next</span> </a> </li> </ul> </nav> </li> <li> <button class="btn btn-outline-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown" data-ripple="ripple" data-ripple-color="#666">Small button</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </li> <li> <button type="button" class="btn btn-primary btn-sm" data-ripple="ripple" data-ripple-color="#fff"><i class="ion ion-md-add"></i> Create New</button> </li> </ul> </div> </div> <div class="yoo-height-b15 yoo-height-lg-b15"></div> <div class="yoo-table yoo-style1 yoo-type2"> <table class="table table-bordered table-hover"> <thead> <tr> <th> <div class="yoo-check-mark-all"> <span class="yoo-first"></span> <span class="yoo-last"></span> </div> </th> <th>Status</th> <th>Campaign Name <button class="yoo-table-info-btn yoo-style1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons-outlined">info</i></button> <div class="dropdown-menu yoo-table-info-text"> Is it more important for something to be subscriber-defined or to be compelling? Our technology takes the best features of XForms and OWL. </div> </th> <th>Single</th> <th>Double</th> <th>Completion</th> <th>Users</th> <th>Tag</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td> <div class="yoo-check-mark"></div> </td> <td> <label class="yoo-material-switch"> <input type="checkbox"> <span></span> <b></b> </label> </td> <td> <div class="yoo-table-medias yoo-style1"> <a href="#" class="yoo-media-img"> <div class="yoo-box-sm yoo-radious5"> <img src="assets/img/nav-icon/google.png" alt=""> </div> </a> <h2 class="yoo-media-title yoo-margin-bottom-0"><a href="#">Google</a></h2> </div> </td> <td><span class="yoo-base-color1">$60</span></td> <td> <div class="yoo-line-1-2 yoo-base-color1">$70</div> <div class="yoo-font-size-13 yoo-base-color2">Multiple Value</div> </td> <td> <div class="yoo-progress-wrap yoo-style3 yoo-type1"> <div class="yoo-progress-head"> <div class="yoo-progressbar-percentage">65%</div> </div> <div class="progress"> <div class="progress-bar yoo-gray-bg" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </td> <td> <ul class="yoo-users yoo-style1 yoo-mp0"> <li><a href="#"><img src="assets/img/user/7.jpg" alt="2"></a></li> <li><a href="#"><img src="assets/img/user/2.jpg" alt="4"></a></li> </ul> </td> <td><span class="badge badge-light">Paid</span></td> <td> <button class="yoo-table-action-btn yoo-style1 dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-ripple="ripple" data-ripple-color="#3f51ae"><i class="material-icons">more_horiz</i></button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">View</a> <a class="dropdown-item" href="#">Edit</a> <a class="dropdown-item" href="#">Delete</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Export</a> </div> </td> </tr> <tr> <td> <div class="yoo-check-mark"></div> </td> <td> <label class="yoo-material-switch"> <input type="checkbox"> <span></span> <b></b> </label> </td> <td> <div class="yoo-table-medias yoo-style1"> <a href="#" class="yoo-media-img"> <div class="yoo-box-sm yoo-radious5"> <img src="assets/img/nav-icon/calendar.png" alt=""> </div> </a> <h2 class="yoo-media-title yoo-margin-bottom-0"><a href="#">Calendar</a></h2> </div> </td> <td><span class="yoo-base-color1">$60</span></td> <td> <div class="yoo-line-1-2 yoo-base-color1">$60</div> <div class="yoo-font-size-13 yoo-base-color2">Multiple Value</div> </td> <td> <div class="yoo-progress-wrap yoo-style3 yoo-type1"> <div class="yoo-progress-head"> <div class="yoo-progressbar-percentage">85%</div> </div> <div class="progress"> <div class="progress-bar yoo-gray-bg" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </td> <td> <ul class="yoo-users yoo-style1 yoo-mp0"> <li><a href="#"><img src="assets/img/user/1.jpg" alt="1"></a></li> <li><a href="#"><img src="assets/img/user/7.jpg" alt="2"></a></li> <li><a href="#"><img src="assets/img/user/5.jpg" alt="4"></a></li> </ul> </td> <td><span class="badge badge-light">Paid</span></td> <td> <button class="yoo-table-action-btn yoo-style1 dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-ripple="ripple" data-ripple-color="#3f51ae"><i class="material-icons">more_horiz</i></button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">View</a> <a class="dropdown-item" href="#">Edit</a> <a class="dropdown-item" href="#">Delete</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Export</a> </div> </td> </tr> <tr> <td> <div class="yoo-check-mark"></div> </td> <td> <label class="yoo-material-switch"> <input type="checkbox"> <span></span> <b></b> </label> </td> <td> <div class="yoo-table-medias yoo-style1"> <a href="#" class="yoo-media-img"> <div class="yoo-box-sm yoo-radious5"> <img src="assets/img/nav-icon/youtube.png" alt=""> </div> </a> <h2 class="yoo-media-title yoo-margin-bottom-0"><a href="#">Youtube</a></h2> </div> </td> <td><span class="yoo-base-color1">$80</span></td> <td> <div class="yoo-line-1-2 yoo-base-color1">$90</div> <div class="yoo-font-size-13 yoo-base-color2">Multiple Value</div> </td> <td> <div class="yoo-progress-wrap yoo-style3 yoo-type1"> <div class="yoo-progress-head"> <div class="yoo-progressbar-percentage">95%</div> </div> <div class="progress"> <div class="progress-bar yoo-gray-bg" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </td> <td> <ul class="yoo-users yoo-style1 yoo-mp0"> <li><a href="#"><img src="assets/img/user/4.jpg" alt="1"></a></li> </ul> </td> <td><span class="badge badge-danger">Due</span></td> <td> <button class="yoo-table-action-btn yoo-style1 dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-ripple="ripple" data-ripple-color="#3f51ae"><i class="material-icons">more_horiz</i></button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">View</a> <a class="dropdown-item" href="#">Edit</a> <a class="dropdown-item" href="#">Delete</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Export</a> </div> </td> </tr>