Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <base href="./">
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
- <title>Kornlee - Practice</title>
- <!-- Icons-->
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <!-- Main styles for this application-->
- <link href="css/style.css" rel="stylesheet">
- <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
- <link href="css/korn.css" rel="stylesheet">
- </head>
- <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
- <header class="app-top-header navbar">
- <div class="app-top-header-dashboard text-center">
- <button class="navbar-toggler sidebar-toggler text-white button-sidebar-menu" type="button">
- <i class="fa fa-bars"></i>
- </button>
- <h4 class="m-0 font-weight-light"><i class="fa fa-area-chart"></i> Dashboard</h4>
- </div>
- </header>
- <div class="app-body">
- <div class="sidebar">
- <nav class="sidebar-nav">
- <ul class="nav">
- <li class="nav-item">
- <a class="nav-link" href="#">
- <i class="nav-icon icon-speedometer"></i> Dashboard
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">
- <i class="nav-icon icon-drop"></i> Event
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">
- <i class="nav-icon icon-pencil"></i> Settings
- </a>
- </li>
- </ul>
- </nav>
- </div>
- <main class="main pb-4">
- <div class="container-fluid">
- <div class="row">
- <div class="col-sm-9 pt-3">
- <div class="panel panel-user p-3">
- <div class="row">
- <div class="col-sm-2">
- <div class="user-image text-center">
- <i class="fa fa-user fa-5x"></i>
- </div>
- </div>
- <div class="col-sm-10">
- <div class="row">
- <h3 class="col-sm-12">Welcome</h3>
- <h4 class="col-sm-8">Trip to Laem Chabang, Thailand</h4>
- <h4 class="col-sm-4 text-right">10 people</h4>
- <h2 class="col-sm-8 offset-sm-4">"Miss. Chaleekorn Ruangworakit"</h2>
- </div>
- <div class="row mt-1">
- <h5 class="col-sm-4"><i class="fa fa-calendar"></i> Today</h5>
- <h5 class="col-sm-4"><i class="fa fa-map-marker"></i> Laem Chabang, Thailand</h5>
- <h5 class="col-sm-4 text-right text-white"><a href="#" class="text-white"><i class="fa fa-calendar"></i> Schedule</a></h5>
- </div>
- </div>
- </div>
- </div>
- <div class="panel panel-calendar p-3 mt-4">
- <div class="row">
- <div class="col-sm-12 text-center">
- <img src="./img/calenda.png" />
- </div>
- </div>
- </div>
- <div class="panel panel-visitor p-3 mt-4">
- <div class="row">
- <div class="col-sm-8">
- <h2>Site Visitors</h2>
- </div>
- <div class="col-sm-4">
- <div class="pull-right">
- <div class="btn-group btn-group-toggle" data-toggle="buttons">
- <label class="btn btn-outline-dark text-white px-4 active">
- <input type="radio" name="options" id="option1" autocomplete="off" checked> <i class="fa fa-map"></i>
- </label>
- <label class="btn btn-outline-dark text-white px-4">
- <input type="radio" name="options" id="option2" autocomplete="off"> <i class="fa fa-bar-chart"></i>
- </label>
- <label class="btn btn-outline-dark text-white px-4">
- <input type="radio" name="options" id="option3" autocomplete="off"> <i class="fa fa-area-chart"></i>
- </label>
- </div>
- </div>
- </div>
- <div class="col-sm-12 text-center">
- <img src="./img/earth2-bg.png" style="width: 80%;" class="py-2" />
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-sm-4">
- <div class="panel panel-feedback pt-3 pl-3 pr-3 mt-4">
- <div class="row">
- <div class="col-sm-12 panel-feedback-header">
- <h4><i class="fa fa-comments"></i> Feedback</h4>
- </div>
- <div class="col-sm-12 py-2 panel-feedback-item">
- <div class="row">
- <div class="col-sm-6">
- Customer's Name
- </div>
- <div class="col-sm-6 text-right">
- Feb 2, 2020 10:57
- </div>
- <div class="col-sm-12 mt-2">
- Sed vel congue mi, sagittis ultricies justo. Suspendisse gravida gravida nibh, in tincidunt arcu cursus ultricies. Morbi ac dui ac ex scelerisque pharetra.
- </div>
- </div>
- </div>
- <div class="col-sm-12 py-2 panel-feedback-item">
- <div class="row">
- <div class="col-sm-6">
- Customer's Name
- </div>
- <div class="col-sm-6 text-right">
- Feb 2, 2020 10:57
- </div>
- <div class="col-sm-12 mt-2">
- Sed vel congue mi, sagittis ultricies justo. Suspendisse gravida gravida nibh, in tincidunt arcu cursus ultricies. Morbi ac dui ac ex scelerisque pharetra.
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="col-sm-4">
- <div class="panel panel-activity pt-3 pl-3 pr-3 mt-4">
- <div class="row">
- <div class="col-sm-12 panel-activity-header">
- <h4><i class="fa fa-calendar-o"></i> Activity</h4>
- </div>
- </div>
- </div>
- </div>
- <div class="col-sm-4">
- <div class="panel panel-staff pt-3 pl-3 pr-3 mt-4">
- <div class="row">
- <div class="col-sm-12 panel-staff-header">
- <h4><i class="fa fa-users"></i> Staff</h4>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="row event-list">
- <div class="col-sm-12">
- <div class="row">
- <div class="col-sm-12">
- <h5 class="text-center m-0 py-3 col-sm-12">
- Event <i class="fa fa-search"></i>
- </h5>
- </div>
- </div>
- <div class="row py-3 event-item active">
- <div class="col-10">
- <i class="fa fa-user"></i> lipsum
- </div>
- <div class="col-2">
- 10
- </div>
- <div class="col-6">
- <i class="fa fa-calendar"></i> Tomorrow
- </div>
- <div class="col-6">
- <i class="fa fa-clock-o"></i> 13:00
- </div>
- </div>
- <div class="row py-3 event-item">
- <div class="col-10">
- <i class="fa fa-user"></i> lipsum
- </div>
- <div class="col-2">
- 15
- </div>
- <div class="col-6">
- <i class="fa fa-calendar"></i> Tomorrow
- </div>
- <div class="col-6">
- <i class="fa fa-clock-o"></i> 13:00
- </div>
- </div>
- <div class="row py-3 event-item">
- <div class="col-10">
- <i class="fa fa-user"></i> lipsum
- </div>
- <div class="col-2">
- 15
- </div>
- <div class="col-6">
- <i class="fa fa-calendar"></i> Tomorrow
- </div>
- <div class="col-6">
- <i class="fa fa-clock-o"></i> 13:00
- </div>
- </div>
- <div class="row py-3 event-item">
- <div class="col-10">
- <i class="fa fa-user"></i> lipsum
- </div>
- <div class="col-2">
- 15
- </div>
- <div class="col-6">
- <i class="fa fa-calendar"></i> Tomorrow
- </div>
- <div class="col-6">
- <i class="fa fa-clock-o"></i> 13:00
- </div>
- </div>
- <div class="row py-3 event-item">
- <div class="col-10">
- <i class="fa fa-user"></i> lipsum
- </div>
- <div class="col-2">
- 15
- </div>
- <div class="col-6">
- <i class="fa fa-calendar"></i> Tomorrow
- </div>
- <div class="col-6">
- <i class="fa fa-clock-o"></i> 13:00
- </div>
- </div>
- <div class="row py-3 event-item">
- <div class="col-10">
- <i class="fa fa-user"></i> lipsum
- </div>
- <div class="col-2">
- 15
- </div>
- <div class="col-6">
- <i class="fa fa-calendar"></i> Tomorrow
- </div>
- <div class="col-6">
- <i class="fa fa-clock-o"></i> 13:00
- </div>
- </div>
- <div class="row py-3 event-item">
- <div class="col-10">
- <i class="fa fa-user"></i> lipsum
- </div>
- <div class="col-2">
- 15
- </div>
- <div class="col-6">
- <i class="fa fa-calendar"></i> Tomorrow
- </div>
- <div class="col-6">
- <i class="fa fa-clock-o"></i> 13:00
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </main>
- </div>
- <!-- CoreUI and necessary plugins-->
- <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement