Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-- Begin Page Content -->
- <div class="container-fluid">
- <!-- Content Row -->
- <div class="row">
- <!-- Earnings (Monthly) Card Example -->
- <div class="col-xl-3 col-md-6 mb-4">
- <div class="card border-left-primary shadow h-100 py-2">
- <div class="card-body">
- <div class="row no-gutters align-items-center">
- <div class="col mr-2">
- <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Earnings (Monthly)</div>
- <div class="h5 mb-0 font-weight-bold text-gray-800">$40,000</div>
- </div>
- <div class="col-auto">
- <i class="fas fa-calendar fa-2x text-gray-300"></i>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- Earnings (Monthly) Card Example -->
- <div class="col-xl-3 col-md-6 mb-4">
- <div class="card border-left-success shadow h-100 py-2">
- <div class="card-body">
- <div class="row no-gutters align-items-center">
- <div class="col mr-2">
- <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Earnings (Annual)</div>
- <div class="h5 mb-0 font-weight-bold text-gray-800">$215,000</div>
- </div>
- <div class="col-auto">
- <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- Earnings (Monthly) Card Example -->
- <div class="col-xl-3 col-md-6 mb-4">
- <div class="card border-left-info shadow h-100 py-2">
- <div class="card-body">
- <div class="row no-gutters align-items-center">
- <div class="col mr-2">
- <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Tasks</div>
- <div class="row no-gutters align-items-center">
- <div class="col-auto">
- <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">50%</div>
- </div>
- <div class="col">
- <div class="progress progress-sm mr-2">
- <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
- </div>
- </div>
- </div>
- </div>
- <div class="col-auto">
- <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- Pending Requests Card Example -->
- <div class="col-xl-3 col-md-6 mb-4">
- <div class="card border-left-warning shadow h-100 py-2">
- <div class="card-body">
- <div class="row no-gutters align-items-center">
- <div class="col mr-2">
- <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Pending Requests</div>
- <div class="h5 mb-0 font-weight-bold text-gray-800">18</div>
- </div>
- <div class="col-auto">
- <i class="fas fa-comments fa-2x text-gray-300"></i>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- Content Row -->
- <div class="row">
- <!-- Area Chart -->
- <div class="col-xl-8 col-lg-7">
- <div class="card shadow mb-4">
- <!-- Card Header - Dropdown -->
- <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
- <h6 class="m-0 font-weight-bold text-primary">Earnings Overview</h6>
- <div class="dropdown no-arrow">
- <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
- </a>
- <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
- <div class="dropdown-header">Dropdown Header:</div>
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Something else here</a>
- </div>
- </div>
- </div>
- <!-- Card Body -->
- <div class="card-body">
- <div class="chart-area">
- <canvas id="myAreaChart"></canvas>
- </div>
- </div>
- </div>
- </div>
- <!-- Pie Chart -->
- <div class="col-xl-4 col-lg-5">
- <div class="card shadow mb-4">
- <!-- Card Header - Dropdown -->
- <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
- <h6 class="m-0 font-weight-bold text-primary">Revenue Sources</h6>
- <div class="dropdown no-arrow">
- <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
- </a>
- <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
- <div class="dropdown-header">Dropdown Header:</div>
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Something else here</a>
- </div>
- </div>
- </div>
- <!-- Card Body -->
- <div class="card-body">
- <div class="chart-pie pt-4 pb-2">
- <canvas id="myPieChart"></canvas>
- </div>
- <div class="mt-4 text-center small">
- <span class="mr-2">
- <i class="fas fa-circle text-primary"></i> Direct
- </span>
- <span class="mr-2">
- <i class="fas fa-circle text-success"></i> Social
- </span>
- <span class="mr-2">
- <i class="fas fa-circle text-info"></i> Referral
- </span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- /.container-fluid -->
- </div>
- <!-- End of Main Content -->
- <!-- Footer -->
- <footer class="sticky-footer bg-white">
- <div class="container my-auto">
- <div class="copyright text-center my-auto">
- <span>Copyright © Toko Online</span>
- </div>
- </div>
- </footer>
- <!-- End of Footer -->
- </div>
- <!-- End of Content Wrapper -->
- </div>
- <!-- End of Page Wrapper -->
- <!-- Scroll to Top Button-->
- <a class="scroll-to-top rounded" href="#page-top">
- <i class="fas fa-angle-up"></i>
- </a>
- <!-- Logout Modal-->
- <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
- <button class="close" type="button" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">×</span>
- </button>
- </div>
- <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
- <div class="modal-footer">
- <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
- <a class="btn btn-primary" href="login.html">Logout</a>
- </div>
- </div>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement