API tools faq
paste
Advertisement
0xCor3

a

0xCor3
Nov 27th, 2020
1,403
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 18.84 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.   <meta name="description" content="Start your development with a Dashboard for Bootstrap 4.">
  8.   <meta name="author" content="Creative Tim">
  9.   <title>Ngabsen - Dashboard</title>
  10.   <!-- Favicon -->
  11.   <link rel="icon" href="../assets/img/brand/favicon.png" type="image/png">
  12.   <!-- Fonts -->
  13.   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
  14.   <!-- Icons -->
  15.   <link rel="stylesheet" href="../assets/vendor/nucleo/css/nucleo.css" type="text/css">
  16.   <link rel="stylesheet" href="../assets/vendor/@fortawesome/fontawesome-free/css/all.min.css" type="text/css">
  17.   <!-- Page plugins -->
  18.   <!-- Argon CSS -->
  19.   <link rel="stylesheet" href="../assets/css/argon.css?v=1.2.0" type="text/css">
  20. </head>
  21.  
  22. <body>
  23.   <!-- Sidenav -->
  24.   <nav class="sidenav navbar navbar-vertical  fixed-left  navbar-expand-xs navbar-light bg-white" id="sidenav-main">
  25.     <div class="scrollbar-inner">
  26.       <!-- Brand -->
  27.       <div class="sidenav-header  align-items-center">
  28.         <a class="navbar-brand" href="javascript:void(0)">
  29.           <img src="../assets/img/brand/blue.png" class="navbar-brand-img" alt="...">
  30.         </a>
  31.       </div>
  32.       <div class="navbar-inner">
  33.         <!-- Collapse -->
  34.         <div class="collapse navbar-collapse" id="sidenav-collapse-main">
  35.           <!-- Nav items -->
  36.           <ul class="navbar-nav">
  37.             <li class="nav-item">
  38.               <a class="nav-link active" href="dashboard.html">
  39.                 <i class="ni ni-tv-2 text-primary"></i>
  40.                 <span class="nav-link-text">Dashboard</span>
  41.               </a>
  42.             </li>
  43.             <li class="nav-item">
  44.               <a class="nav-link" href="icons.html">
  45.                 <i class="ni ni-planet text-orange"></i>
  46.                 <span class="nav-link-text">Absen Kamu</span>
  47.               </a>
  48.             </li>
  49.           </ul>
  50.         </div>
  51.       </div>
  52.     </div>
  53.   </nav>
  54.   <!-- Main content -->
  55.   <div class="main-content" id="panel">
  56.     <!-- Topnav -->
  57.     <nav class="navbar navbar-top navbar-expand navbar-dark bg-primary border-bottom">
  58.       <div class="container-fluid">
  59.         <div class="collapse navbar-collapse" id="navbarSupportedContent">
  60.           <!-- Navbar links -->
  61.           <ul class="navbar-nav align-items-center  ml-md-auto ">
  62.             <li class="nav-item d-xl-none">
  63.               <!-- Sidenav toggler -->
  64.               <div class="pr-3 sidenav-toggler sidenav-toggler-dark" data-action="sidenav-pin" data-target="#sidenav-main">
  65.                 <div class="sidenav-toggler-inner">
  66.                   <i class="sidenav-toggler-line"></i>
  67.                   <i class="sidenav-toggler-line"></i>
  68.                   <i class="sidenav-toggler-line"></i>
  69.                 </div>
  70.               </div>
  71.             </li>
  72.             <li class="nav-item d-sm-none">
  73.               <a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
  74.                 <i class="ni ni-zoom-split-in"></i>
  75.               </a>
  76.             </li>
  77.             <li class="nav-item dropdown">
  78.               <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  79.                 <i class="ni ni-bell-55"></i>
  80.               </a>
  81.               <div class="dropdown-menu dropdown-menu-xl  dropdown-menu-right  py-0 overflow-hidden">
  82.                 <!-- Dropdown header -->
  83.                 <div class="px-3 py-3">
  84.                   <h6 class="text-sm text-muted m-0">You have <strong class="text-primary">13</strong> notifications.</h6>
  85.                 </div>
  86.                 <!-- List group -->
  87.                 <div class="list-group list-group-flush">
  88.                   <a href="#!" class="list-group-item list-group-item-action">
  89.                     <div class="row align-items-center">
  90.                       <div class="col-auto">
  91.                         <!-- Avatar -->
  92.                         <img alt="Image placeholder" src="../assets/img/theme/team-1.jpg" class="avatar rounded-circle">
  93.                       </div>
  94.                       <div class="col ml--2">
  95.                         <div class="d-flex justify-content-between align-items-center">
  96.                           <div>
  97.                             <h4 class="mb-0 text-sm">John Snow</h4>
  98.                           </div>
  99.                           <div class="text-right text-muted">
  100.                             <small>2 hrs ago</small>
  101.                           </div>
  102.                         </div>
  103.                         <p class="text-sm mb-0">Let's meet at Starbucks at 11:30. Wdyt?</p>
  104.                       </div>
  105.                     </div>
  106.                   </a>
  107.                   <a href="#!" class="list-group-item list-group-item-action">
  108.                     <div class="row align-items-center">
  109.                       <div class="col-auto">
  110.                         <!-- Avatar -->
  111.                         <img alt="Image placeholder" src="../assets/img/theme/team-2.jpg" class="avatar rounded-circle">
  112.                       </div>
  113.                       <div class="col ml--2">
  114.                         <div class="d-flex justify-content-between align-items-center">
  115.                           <div>
  116.                             <h4 class="mb-0 text-sm">John Snow</h4>
  117.                           </div>
  118.                           <div class="text-right text-muted">
  119.                             <small>3 hrs ago</small>
  120.                           </div>
  121.                         </div>
  122.                         <p class="text-sm mb-0">A new issue has been reported for Argon.</p>
  123.                       </div>
  124.                     </div>
  125.                   </a>
  126.                   <a href="#!" class="list-group-item list-group-item-action">
  127.                     <div class="row align-items-center">
  128.                       <div class="col-auto">
  129.                         <!-- Avatar -->
  130.                         <img alt="Image placeholder" src="../assets/img/theme/team-3.jpg" class="avatar rounded-circle">
  131.                       </div>
  132.                       <div class="col ml--2">
  133.                         <div class="d-flex justify-content-between align-items-center">
  134.                           <div>
  135.                             <h4 class="mb-0 text-sm">John Snow</h4>
  136.                           </div>
  137.                           <div class="text-right text-muted">
  138.                             <small>5 hrs ago</small>
  139.                           </div>
  140.                         </div>
  141.                         <p class="text-sm mb-0">Your posts have been liked a lot.</p>
  142.                       </div>
  143.                     </div>
  144.                   </a>
  145.                   <a href="#!" class="list-group-item list-group-item-action">
  146.                     <div class="row align-items-center">
  147.                       <div class="col-auto">
  148.                         <!-- Avatar -->
  149.                         <img alt="Image placeholder" src="../assets/img/theme/team-4.jpg" class="avatar rounded-circle">
  150.                       </div>
  151.                       <div class="col ml--2">
  152.                         <div class="d-flex justify-content-between align-items-center">
  153.                           <div>
  154.                             <h4 class="mb-0 text-sm">John Snow</h4>
  155.                           </div>
  156.                           <div class="text-right text-muted">
  157.                             <small>2 hrs ago</small>
  158.                           </div>
  159.                         </div>
  160.                         <p class="text-sm mb-0">Let's meet at Starbucks at 11:30. Wdyt?</p>
  161.                       </div>
  162.                     </div>
  163.                   </a>
  164.                   <a href="#!" class="list-group-item list-group-item-action">
  165.                     <div class="row align-items-center">
  166.                       <div class="col-auto">
  167.                         <!-- Avatar -->
  168.                         <img alt="Image placeholder" src="../assets/img/theme/team-5.jpg" class="avatar rounded-circle">
  169.                       </div>
  170.                       <div class="col ml--2">
  171.                         <div class="d-flex justify-content-between align-items-center">
  172.                           <div>
  173.                             <h4 class="mb-0 text-sm">John Snow</h4>
  174.                           </div>
  175.                           <div class="text-right text-muted">
  176.                             <small>3 hrs ago</small>
  177.                           </div>
  178.                         </div>
  179.                         <p class="text-sm mb-0">A new issue has been reported for Argon.</p>
  180.                       </div>
  181.                     </div>
  182.                   </a>
  183.                 </div>
  184.                 <!-- View all -->
  185.                 <a href="#!" class="dropdown-item text-center text-primary font-weight-bold py-3">View all</a>
  186.               </div>
  187.             </li>
  188.             <li class="nav-item dropdown">
  189.               <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  190.                 <i class="ni ni-ungroup"></i>
  191.               </a>
  192.               <div class="dropdown-menu dropdown-menu-lg dropdown-menu-dark bg-default  dropdown-menu-right ">
  193.                 <div class="row shortcuts px-4">
  194.                   <a href="#!" class="col-4 shortcut-item">
  195.                     <span class="shortcut-media avatar rounded-circle bg-gradient-red">
  196.                       <i class="ni ni-calendar-grid-58"></i>
  197.                     </span>
  198.                     <small>Calendar</small>
  199.                   </a>
  200.                   <a href="#!" class="col-4 shortcut-item">
  201.                     <span class="shortcut-media avatar rounded-circle bg-gradient-orange">
  202.                       <i class="ni ni-email-83"></i>
  203.                     </span>
  204.                     <small>Email</small>
  205.                   </a>
  206.                   <a href="#!" class="col-4 shortcut-item">
  207.                     <span class="shortcut-media avatar rounded-circle bg-gradient-info">
  208.                       <i class="ni ni-credit-card"></i>
  209.                     </span>
  210.                     <small>Payments</small>
  211.                   </a>
  212.                   <a href="#!" class="col-4 shortcut-item">
  213.                     <span class="shortcut-media avatar rounded-circle bg-gradient-green">
  214.                       <i class="ni ni-books"></i>
  215.                     </span>
  216.                     <small>Reports</small>
  217.                   </a>
  218.                   <a href="#!" class="col-4 shortcut-item">
  219.                     <span class="shortcut-media avatar rounded-circle bg-gradient-purple">
  220.                       <i class="ni ni-pin-3"></i>
  221.                     </span>
  222.                     <small>Maps</small>
  223.                   </a>
  224.                   <a href="#!" class="col-4 shortcut-item">
  225.                     <span class="shortcut-media avatar rounded-circle bg-gradient-yellow">
  226.                       <i class="ni ni-basket"></i>
  227.                     </span>
  228.                     <small>Shop</small>
  229.                   </a>
  230.                 </div>
  231.               </div>
  232.             </li>
  233.           </ul>
  234.           <ul class="navbar-nav align-items-center  ml-auto ml-md-0 ">
  235.             <li class="nav-item dropdown">
  236.               <a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  237.                 <div class="media align-items-center">
  238.                   <span class="avatar avatar-sm rounded-circle">
  239.                     <img alt="Image placeholder" src="../assets/img/theme/team-4.jpg">
  240.                   </span>
  241.                   <div class="media-body  ml-2  d-none d-lg-block">
  242.                     <span class="mb-0 text-sm  font-weight-bold">John Snow</span>
  243.                   </div>
  244.                 </div>
  245.               </a>
  246.               <div class="dropdown-menu  dropdown-menu-right ">
  247.                 <div class="dropdown-header noti-title">
  248.                   <h6 class="text-overflow m-0">Welcome!</h6>
  249.                 </div>
  250.                 <a href="#!" class="dropdown-item">
  251.                   <i class="ni ni-single-02"></i>
  252.                   <span>My profile</span>
  253.                 </a>
  254.                 <a href="#!" class="dropdown-item">
  255.                   <i class="ni ni-settings-gear-65"></i>
  256.                   <span>Settings</span>
  257.                 </a>
  258.                 <a href="#!" class="dropdown-item">
  259.                   <i class="ni ni-calendar-grid-58"></i>
  260.                   <span>Activity</span>
  261.                 </a>
  262.                 <a href="#!" class="dropdown-item">
  263.                   <i class="ni ni-support-16"></i>
  264.                   <span>Support</span>
  265.                 </a>
  266.                 <div class="dropdown-divider"></div>
  267.                 <a href="#!" class="dropdown-item">
  268.                   <i class="ni ni-user-run"></i>
  269.                   <span>Logout</span>
  270.                 </a>
  271.               </div>
  272.             </li>
  273.           </ul>
  274.         </div>
  275.       </div>
  276.     </nav>
  277.     <!-- Header -->
  278.     <!-- Header -->
  279.     <div class="header bg-primary pb-6">
  280.       <div class="container-fluid">
  281.         <div class="header-body">
  282.           <!-- Card stats -->
  283.           <div class="row">
  284.             <div class="col-xl-4 col-md-6">
  285.               <div class="card card-stats">
  286.                 <!-- Card body -->
  287.                 <div class="card-body">
  288.                   <div class="row">
  289.                     <div class="col">
  290.                       <h5 class="card-title text-uppercase text-muted mb-0">Total Pegawai</h5>
  291.                       <span class="h2 font-weight-bold mb-0">350,897</span>
  292.                     </div>
  293.                     <div class="col-auto">
  294.                       <div class="icon icon-shape bg-gradient-red text-white rounded-circle shadow">
  295.                         <i class="ni ni-active-40"></i>
  296.                       </div>
  297.                     </div>
  298.                   </div>
  299.                   <p class="mt-3 mb-0 text-sm">
  300.                     <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
  301.                     <span class="text-nowrap">Since last month</span>
  302.                   </p>
  303.                 </div>
  304.               </div>
  305.             </div>
  306.             <div class="col-xl-4 col-md-6">
  307.               <div class="card card-stats">
  308.                 <!-- Card body -->
  309.                 <div class="card-body">
  310.                   <div class="row">
  311.                     <div class="col">
  312.                       <h5 class="card-title text-uppercase text-muted mb-0">Absen Accepted</h5>
  313.                       <span class="h2 font-weight-bold mb-0">924</span>
  314.                     </div>
  315.                     <div class="col-auto">
  316.                       <div class="icon icon-shape bg-gradient-green text-white rounded-circle shadow">
  317.                         <i class="ni ni-money-coins"></i>
  318.                       </div>
  319.                     </div>
  320.                   </div>
  321.                   <p class="mt-3 mb-0 text-sm">
  322.                     <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
  323.                     <span class="text-nowrap">Since last month</span>
  324.                   </p>
  325.                 </div>
  326.               </div>
  327.             </div>
  328.             <div class="col-xl-4 col-md-6">
  329.               <div class="card card-stats">
  330.                 <!-- Card body -->
  331.                 <div class="card-body">
  332.                   <div class="row">
  333.                     <div class="col">
  334.                       <h5 class="card-title text-uppercase text-muted mb-0">Absen Rejected</h5>
  335.                       <span class="h2 font-weight-bold mb-0">49,65%</span>
  336.                     </div>
  337.                     <div class="col-auto">
  338.                       <div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow">
  339.                         <i class="ni ni-chart-bar-32"></i>
  340.                       </div>
  341.                     </div>
  342.                   </div>
  343.                   <p class="mt-3 mb-0 text-sm">
  344.                     <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
  345.                     <span class="text-nowrap">Since last month</span>
  346.                   </p>
  347.                 </div>
  348.               </div>
  349.             </div>
  350.           </div>
  351.         </div>
  352.       </div>
  353.     </div>
  354.     <!-- Page content -->
  355.     <div class="container-fluid mt--4">
  356.       <div class="col-md-12">
  357.         <div class="card">
  358.           <div class="card-header">
  359.             Featured
  360.           </div>
  361.           <div class="card-body">
  362.             <h5 class="card-title">Special title treatment</h5>
  363.             <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  364.             <a href="#" class="btn btn-primary">Go somewhere</a>
  365.           </div>
  366.         </div>
  367.       </div>
  368.       <!-- Footer -->
  369.       <footer class="footer">
  370.         <div class="row align-items-center">
  371.           <div class="col col-md-6">
  372.             <div class="copyright text-center  text-lg-left  text-muted">
  373.               &copy; 2020 <a href="https://www.creative-tim.com" class="font-weight-bold ml-1" target="_blank">Creative Tim</a>
  374.             </div>
  375.           </div>
  376.           <div class="col-lg-6">
  377.             <ul class="nav nav-footer justify-content-center justify-content-lg-end">
  378.               <li class="nav-item">
  379.                 <a href="https://www.creative-tim.com" class="nav-link" target="_blank">Creative Tim</a>
  380.               </li>
  381.               <li class="nav-item">
  382.                 <a href="https://www.creative-tim.com/presentation" class="nav-link" target="_blank">About Us</a>
  383.               </li>
  384.               <li class="nav-item">
  385.                 <a href="http://blog.creative-tim.com" class="nav-link" target="_blank">Blog</a>
  386.               </li>
  387.               <li class="nav-item">
  388.                 <a href="https://github.com/creativetimofficial/argon-dashboard/blob/master/LICENSE.md" class="nav-link" target="_blank">MIT License</a>
  389.               </li>
  390.             </ul>
  391.           </div>
  392.         </div>
  393.       </footer>
  394.     </div>
  395.   </div>
  396.   <!-- Argon Scripts -->
  397.   <!-- Core -->
  398.   <script src="../assets/vendor/jquery/dist/jquery.min.js"></script>
  399.   <script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  400.   <script src="../assets/vendor/js-cookie/js.cookie.js"></script>
  401.   <script src="../assets/vendor/jquery.scrollbar/jquery.scrollbar.min.js"></script>
  402.   <script src="../assets/vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js"></script>
  403.   <!-- Optional JS -->
  404.   <script src="../assets/vendor/chart.js/dist/Chart.min.js"></script>
  405.   <script src="../assets/vendor/chart.js/dist/Chart.extension.js"></script>
  406.   <!-- Argon JS -->
  407.   <script src="../assets/js/argon.js?v=1.2.0"></script>
  408. </body>
  409.  
  410. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!