Material Dashboard 2 PRO by Creative Tim

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png"> <link rel="icon" type="image/png" href="../../assets/img/favicon.png"> <title> Material Dashboard 2 PRO by Creative Tim </title>   <link rel="canonical" href="https://www.creative-tim.com/product/material-dashboard-pro" />  <meta name="keywords" content="creative tim, html dashboard, html css dashboard, web dashboard, bootstrap 5 dashboard, bootstrap 5, css3 dashboard, bootstrap 5 admin, material dashboard bootstrap 5 dashboard, frontend, responsive bootstrap 5 dashboard, material design, material dashboard bootstrap 5 dashboard"> <meta name="description" content="Material Dashboard PRO is a beautiful Bootstrap 5 admin dashboard with a large number of components, designed to look beautiful, clean and organized. If you are looking for a tool to manage dates about your business, this dashboard is the thing for you.">  <meta name="twitter:card" content="product"> <meta name="twitter:site" content="@creativetim"> <meta name="twitter:title" content="Material Dashboard PRO by Creative Tim"> <meta name="twitter:description" content="Material Dashboard PRO is a beautiful Bootstrap 5 admin dashboard with a large number of components, designed to look beautiful, clean and organized. If you are looking for a tool to manage dates about your business, this dashboard is the thing for you."> <meta name="twitter:creator" content="@creativetim"> <meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/51/original/opt_mdp_bs5_thumbnail.jpg">  <meta property="fb:app_id" content="655968634437471"> <meta property="og:title" content="Material Dashboard PRO by Creative Tim" /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://demos.creative-tim.com/material-dashboard-pro/pages/dashboards/default.html" /> <meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/51/original/opt_mdp_bs5_thumbnail.jpg" /> <meta property="og:description" content="Material Dashboard PRO is a beautiful Bootstrap 5 admin dashboard with a large number of components, designed to look beautiful, clean and organized. If you are looking for a tool to manage dates about your business, this dashboard is the thing for you." /> <meta property="og:site_name" content="Creative Tim" />  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,900" />  <link href="../../assets/css/nucleo-icons.css" rel="stylesheet" /> <link href="../../assets/css/nucleo-svg.css" rel="stylesheet" />  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer">  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />  <link id="pagestyle" href="../../assets/css/material-dashboard.min.css?v=3.1.0" rel="stylesheet" />  <style> .async-hide { opacity: 0 !important } </style> <script> (function(a, s, y, n, c, h, i, d, e) { s.className += ' ' + y; h.start = 1 * new Date; h.end = i = function() { s.className = s.className.replace(RegExp(' ?' + y), '') }; (a[n] = a[n] || []).hide = h; setTimeout(function() { i(); h.end = null }, c); h.timeout = c; })(window, document.documentElement, 'async-hide', 'dataLayer', 4000, { 'GTM-K9BGS8K': true }); </script>  <script> (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-46172202-22', 'auto', { allowLinker: true }); ga('set', 'anonymizeIp', true); ga('require', 'GTM-K9BGS8K'); ga('require', 'displayfeatures'); ga('require', 'linker'); ga('linker:autoLink', ["2checkout.com", "avangate.com"]); </script>   <script> (function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6'); </script>  </head> <body class="g-sidenav-show bg-gray-100">   <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <aside class="sidenav navbar navbar-vertical navbar-expand-xs border-radius-lg fixed-start ms-2 bg-white my-2" id="sidenav-main"> <div class="sidenav-header"> <i class="fas fa-times p-3 cursor-pointer text-dark opacity-5 position-absolute end-0 top-0 d-none d-xl-none" aria-hidden="true" id="iconSidenav"></i> <a class="navbar-brand px-4 py-3 m-0" href=" https://demos.creative-tim.com/material-dashboard-pro/pages/dashboards/analytics.html " target="_blank"> <img src="../../assets/img/logo-ct-dark.png" class="navbar-brand-img" width="26" height="26" alt="main_logo"> <span class="ms-1 text-sm text-dark">Creative Tim</span> </a> </div> <hr class="horizontal dark mt-0 mb-2"> <div class="collapse navbar-collapse w-auto h-auto" id="sidenav-collapse-main"> <ul class="navbar-nav"> <li class="nav-item mb-2 mt-0"> <a data-bs-toggle="collapse" href="#ProfileNav" class="nav-link text-dark" aria-controls="ProfileNav" role="button" aria-expanded="false"> <img src="../../assets/img/team-3.jpg" class="avatar"> <span class="nav-link-text ms-2 ps-1">Brooklyn Alice</span> </a> <div class="collapse" id="ProfileNav" style=""> <ul class="nav "> <li class="nav-item"> <a class="nav-link text-dark" href="../../pages/pages/profile/overview.html"> <span class="sidenav-mini-icon"> MP </span> <span class="sidenav-normal ms-3 ps-1"> My Profile </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/pages/account/settings.html"> <span class="sidenav-mini-icon"> S </span> <span class="sidenav-normal ms-3 ps-1"> Settings </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/authentication/signin/basic.html"> <span class="sidenav-mini-icon"> L </span> <span class="sidenav-normal ms-3 ps-1"> Logout </span> </a> </li> </ul> </div> </li> <hr class="horizontal dark mt-0"> <li class="nav-item"> <a data-bs-toggle="collapse" href="#dashboardsExamples" class="nav-link text-dark active" aria-controls="dashboardsExamples" role="button" aria-expanded="false"> <i class="material-symbols-rounded opacity-5">space_dashboard</i> <span class="nav-link-text ms-1 ps-1">Dashboards</span> </a> <div class="collapse show " id="dashboardsExamples"> <ul class="nav "> <li class="nav-item active"> <a class="nav-link text-dark active" href="../../pages/dashboards/analytics.html"> <span class="sidenav-mini-icon"> A </span> <span class="sidenav-normal ms-1 ps-1"> Analytics </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/dashboards/discover.html"> <span class="sidenav-mini-icon"> D </span> <span class="sidenav-normal ms-1 ps-1"> Discover </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/dashboards/sales.html"> <span class="sidenav-mini-icon"> S </span> <span class="sidenav-normal ms-1 ps-1"> Sales </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/dashboards/automotive.html"> <span class="sidenav-mini-icon"> A </span> <span class="sidenav-normal ms-1 ps-1"> Automotive </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/dashboards/smart-home.html"> <span class="sidenav-mini-icon"> S </span> <span class="sidenav-normal ms-1 ps-1"> Smart Home </span> </a> </li> </ul> </div> </li> <li class="nav-item mt-3"> <h6 class="ps-3 ms-2 text-uppercase text-xs font-weight-bolder text-dark">PAGES</h6> </li> <li class="nav-item"> <a data-bs-toggle="collapse" href="#pagesExamples" class="nav-link text-dark " aria-controls="pagesExamples" role="button" aria-expanded="false"> <i class="material-symbols-rounded opacity-5 {% if page.brand == 'RTL' %}ms-2{% else %} me-2{% endif %}">contract</i> <span class="nav-link-text ms-1 ps-1">Pages</span> </a> <div class="collapse " id="pagesExamples"> <ul class="nav "> <li class="nav-item "> <a class="nav-link text-dark " data-bs-toggle="collapse" aria-expanded="false" href="#vrExamples"> <span class="sidenav-mini-icon"> V </span> <span class="sidenav-normal ms-1 ps-1"> Virtual Reality <b class="caret"></b></span> </a> <div class="collapse " id="vrExamples"> <ul class="nav nav-sm flex-column"> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/pages/vr/vr-default.html"> <span class="sidenav-mini-icon"> V </span> <span class="sidenav-normal ms-1 ps-1"> VR Default </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/pages/vr/vr-info.html"> <span class="sidenav-mini-icon"> V </span> <span class="sidenav-normal ms-1 ps-1"> VR Info </span> </a> </li> </ul> </div> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/pages/pricing-page.html"> <span class="sidenav-mini-icon"> P </span> <span class="sidenav-normal ms-1 ps-1"> Pricing Page </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/pages/rtl-page.html"> <span class="sidenav-mini-icon"> R </span> <span class="sidenav-normal ms-1 ps-1"> RTL </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/pages/widgets.html"> <span class="sidenav-mini-icon"> W </span> <span class="sidenav-normal ms-1 ps-1"> Widgets </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/pages/charts.html"> <span class="sidenav-mini-icon"> C </span> <span class="sidenav-normal ms-1 ps-1"> Charts </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/pages/sweet-alerts.html"> <span class="sidenav-mini-icon"> S </span> <span class="sidenav-normal ms-1 ps-1"> Sweet Alerts </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/pages/notifications.html"> <span class="sidenav-mini-icon"> N </span> <span class="sidenav-normal ms-1 ps-1"> Notifications </span> </a> </li> </ul> </div> </li> <li class="nav-item"> <a data-bs-toggle="collapse" href="#accountExamples" class="nav-link text-dark " aria-controls="accountExamples" role="button" aria-expanded="false"> <i class="material-symbols-rounded opacity-5 {% if page.brand == 'RTL' %}ms-2{% else %} me-2{% endif %}">account_circle</i> <span class="nav-link-text ms-1 ps-1">Account</span> </a> <div class="collapse " id="accountExamples"> <ul class="nav "> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/account/settings.html"> <span class="sidenav-mini-icon"> S </span> <span class="sidenav-normal ms-1 ps-1"> Settings </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/account/billing.html"> <span class="sidenav-mini-icon"> B </span> <span class="sidenav-normal ms-1 ps-1"> Billing </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/account/invoice.html"> <span class="sidenav-mini-icon"> I </span> <span class="sidenav-normal ms-1 ps-1"> Invoice </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/account/security.html"> <span class="sidenav-mini-icon"> S </span> <span class="sidenav-normal ms-1 ps-1"> Security </span> </a> </li> </ul> </div> </li> <li class="nav-item"> <a data-bs-toggle="collapse" href="#applicationsExamples" class="nav-link text-dark " aria-controls="applicationsExamples" role="button" aria-expanded="false"> <i class="material-symbols-rounded opacity-5 {% if page.brand == 'RTL' %}ms-2{% else %} me-2{% endif %}">apps</i> <span class="nav-link-text ms-1 ps-1">Applications</span> </a> <div class="collapse " id="applicationsExamples"> <ul class="nav "> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/applications/crm.html"> <span class="sidenav-mini-icon"> C </span> <span class="sidenav-normal ms-1 ps-1"> CRM </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/applications/kanban.html"> <span class="sidenav-mini-icon"> K </span> <span class="sidenav-normal ms-1 ps-1"> Kanban </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/applications/wizard.html"> <span class="sidenav-mini-icon"> W </span> <span class="sidenav-normal ms-1 ps-1"> Wizard </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/applications/datatables.html"> <span class="sidenav-mini-icon"> D </span> <span class="sidenav-normal ms-1 ps-1"> DataTables </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/applications/calendar.html"> <span class="sidenav-mini-icon"> C </span> <span class="sidenav-normal ms-1 ps-1"> Calendar </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/applications/stats.html"> <span class="sidenav-mini-icon"> S </span> <span class="sidenav-normal ms-1 ps-1"> Stats </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/applications/validation.html"> <span class="sidenav-mini-icon"> V </span> <span class="sidenav-normal ms-1 ps-1"> Validation </span> </a> </li> </ul> </div> </li> <li class="nav-item"> <a data-bs-toggle="collapse" href="#ecommerceExamples" class="nav-link text-dark " aria-controls="ecommerceExamples" role="button" aria-expanded="false"> <i class="material-symbols-rounded opacity-5 {% if page.brand == 'RTL' %}ms-2{% else %} me-2{% endif %}">storefront</i> <span class="nav-link-text ms-1 ps-1">Ecommerce</span> </a> <div class="collapse " id="ecommerceExamples"> <ul class="nav "> <li class="nav-item "> <a class="nav-link text-dark " data-bs-toggle="collapse" aria-expanded="false" href="#productsExample"> <span class="sidenav-mini-icon"> P </span> <span class="sidenav-normal ms-1 ps-1"> Products <b class="caret"></b></span> </a> <div class="collapse " id="productsExample"> <ul class="nav nav-sm flex-column"> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/ecommerce/products/new-product.html"> <span class="sidenav-mini-icon"> N </span> <span class="sidenav-normal ms-1 ps-1"> New Product </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/ecommerce/products/edit-product.html"> <span class="sidenav-mini-icon"> E </span> <span class="sidenav-normal ms-1 ps-1"> Edit Product </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/ecommerce/products/product-page.html"> <span class="sidenav-mini-icon"> P </span> <span class="sidenav-normal ms-1 ps-1"> Product Page </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/ecommerce/products/products-list.html"> <span class="sidenav-mini-icon"> P </span> <span class="sidenav-normal ms-1 ps-1"> Products List </span> </a> </li> </ul> </div> </li> <li class="nav-item "> <a class="nav-link text-dark " data-bs-toggle="collapse" aria-expanded="false" href="#ordersExample"> <span class="sidenav-mini-icon"> O </span> <span class="sidenav-normal ms-1 ps-1"> Orders <b class="caret"></b></span> </a> <div class="collapse " id="ordersExample"> <ul class="nav nav-sm flex-column"> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/ecommerce/orders/list.html"> <span class="sidenav-mini-icon"> O </span> <span class="sidenav-normal ms-1 ps-1"> Order List </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/ecommerce/orders/details.html"> <span class="sidenav-mini-icon"> O </span> <span class="sidenav-normal ms-1 ps-1"> Order Details </span> </a> </li> </ul> </div> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/ecommerce/referral.html"> <span class="sidenav-mini-icon"> R </span> <span class="sidenav-normal ms-1 ps-1"> Referral </span> </a> </li> </ul> </div> </li> <li class="nav-item"> <a data-bs-toggle="collapse" href="#profileExamples" class="nav-link text-dark " aria-controls="profileExamples" role="button" aria-expanded="false"> <i class="material-symbols-rounded opacity-5 {% if page.brand == 'RTL' %}ms-2{% else %} me-2{% endif %}">group</i> <span class="nav-link-text ms-1 ps-1">Team</span> </a> <div class="collapse " id="profileExamples"> <ul class="nav "> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/team/all-projects.html"> <span class="sidenav-mini-icon"> A </span> <span class="sidenav-normal ms-1 ps-1"> All Projects </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/team/messages.html"> <span class="sidenav-mini-icon"> M </span> <span class="sidenav-normal ms-1 ps-1"> Messages </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/team/new-user.html"> <span class="sidenav-mini-icon"> N </span> <span class="sidenav-normal ms-1 ps-1"> New User </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/team/profile-overview.html"> <span class="sidenav-mini-icon"> P </span> <span class="sidenav-normal ms-1 ps-1"> Profile Overview </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/team/reports.html"> <span class="sidenav-mini-icon"> R </span> <span class="sidenav-normal ms-1 ps-1"> Reports </span> </a> </li> </ul> </div> </li> <li class="nav-item"> <a data-bs-toggle="collapse" href="#projectsExamples" class="nav-link text-dark " aria-controls="projectsExamples" role="button" aria-expanded="false"> <i class="material-symbols-rounded opacity-5 {% if page.brand == 'RTL' %}ms-2{% else %} me-2{% endif %}">widgets</i> <span class="nav-link-text ms-1 ps-1">Projects</span> </a> <div class="collapse " id="projectsExamples"> <ul class="nav "> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/projects/general.html"> <span class="sidenav-mini-icon"> G </span> <span class="sidenav-normal ms-1 ps-1"> General </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/projects/timeline.html"> <span class="sidenav-mini-icon"> T </span> <span class="sidenav-normal ms-1 ps-1"> Timeline </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="../../pages/projects/new-project.html"> <span class="sidenav-mini-icon"> N </span> <span class="sidenav-normal ms-1 ps-1"> New Project </span> </a> </li> </ul> </div> </li> <li class="nav-item"> <a data-bs-toggle="collapse" href="#authExamples" class="nav-link text-dark " aria-controls="authExamples" role="button" aria-expanded="false"> <i class="material-symbols-rounded opacity-5 {% if page.brand == 'RTL' %}ms-2{% else %} me-2{% endif %}">tv_signin</i> <span class="nav-link-text ms-1 ps-1">Authentication</span> </a> <div class="collapse " id="authExamples"> <ul class="nav "> <li class="nav-item "> <a class="nav-link text-dark " data-bs-toggle="collapse" aria-expanded="false" href="#signinExample"> <span class="sidenav-mini-icon"> S </span> <span class="sidenav-normal ms-1 ps-1"> Sign In <b class="caret"></b></span> </a> <div class="collapse " id="signinExample"> <ul class="nav nav-sm flex-column"> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/authentication/signin/basic.html"> <span class="sidenav-mini-icon"> B </span> <span class="sidenav-normal ms-1 ps-1"> Basic </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/authentication/signin/cover.html"> <span class="sidenav-mini-icon"> C </span> <span class="sidenav-normal ms-1 ps-1"> Cover </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/authentication/signin/illustration.html"> <span class="sidenav-mini-icon"> I </span> <span class="sidenav-normal ms-1 ps-1"> Illustration </span> </a> </li> </ul> </div> </li> <li class="nav-item "> <a class="nav-link text-dark " data-bs-toggle="collapse" aria-expanded="false" href="#signupExample"> <span class="sidenav-mini-icon"> S </span> <span class="sidenav-normal ms-1 ps-1"> Sign Up <b class="caret"></b></span> </a> <div class="collapse " id="signupExample"> <ul class="nav nav-sm flex-column"> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/authentication/signup/basic.html"> <span class="sidenav-mini-icon"> B </span> <span class="sidenav-normal ms-1 ps-1"> Basic </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/authentication/signup/cover.html"> <span class="sidenav-mini-icon"> C </span> <span class="sidenav-normal ms-1 ps-1"> Cover </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/authentication/signup/illustration.html"> <span class="sidenav-mini-icon"> I </span> <span class="sidenav-normal ms-1 ps-1"> Illustration </span> </a> </li> </ul> </div> </li> <li class="nav-item "> <a class="nav-link text-dark " data-bs-toggle="collapse" aria-expanded="false" href="#resetExample"> <span class="sidenav-mini-icon"> R </span> <span class="sidenav-normal ms-1 ps-1"> Reset Password <b class="caret"></b></span> </a> <div class="collapse " id="resetExample"> <ul class="nav nav-sm flex-column"> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/authentication/reset/basic.html"> <span class="sidenav-mini-icon"> B </span> <span class="sidenav-normal ms-1 ps-1"> Basic </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/authentication/reset/cover.html"> <span class="sidenav-mini-icon"> C </span> <span class="sidenav-normal ms-1 ps-1"> Cover </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/authentication/reset/illustration.html"> <span class="sidenav-mini-icon"> I </span> <span class="sidenav-normal ms-1 ps-1"> Illustration </span> </a> </li> </ul> </div> </li> <li class="nav-item "> <a class="nav-link text-dark " data-bs-toggle="collapse" aria-expanded="false" href="#lockExample"> <span class="sidenav-mini-icon"> L </span> <span class="sidenav-normal ms-1 ps-1"> Lock <b class="caret"></b></span> </a> <div class="collapse " id="lockExample"> <ul class="nav nav-sm flex-column"> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/authentication/lock/basic.html"> <span class="sidenav-mini-icon"> B </span> <span class="sidenav-normal ms-1 ps-1"> Basic </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/authentication/lock/cover.html"> <span class="sidenav-mini-icon"> C </span> <span class="sidenav-normal ms-1 ps-1"> Cover </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/authentication/lock/illustration.html"> <span class="sidenav-mini-icon"> I </span> <span class="sidenav-normal ms-1 ps-1"> Illustration </span> </a> </li> </ul> </div> </li> <li class="nav-item "> <a class="nav-link text-dark " data-bs-toggle="collapse" aria-expanded="false" href="#StepExample"> <span class="sidenav-mini-icon"> 2 </span> <span class="sidenav-normal ms-1 ps-1"> 2-Step Verification <b class="caret"></b></span> </a> <div class="collapse " id="StepExample"> <ul class="nav nav-sm flex-column"> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/authentication/verification/basic.html"> <span class="sidenav-mini-icon"> B </span> <span class="sidenav-normal ms-1 ps-1"> Basic </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/authentication/verification/cover.html"> <span class="sidenav-mini-icon"> C </span> <span class="sidenav-normal ms-1 ps-1"> Cover </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/authentication/verification/illustration.html"> <span class="sidenav-mini-icon"> I </span> <span class="sidenav-normal ms-1 ps-1"> Illustration </span> </a> </li> </ul> </div> </li> <li class="nav-item "> <a class="nav-link text-dark " data-bs-toggle="collapse" aria-expanded="false" href="#errorExample"> <span class="sidenav-mini-icon"> E </span> <span class="sidenav-normal ms-1 ps-1"> Error <b class="caret"></b></span> </a> <div class="collapse " id="errorExample"> <ul class="nav nav-sm flex-column"> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/authentication/error/404.html"> <span class="sidenav-mini-icon"> E </span> <span class="sidenav-normal ms-1 ps-1"> Error 404 </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="../../pages/authentication/error/500.html"> <span class="sidenav-mini-icon"> E </span> <span class="sidenav-normal ms-1 ps-1"> Error 500 </span> </a> </li> </ul> </div> </li> </ul> </div> </li> <li class="nav-item"> <hr class="horizontal dark" /> <h6 class="ps-3 ms-2 text-uppercase text-xs font-weight-bolder text-dark">DOCS</h6> </li> <li class="nav-item"> <a data-bs-toggle="collapse" href="#basicExamples" class="nav-link text-dark " aria-controls="basicExamples" role="button" aria-expanded="false"> <i class="material-symbols-rounded opacity-5 {% if page.brand == 'RTL' %}ms-2{% else %} me-2{% endif %}">upcoming</i> <span class="nav-link-text ms-1 ps-1">Basic</span> </a> <div class="collapse " id="basicExamples"> <ul class="nav "> <li class="nav-item "> <a class="nav-link text-dark " data-bs-toggle="collapse" aria-expanded="false" href="#gettingStartedExample"> <span class="sidenav-mini-icon"> G </span> <span class="sidenav-normal ms-1 ps-1"> Getting Started <b class="caret"></b></span> </a> <div class="collapse " id="gettingStartedExample"> <ul class="nav nav-sm flex-column"> <li class="nav-item"> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/quick-start/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> Q </span> <span class="sidenav-normal ms-1 ps-1"> Quick Start </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/license/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> L </span> <span class="sidenav-normal ms-1 ps-1"> License </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/overview/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> C </span> <span class="sidenav-normal ms-1 ps-1"> Contents </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/build-tools/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> B </span> <span class="sidenav-normal ms-1 ps-1"> Build Tools </span> </a> </li> </ul> </div> </li> <li class="nav-item "> <a class="nav-link text-dark " data-bs-toggle="collapse" aria-expanded="false" href="#foundationExample"> <span class="sidenav-mini-icon"> F </span> <span class="sidenav-normal ms-1 ps-1"> Foundation <b class="caret"></b></span> </a> <div class="collapse " id="foundationExample"> <ul class="nav nav-sm flex-column"> <li class="nav-item"> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/colors/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> C </span> <span class="sidenav-normal ms-1 ps-1"> Colors </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/grid/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> G </span> <span class="sidenav-normal ms-1 ps-1"> Grid </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/typography/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> T </span> <span class="sidenav-normal ms-1 ps-1"> Typography </span> </a> </li> <li class="nav-item"> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/icons/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> I </span> <span class="sidenav-normal ms-1 ps-1"> Icons </span> </a> </li> </ul> </div> </li> </ul> </div> </li> <li class="nav-item"> <a data-bs-toggle="collapse" href="#componentsExamples" class="nav-link text-dark " aria-controls="componentsExamples" role="button" aria-expanded="false"> <i class="material-symbols-rounded opacity-5 {% if page.brand == 'RTL' %}ms-2{% else %} me-2{% endif %}">view_in_ar</i> <span class="nav-link-text ms-1 ps-1">Components</span> </a> <div class="collapse " id="componentsExamples"> <ul class="nav "> <li class="nav-item "> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/alerts/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> A </span> <span class="sidenav-normal ms-1 ps-1"> Alerts </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/badge/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> B </span> <span class="sidenav-normal ms-1 ps-1"> Badge </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/buttons/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> B </span> <span class="sidenav-normal ms-1 ps-1"> Buttons </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/cards/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> C </span> <span class="sidenav-normal ms-1 ps-1"> Card </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/carousel/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> C </span> <span class="sidenav-normal ms-1 ps-1"> Carousel </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/collapse/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> C </span> <span class="sidenav-normal ms-1 ps-1"> Collapse </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/dropdowns/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> D </span> <span class="sidenav-normal ms-1 ps-1"> Dropdowns </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/forms/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> F </span> <span class="sidenav-normal ms-1 ps-1"> Forms </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/modal/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> M </span> <span class="sidenav-normal ms-1 ps-1"> Modal </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/navs/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> N </span> <span class="sidenav-normal ms-1 ps-1"> Navs </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/navbar/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> N </span> <span class="sidenav-normal ms-1 ps-1"> Navbar </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/pagination/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> P </span> <span class="sidenav-normal ms-1 ps-1"> Pagination </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/popovers/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> P </span> <span class="sidenav-normal ms-1 ps-1"> Popovers </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/progress/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> P </span> <span class="sidenav-normal ms-1 ps-1"> Progress </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/spinners/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> S </span> <span class="sidenav-normal ms-1 ps-1"> Spinners </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/tables/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> T </span> <span class="sidenav-normal ms-1 ps-1"> Tables </span> </a> </li> <li class="nav-item "> <a class="nav-link text-dark " href="https://www.creative-tim.com/learning-lab/bootstrap/tooltips/material-dashboard" target="_blank"> <span class="sidenav-mini-icon"> T </span> <span class="sidenav-normal ms-1 ps-1"> Tooltips </span> </a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link text-dark" href="https://github.com/creativetimofficial/ct-material-dashboard-pro/blob/master/CHANGELOG.md" target="_blank"> <i class="material-symbols-rounded opacity-5 {% if page.brand == 'RTL' %}ms-2{% else %} me-2{% endif %}">receipt_long</i> <span class="nav-link-text ms-1 ps-1">Changelog</span> </a> </li> </ul> </div> </aside> <main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">  <nav class="navbar navbar-main navbar-expand-lg position-sticky mt-2 top-1 px-0 py-1 mx-3 shadow-none border-radius-lg z-index-sticky" id="navbarBlur" data-scroll="true"> <div class="container-fluid py-1 px-2"> <div class="sidenav-toggler sidenav-toggler-inner d-xl-block d-none "> <a href="javascript:;" class="nav-link text-body p-0"> <div class="sidenav-toggler-inner"> <i class="sidenav-toggler-line"></i> <i class="sidenav-toggler-line"></i> <i class="sidenav-toggler-line"></i> </div> </a> </div> <nav aria-label="breadcrumb" class="ps-2"> <ol class="breadcrumb bg-transparent mb-0 p-0"> <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="javascript:;">Pages</a></li> <li class="breadcrumb-item text-sm text-dark active font-weight-bold" aria-current="page">Analytics</li> </ol> </nav> <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar"> <div class="ms-md-auto pe-md-3 d-flex align-items-center"> <div class="input-group input-group-outline"> <label class="form-label">Search here</label> <input type="text" class="form-control"> </div> </div> <ul class="navbar-nav justify-content-end"> <li class="nav-item"> <a href="../../pages/authentication/signin/illustration.html" class="px-1 py-0 nav-link line-height-0" target="_blank"> <i class="material-symbols-rounded"> account_circle </i> </a> </li> <li class="nav-item"> <a href="javascript:;" class="nav-link py-0 px-1 line-height-0"> <i class="material-symbols-rounded fixed-plugin-button-nav"> settings </i> </a> </li> <li class="nav-item dropdown py-0 pe-3"> <a href="javascript:;" class="nav-link py-0 px-1 position-relative line-height-0" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> <i class="material-symbols-rounded"> notifications </i> <span class="position-absolute top-5 start-100 translate-middle badge rounded-pill bg-danger border border-white small py-1 px-2"> <span class="small">11</span> <span class="visually-hidden">unread notifications</span> </span> </a> <ul class="dropdown-menu dropdown-menu-end p-2 me-sm-n4" aria-labelledby="dropdownMenuButton"> <li class="mb-2"> <a class="dropdown-item border-radius-md" href="javascript:;"> <div class="d-flex align-items-center py-1"> <span class="material-symbols-rounded">email</span> <div class="ms-2"> <h6 class="text-sm font-weight-normal my-auto"> Check new messages </h6> </div> </div> </a> </li> <li class="mb-2"> <a class="dropdown-item border-radius-md" href="javascript:;"> <div class="d-flex align-items-center py-1"> <span class="material-symbols-rounded">podcasts</span> <div class="ms-2"> <h6 class="text-sm font-weight-normal my-auto"> Manage podcast session </h6> </div> </div> </a> </li> <li> <a class="dropdown-item border-radius-md" href="javascript:;"> <div class="d-flex align-items-center py-1"> <span class="material-symbols-rounded">shopping_cart</span> <div class="ms-2"> <h6 class="text-sm font-weight-normal my-auto"> Payment successfully completed </h6> </div> </div> </a> </li> </ul> </li> <li class="nav-item d-xl-none ps-3 d-flex align-items-center"> <a href="javascript:;" class="nav-link text-body p-0" id="iconNavbarSidenav"> <div class="sidenav-toggler-inner"> <i class="sidenav-toggler-line"></i> <i class="sidenav-toggler-line"></i> <i class="sidenav-toggler-line"></i> </div> </a> </li> </ul> </div> </div> </nav>  <div class="container-fluid py-2"> <div class="row"> <div class="col-lg-12 position-relative z-index-2"> <div class="ms-3"> <h3 class="mb-0 h4 font-weight-bolder">Analytics</h3> <p class="mb-4"> Check the sales, value and bounce rate by country. </p> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="card"> <div class="card-body"> <h6 class="mb-0 ">Website Views</h6> <p class="text-sm ">Last Campaign Performance</p> <div class="pe-2"> <div class="chart"> <canvas id="chart-bars" class="chart-canvas" height="170"></canvas> </div> </div> <hr class="dark horizontal"> <div class="d-flex "> <i class="material-symbols-rounded text-sm my-auto me-1">schedule</i> <p class="mb-0 text-sm"> campaign sent 2 days ago </p> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="card "> <div class="card-body"> <h6 class="mb-0 "> Daily Sales </h6> <p class="text-sm "> (<span class="font-weight-bolder">+15%</span>) increase in today sales. </p> <div class="pe-2"> <div class="chart"> <canvas id="chart-line" class="chart-canvas" height="170"></canvas> </div> </div> <hr class="dark horizontal"> <div class="d-flex "> <i class="material-symbols-rounded text-sm my-auto me-1">schedule</i> <p class="mb-0 text-sm"> updated 4 min ago </p> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="card"> <div class="card-body"> <h6 class="mb-0 ">Completed Tasks</h6> <p class="text-sm ">Last Campaign Performance</p> <div class="pe-2"> <div class="chart"> <canvas id="chart-line-tasks" class="chart-canvas" height="170"></canvas> </div> </div> <hr class="dark horizontal"> <div class="d-flex "> <i class="material-symbols-rounded text-sm my-auto me-1">schedule</i> <p class="mb-0 text-sm">just updated</p> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-3 col-md-6 col-sm-6"> <div class="card mb-2"> <div class="card-header p-2 ps-3"> <div class="d-flex justify-content-between"> <div> <p class="text-sm mb-0 text-capitalize">Bookings</p> <h4 class="mb-0">281</h4> </div> <div class="icon icon-md icon-shape bg-gradient-dark shadow-dark shadow text-center border-radius-lg"> <i class="material-symbols-rounded opacity-10">weekend</i> </div> </div> </div> <hr class="dark horizontal my-0"> <div class="card-footer p-2 ps-3"> <p class="mb-0 text-sm"><span class="text-success font-weight-bolder">+55% </span>than last week</p> </div> </div> </div> <div class="col-lg-3 col-md-6 col-sm-6"> <div class="card mb-2"> <div class="card-header p-2 ps-3"> <div class="d-flex justify-content-between"> <div> <p class="text-sm mb-0 text-capitalize">Today's Users</p> <h4 class="mb-0">2,300</h4> </div> <div class="icon icon-md icon-shape bg-gradient-dark shadow-dark shadow text-center border-radius-lg"> <i class="material-symbols-rounded opacity-10">leaderboard</i> </div> </div> </div> <hr class="dark horizontal my-0"> <div class="card-footer p-2 ps-3"> <p class="mb-0 text-sm"><span class="text-success font-weight-bolder">+3% </span>than last month</p> </div> </div> </div> <div class="col-lg-3 col-md-6 col-sm-6"> <div class="card mb-2"> <div class="card-header p-2 ps-3"> <div class="d-flex justify-content-between"> <div> <p class="text-sm mb-0 text-capitalize">Revenue</p> <h4 class="mb-0">$34,000</h4> </div> <div class="icon icon-md icon-shape bg-gradient-dark shadow-dark shadow text-center border-radius-lg"> <i class="material-symbols-rounded opacity-10">store</i> </div> </div> </div> <hr class="dark horizontal my-0"> <div class="card-footer p-2 ps-3"> <p class="mb-0 text-sm"><span class="text-success font-weight-bolder">+35% </span>than last month</p> </div> </div> </div> <div class="col-lg-3 col-md-6 col-sm-6"> <div class="card mb-2"> <div class="card-header p-2 ps-3"> <div class="d-flex justify-content-between"> <div> <p class="text-sm mb-0 text-capitalize">Followers</p> <h4 class="mb-0">+2,910</h4> </div> <div class="icon icon-md icon-shape bg-gradient-dark shadow-dark shadow text-center border-radius-lg"> <i class="material-symbols-rounded opacity-10">person_add</i> </div> </div> </div> <hr class="dark horizontal my-0"> <div class="card-footer p-2 ps-3"> <p class="mb-0 text-sm">Just updated</p> </div> </div> </div> </div> <div class="row mt-3"> <div class="col-lg-4 col-md-6"> <div class="card" data-animation="true"> <div class="card-header p-2 position-relative z-index-2 bg-transparent"> <a class="d-block blur-shadow-image"> <img src="https://images.unsplash.com/photo-1527547637224-a93d42c7b332?q=80&w=1200&auto=format&fit=crop" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg"> </a> <div class="colored-shadow" style="background-image: url(https://images.unsplash.com/photo-1527547637224-a93d42c7b332?q=80&w=1200&auto=format&fit=crop"></div> </div> <div class="card-body text-left"> <div class="d-flex mt-n6 mx-auto"> <a class="btn btn-link text-primary ms-auto border-0" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Refresh"> <i class="material-symbols-rounded text-lg">refresh</i> </a> <button class="btn btn-link text-info me-auto border-0" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Edit"> <i class="material-symbols-rounded text-lg">edit</i> </button> </div> <h5 class="font-weight-bold mt-3"> <a href="javascript:;">Cozy 5 Stars Apartment</a> </h5> <p class="mb-0 text-sm"> The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona. </p> </div> <hr class="dark horizontal my-0"> <div class="card-footer d-flex justify-content-between align-items-center"> <div class="d-flex align-items-center"> <i class="material-symbols-rounded text-lg me-1">place</i> <p class="text-sm my-auto">Barcelona, Spain</p> </div> <p class="font-weight-bold text-dark my-auto">$899/night</p> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="card" data-animation="true"> <div class="card-header p-2 position-relative z-index-2 bg-transparent"> <a class="d-block blur-shadow-image"> <img src="https://images.unsplash.com/photo-1622485480253-8abe11c61751?q=80&w=1200&auto=format&fit=crop" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg"> </a> <div class="colored-shadow" style="background-image: url(https://images.unsplash.com/photo-1622485480253-8abe11c61751?q=80&w=1200&auto=format&fit=crop);"></div> </div> <div class="card-body text-left"> <div class="d-flex mt-n6 mx-auto"> <a class="btn btn-link text-primary ms-auto border-0" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Refresh"> <i class="material-symbols-rounded text-lg">refresh</i> </a> <button class="btn btn-link text-info me-auto border-0" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Edit"> <i class="material-symbols-rounded text-lg">edit</i> </button> </div> <h5 class="font-weight-bold mt-3"> <a href="javascript:;">Tibetan Buddhist Temple</a> </h5> <p class="mb-0 text-sm"> Join our unique experience to visit the Tibetan Buddhist Temple in the center of Bali. You will be guided by a local monk and learn about it. </p> </div> <hr class="dark horizontal my-0"> <div class="card-footer d-flex justify-content-between align-items-center"> <div class="d-flex align-items-center"> <i class="material-symbols-rounded text-lg me-1">place</i> <p class="text-sm my-auto">Ubud, Bali</p> </div> <p class="font-weight-bold text-dark my-auto">$1,119/night</p> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="card" data-animation="true"> <div class="card-header p-2 position-relative z-index-2 bg-transparent"> <a class="d-block blur-shadow-image"> <img src="https://images.unsplash.com/photo-1527246201253-ce566026066e?q=80&w=1200&auto=format&fit=crop" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg"> </a> <div class="colored-shadow" style="background-image: url(https://images.unsplash.com/photo-1527246201253-ce566026066e?q=80&w=1200&auto=format&fit=crop"></div> </div> <div class="card-body text-left"> <div class="d-flex mt-n6 mx-auto"> <a class="btn btn-link text-primary ms-auto border-0" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Refresh"> <i class="material-symbols-rounded text-lg">refresh</i> </a> <button class="btn btn-link text-info me-auto border-0" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Edit"> <i class="material-symbols-rounded text-lg">edit</i> </button> </div> <h5 class="font-weight-bold mt-3"> <a href="javascript:;">Beautiful Castle</a> </h5> <p class="mb-0 text-sm"> The place is close to Metro Station and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Milan. </p> </div> <hr class="dark horizontal my-0"> <div class="card-footer d-flex justify-content-between align-items-center"> <div class="d-flex align-items-center"> <i class="material-symbols-rounded text-lg me-1">place</i> <p class="text-sm my-auto">Milan, Italy</p> </div> <p class="font-weight-bold text-dark my-auto">$499/night</p> </div> </div> </div> </div> <div class="mt-4"> <div class="card mb-4"> <div class="card-header pb-0"> <h6 class="mb-0">Sales by Country</h6> <p class="mb-2 text-sm"> Check the sales, value and bounce rate by country. </p> </div> <div class="card-body p-3"> <div class="row"> <div class="col-lg-6 col-md-7"> <div class="table-responsive"> <table class="table align-items-center"> <thead> <tr> <th class="text-secondary text-sm font-weight-normal text-left p-2">Country</th> <th class="text-secondary text-sm font-weight-normal text-left p-2">Sales</th> <th class="text-secondary text-sm font-weight-normal text-left p-2">Value</th> <th class="text-secondary text-sm font-weight-normal text-left p-2">Bounce</th> </tr> </thead> <tbody> <tr> <td class="w-30"> <div class="d-flex px-2 py-1 align-items-center"> <div> <img src="../../assets/img/icons/flags/US.png" alt="Country flag"> </div> <div class="ms-4"> <h6 class="text-sm font-weight-normal mb-0">United States</h6> </div> </div> </td> <td> <h6 class="text-sm font-weight-normal mb-0">2500</h6> </td> <td> <h6 class="text-sm font-weight-normal mb-0">$230,900</h6> </td> <td class="align-middle text-sm"> <h6 class="text-sm font-weight-normal mb-0">29.9%</h6> </td> </tr> <tr> <td class="w-30"> <div class="d-flex px-2 py-1 align-items-center"> <div> <img src="../../assets/img/icons/flags/DE.png" alt="Country flag"> </div> <div class="ms-4"> <h6 class="text-sm font-weight-normal mb-0">Germany</h6> </div> </div> </td> <td> <h6 class="text-sm font-weight-normal mb-0">3.900</h6> </td> <td> <h6 class="text-sm font-weight-normal mb-0">$440,000</h6> </td> <td class="align-middle text-sm"> <h6 class="text-sm font-weight-normal mb-0">40.22%</h6> </td> </tr> <tr> <td class="w-30"> <div class="d-flex px-2 py-1 align-items-center"> <div> <img src="../../assets/img/icons/flags/GB.png" alt="Country flag"> </div> <div class="ms-4"> <h6 class="text-sm font-weight-normal mb-0">Great Britain</h6> </div> </div> </td> <td> <h6 class="text-sm font-weight-normal mb-0">1.400</h6> </td> <td> <h6 class="text-sm font-weight-normal mb-0">$190,700</h6> </td> <td class="align-middle text-sm"> <h6 class="text-sm font-weight-normal mb-0">23.44%</h6> </td> </tr> <tr> <td class="w-30"> <div class="d-flex px-2 py-1 align-items-center"> <div> <img src="../../assets/img/icons/flags/BR.png" alt="Country flag"> </div> <div class="ms-4"> <h6 class="text-sm font-weight-normal mb-0">Brasil</h6> </div> </div> </td> <td> <h6 class="text-sm font-weight-normal mb-0">562</h6> </td> <td> <h6 class="text-sm font-weight-normal mb-0">$143,960</h6> </td> <td class="align-middle text-sm"> <h6 class="text-sm font-weight-normal mb-0">32.14%</h6> </td> </tr> </tbody> </table> </div> </div> <div class="col-lg-6 col-md-5"> <div id="map" class="mt-0 mt-lg-n4"></div> </div> </div> </div> </div> </div> </div> </div> <footer class="footer py-4 "> <div class="container-fluid"> <div class="row align-items-center justify-content-lg-between"> <div class="col-lg-6 mb-lg-0 mb-4"> <div class="copyright text-center text-sm text-muted text-lg-start"> 漏 <script> document.write(new Date().getFullYear()) </script>, made with <i class="fa fa-heart"></i> by <a href="https://www.creative-tim.com" class="font-weight-bold" target="_blank">Creative Tim</a> for a better web. </div> </div> <div class="col-lg-6"> <ul class="nav nav-footer justify-content-center justify-content-lg-end"> <li class="nav-item"> <a href="https://www.creative-tim.com" class="nav-link text-muted" target="_blank">Creative Tim</a> </li> <li class="nav-item"> <a href="https://www.creative-tim.com/presentation" class="nav-link text-muted" target="_blank">About Us</a> </li> <li class="nav-item"> <a href="https://www.creative-tim.com/blog" class="nav-link text-muted" target="_blank">Blog</a> </li> <li class="nav-item"> <a href="https://www.creative-tim.com/license" class="nav-link pe-0 text-muted" target="_blank">License</a> </li> </ul> </div> </div> </div> </footer> </div> </main> <div class="fixed-plugin"> <a class="fixed-plugin-button text-dark position-fixed px-3 py-2"> <i class="material-symbols-rounded py-2">settings</i> </a> <div class="card shadow-lg"> <div class="card-header pb-0 pt-3"> <div class="float-start"> <h5 class="mt-3 mb-0">Material UI Configurator</h5> <p>See our dashboard options.</p> </div> <div class="float-end mt-4"> <button class="btn btn-link text-dark p-0 fixed-plugin-close-button"> <i class="material-symbols-rounded">clear</i> </button> </div>  </div> <hr class="horizontal dark my-1"> <div class="card-body pt-sm-3 pt-0">  <div> <h6 class="mb-0">Sidebar Colors</h6> </div> <a href="javascript:void(0)" class="switch-trigger background-color"> <div class="badge-colors my-2 text-start"> <span class="badge filter bg-gradient-primary" data-color="primary" onclick="sidebarColor(this)"></span> <span class="badge filter bg-gradient-dark active" data-color="dark" onclick="sidebarColor(this)"></span> <span class="badge filter bg-gradient-info" data-color="info" onclick="sidebarColor(this)"></span> <span class="badge filter bg-gradient-success" data-color="success" onclick="sidebarColor(this)"></span> <span class="badge filter bg-gradient-warning" data-color="warning" onclick="sidebarColor(this)"></span> <span class="badge filter bg-gradient-danger" data-color="danger" onclick="sidebarColor(this)"></span> </div> </a>  <div class="mt-3"> <h6 class="mb-0">Sidenav Type</h6> <p class="text-sm">Choose between different sidenav types.</p> </div> <div class="d-flex"> <button class="btn bg-gradient-dark px-3 mb-2" data-class="bg-gradient-dark" onclick="sidebarType(this)">Dark</button> <button class="btn bg-gradient-dark px-3 mb-2 ms-2" data-class="bg-transparent" onclick="sidebarType(this)">Transparent</button> <button class="btn bg-gradient-dark px-3 mb-2 active ms-2" data-class="bg-white" onclick="sidebarType(this)">White</button> </div> <p class="text-sm d-xl-none d-block mt-2">You can change the sidenav type just on desktop view.</p>  <div class="mt-3 d-flex"> <h6 class="mb-0">Navbar Fixed</h6> <div class="form-check form-switch ps-0 ms-auto my-auto"> <input class="form-check-input mt-1 ms-auto" type="checkbox" id="navbarFixed" onclick="navbarFixed(this)"> </div> </div> <hr class="horizontal dark my-3"> <div class="mt-2 d-flex"> <h6 class="mb-0">Sidenav Mini</h6> <div class="form-check form-switch ps-0 ms-auto my-auto"> <input class="form-check-input mt-1 ms-auto" type="checkbox" id="navbarMinimize" onclick="navbarMinimize(this)"> </div> </div> <hr class="horizontal dark my-3"> <div class="mt-2 d-flex"> <h6 class="mb-0">Light / Dark</h6> <div class="form-check form-switch ps-0 ms-auto my-auto"> <input class="form-check-input mt-1 ms-auto" type="checkbox" id="dark-version" onclick="darkMode(this)"> </div> </div> <hr class="horizontal dark my-sm-4"> <a class="btn bg-gradient-primary w-100" href="https://www.creative-tim.com/product/material-dashboard-pro">Buy now</a> <a class="btn bg-gradient-info w-100" href="https://www.creative-tim.com/product/material-dashboard">Free demo</a> <a class="btn btn-outline-dark w-100" href="https://www.creative-tim.com/learning-lab/bootstrap/overview/material-dashboard">View documentation</a> <div class="w-100 text-center"> <a class="github-button" href="https://github.com/creativetimofficial/material-dashboard" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star creativetimofficial/material-dashboard on GitHub">Star</a> <h6 class="mt-3">Thank you for sharing!</h6> <a href="https://twitter.com/intent/tweet?text=Check%20Material%20UI%20Dashboard%20PRO%20made%20by%20%40CreativeTim%20%23webdesign%20%23dashboard%20%23bootstrap5&url=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fsoft-ui-dashboard-pro" class="btn btn-dark mb-0 me-2" target="_blank"> <i class="fab fa-twitter me-1" aria-hidden="true"></i> Tweet </a> <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.creative-tim.com/product/material-dashboard-pro" class="btn btn-dark mb-0 me-2" target="_blank"> <i class="fab fa-facebook-square me-1" aria-hidden="true"></i> Share </a> </div> </div> </div> </div>  <script src="../../assets/js/core/popper.min.js"></script> <script src="../../assets/js/core/bootstrap.min.js"></script> <script src="../../assets/js/plugins/perfect-scrollbar.min.js"></script> <script src="../../assets/js/plugins/smooth-scrollbar.min.js"></script>  <script src="../../assets/js/plugins/dragula/dragula.min.js"></script> <script src="../../assets/js/plugins/jkanban/jkanban.min.js"></script> <script src="../../assets/js/plugins/chartjs.min.js"></script> <script src="../../assets/js/plugins/world.js"></script> <script> var ctx = document.getElementById("chart-bars").getContext("2d"); new Chart(ctx, { type: "bar", data: { labels: ["M", "T", "W", "T", "F", "S", "S"], datasets: [{ label: "Sales", tension: 0.4, borderWidth: 0, borderRadius: 4, borderSkipped: false, backgroundColor: "#43A047", data: [50, 45, 22, 28, 50, 60, 76], barThickness: 'flex' }, ], }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false, } }, interaction: { intersect: false, mode: 'index', }, scales: { y: { grid: { drawBorder: false, display: true, drawOnChartArea: true, drawTicks: false, borderDash: [5, 5], color: '#e5e5e5' }, ticks: { suggestedMin: 0, suggestedMax: 500, beginAtZero: true, padding: 10, font: { size: 14, lineHeight: 2 }, color: "#737373" }, }, x: { grid: { drawBorder: false, display: false, drawOnChartArea: false, drawTicks: false, borderDash: [5, 5] }, ticks: { display: true, color: '#737373', padding: 10, font: { size: 14, lineHeight: 2 }, } }, }, }, }); var ctx2 = document.getElementById("chart-line").getContext("2d"); new Chart(ctx2, { type: "line", data: { labels: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"], datasets: [{ label: "Mobile apps", tension: 0, borderWidth: 2, pointRadius: 3, pointBackgroundColor: "#43A047", pointBorderColor: "transparent", borderColor: "#43A047", backgroundColor: "transparent", fill: true, data: [120, 230, 130, 440, 250, 360, 270, 180, 90, 300, 310, 220], maxBarThickness: 6 }], }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false, }, tooltip: { callbacks: { title: function(context) { const fullMonths = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; return fullMonths[context[0].dataIndex]; } } } }, interaction: { intersect: false, mode: 'index', }, scales: { y: { grid: { drawBorder: false, display: true, drawOnChartArea: true, drawTicks: false, borderDash: [4, 4], color: '#e5e5e5' }, ticks: { display: true, color: '#737373', padding: 10, font: { size: 12, lineHeight: 2 }, } }, x: { grid: { drawBorder: false, display: false, drawOnChartArea: false, drawTicks: false, borderDash: [5, 5] }, ticks: { display: true, color: '#737373', padding: 10, font: { size: 12, lineHeight: 2 }, } }, }, }, }); var ctx3 = document.getElementById("chart-line-tasks").getContext("2d"); new Chart(ctx3, { type: "line", data: { labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "Mobile apps", tension: 0, borderWidth: 2, pointRadius: 3, pointBackgroundColor: "#43A047", pointBorderColor: "transparent", borderColor: "#43A047", backgroundColor: "transparent", fill: true, data: [50, 40, 300, 220, 500, 250, 400, 230, 500], maxBarThickness: 6 }], }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false, } }, interaction: { intersect: false, mode: 'index', }, scales: { y: { grid: { drawBorder: false, display: true, drawOnChartArea: true, drawTicks: false, borderDash: [4, 4], color: '#e5e5e5' }, ticks: { display: true, padding: 10, color: '#737373', font: { size: 14, lineHeight: 2 }, } }, x: { grid: { drawBorder: false, display: false, drawOnChartArea: false, drawTicks: false, borderDash: [4, 4] }, ticks: { display: true, color: '#737373', padding: 10, font: { size: 14, lineHeight: 2 }, } }, }, }, }); // Initialize the vector map var map = new jsVectorMap({ selector: "#map", map: "world_merc", zoomOnScroll: false, zoomButtons: false, selectedMarkers: [1, 3], markersSelectable: true, markers: [{ name: "USA", coords: [40.71296415909766, -74.00437720027804] }, { name: "Germany", coords: [51.17661451970939, 10.97947735117339] }, { name: "Brazil", coords: [-7.596735421549542, -54.781694323779185] }, { name: "Russia", coords: [62.318222797104276, 89.81564777631716] }, { name: "China", coords: [22.320178999475512, 114.17161225541399], style: { fill: '#4CAF50' } } ], markerStyle: { initial: { fill: "#333333" }, hover: { fill: "#333333" }, selected: { fill: "#333333" } }, }); </script> <script> var win = navigator.platform.indexOf('Win') > -1; if (win && document.querySelector('#sidenav-scrollbar')) { var options = { damping: '0.5' } Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options); } </script>  <script async defer src="https://buttons.github.io/buttons.js"></script>  <script src="../../assets/js/material-dashboard.min.js?v=3.1.0"></script> </body> </html>

CINXE.COM

Material Dashboard 2 PRO by Creative Tim