API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 14th, 2019
208
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.58 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <base href="./">
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  8.  
  9. <title>Kornlee - Practice</title>
  10. <!-- Icons-->
  11. <link href="node_modules/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
  12. <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
  13. <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  14. <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
  15. <!-- Main styles for this application-->
  16. <link href="css/style.css" rel="stylesheet">
  17. <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
  18. <link href="css/korn.css" rel="stylesheet">
  19. </head>
  20. <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
  21. <header class="app-header navbar">
  22. <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
  23. <span class="navbar-toggler-icon"></span>
  24. </button>
  25. <a class="navbar-brand" href="#">
  26. <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
  27. <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
  28. </a>
  29. <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
  30. <span class="navbar-toggler-icon"></span>
  31. </button>
  32. </header>
  33. <div class="app-body">
  34. <div class="sidebar">
  35. <nav class="sidebar-nav">
  36. <ul class="nav">
  37. <li class="nav-item">
  38. <a class="nav-link" href="#">
  39. <i class="nav-icon icon-speedometer"></i> Dashboard
  40. </a>
  41. </li>
  42. <li class="nav-item">
  43. <a class="nav-link" href="#">
  44. <i class="nav-icon icon-drop"></i> Event</a>
  45. </li>
  46. <li class="nav-item">
  47. <a class="nav-link" href="#">
  48. <i class="nav-icon icon-pencil"></i> Settings</a>
  49. </li>
  50. </ul>
  51. </nav>
  52. <button class="sidebar-minimizer brand-minimizer" type="button"></button>
  53. </div>
  54. <main class="main">
  55. <div class="container-fluid">
  56. <div class="animated fadeIn"></div>
  57. </div>
  58. </main>
  59. <aside class="aside-menu">
  60. <ul class="nav nav-tabs" role="tablist">
  61. <li class="nav-item">
  62. <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
  63. <i class="icon-list"></i>
  64. </a>
  65. </li>
  66. <li class="nav-item">
  67. <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
  68. <i class="icon-speech"></i>
  69. </a>
  70. </li>
  71. <li class="nav-item">
  72. <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
  73. <i class="icon-settings"></i>
  74. </a>
  75. </li>
  76. </ul>
  77. <!-- Tab panes-->
  78. <div class="tab-content">
  79. <div class="tab-pane active" id="timeline" role="tabpanel">
  80. <div class="list-group list-group-accent">
  81. <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</div>
  82. <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
  83. <div class="avatar float-right">
  84. <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
  85. </div>
  86. <div>Meeting with
  87. <strong>Lucas</strong>
  88. </div>
  89. <small class="text-muted mr-3">
  90. <i class="icon-calendar"></i>  1 - 3pm</small>
  91. <small class="text-muted">
  92. <i class="icon-location-pin"></i>  Palo Alto, CA</small>
  93. </div>
  94. <div class="list-group-item list-group-item-accent-info">
  95. <div class="avatar float-right">
  96. <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
  97. </div>
  98. <div>Skype with
  99. <strong>Megan</strong>
  100. </div>
  101. <small class="text-muted mr-3">
  102. <i class="icon-calendar"></i>  4 - 5pm</small>
  103. <small class="text-muted">
  104. <i class="icon-social-skype"></i>  On-line</small>
  105. </div>
  106. <div class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</div>
  107. <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
  108. <div>New UI Project -
  109. <strong>deadline</strong>
  110. </div>
  111. <small class="text-muted mr-3">
  112. <i class="icon-calendar"></i>  10 - 11pm</small>
  113. <small class="text-muted">
  114. <i class="icon-home"></i>  creativeLabs HQ</small>
  115. <div class="avatars-stack mt-2">
  116. <div class="avatar avatar-xs">
  117. <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
  118. </div>
  119. <div class="avatar avatar-xs">
  120. <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
  121. </div>
  122. <div class="avatar avatar-xs">
  123. <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
  124. </div>
  125. <div class="avatar avatar-xs">
  126. <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
  127. </div>
  128. <div class="avatar avatar-xs">
  129. <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
  130. </div>
  131. </div>
  132. </div>
  133. <div class="list-group-item list-group-item-accent-success list-group-item-divider">
  134. <div>
  135. <strong>#10 Startups.Garden</strong> Meetup</div>
  136. <small class="text-muted mr-3">
  137. <i class="icon-calendar"></i>  1 - 3pm</small>
  138. <small class="text-muted">
  139. <i class="icon-location-pin"></i>  Palo Alto, CA</small>
  140. </div>
  141. <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
  142. <div>
  143. <strong>Team meeting</strong>
  144. </div>
  145. <small class="text-muted mr-3">
  146. <i class="icon-calendar"></i>  4 - 6pm</small>
  147. <small class="text-muted">
  148. <i class="icon-home"></i>  creativeLabs HQ</small>
  149. <div class="avatars-stack mt-2">
  150. <div class="avatar avatar-xs">
  151. <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
  152. </div>
  153. <div class="avatar avatar-xs">
  154. <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
  155. </div>
  156. <div class="avatar avatar-xs">
  157. <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
  158. </div>
  159. <div class="avatar avatar-xs">
  160. <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
  161. </div>
  162. <div class="avatar avatar-xs">
  163. <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
  164. </div>
  165. <div class="avatar avatar-xs">
  166. <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
  167. </div>
  168. <div class="avatar avatar-xs">
  169. <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com">
  170. </div>
  171. </div>
  172. </div>
  173. </div>
  174. </div>
  175. <div class="tab-pane p-3" id="messages" role="tabpanel">
  176. <div class="message">
  177. <div class="py-3 pb-5 mr-3 float-left">
  178. <div class="avatar">
  179. <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
  180. <span class="avatar-status badge-success"></span>
  181. </div>
  182. </div>
  183. <div>
  184. <small class="text-muted">Lukasz Holeczek</small>
  185. <small class="text-muted float-right mt-1">1:52 PM</small>
  186. </div>
  187. <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
  188. <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
  189. </div>
  190. <hr>
  191. <div class="message">
  192. <div class="py-3 pb-5 mr-3 float-left">
  193. <div class="avatar">
  194. <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
  195. <span class="avatar-status badge-success"></span>
  196. </div>
  197. </div>
  198. <div>
  199. <small class="text-muted">Lukasz Holeczek</small>
  200. <small class="text-muted float-right mt-1">1:52 PM</small>
  201. </div>
  202. <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
  203. <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
  204. </div>
  205. <hr>
  206. <div class="message">
  207. <div class="py-3 pb-5 mr-3 float-left">
  208. <div class="avatar">
  209. <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
  210. <span class="avatar-status badge-success"></span>
  211. </div>
  212. </div>
  213. <div>
  214. <small class="text-muted">Lukasz Holeczek</small>
  215. <small class="text-muted float-right mt-1">1:52 PM</small>
  216. </div>
  217. <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
  218. <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
  219. </div>
  220. <hr>
  221. <div class="message">
  222. <div class="py-3 pb-5 mr-3 float-left">
  223. <div class="avatar">
  224. <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
  225. <span class="avatar-status badge-success"></span>
  226. </div>
  227. </div>
  228. <div>
  229. <small class="text-muted">Lukasz Holeczek</small>
  230. <small class="text-muted float-right mt-1">1:52 PM</small>
  231. </div>
  232. <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
  233. <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
  234. </div>
  235. <hr>
  236. <div class="message">
  237. <div class="py-3 pb-5 mr-3 float-left">
  238. <div class="avatar">
  239. <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
  240. <span class="avatar-status badge-success"></span>
  241. </div>
  242. </div>
  243. <div>
  244. <small class="text-muted">Lukasz Holeczek</small>
  245. <small class="text-muted float-right mt-1">1:52 PM</small>
  246. </div>
  247. <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
  248. <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
  249. </div>
  250. </div>
  251. <div class="tab-pane p-3" id="settings" role="tabpanel">
  252. <h6>Settings</h6>
  253. <div class="aside-options">
  254. <div class="clearfix mt-4">
  255. <small>
  256. <b>Option 1</b>
  257. </small>
  258. <label class="switch switch-label switch-pill switch-success switch-sm float-right">
  259. <input class="switch-input" type="checkbox" checked="">
  260. <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
  261. </label>
  262. </div>
  263. <div>
  264. <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
  265. </div>
  266. </div>
  267. <div class="aside-options">
  268. <div class="clearfix mt-3">
  269. <small>
  270. <b>Option 2</b>
  271. </small>
  272. <label class="switch switch-label switch-pill switch-success switch-sm float-right">
  273. <input class="switch-input" type="checkbox">
  274. <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
  275. </label>
  276. </div>
  277. <div>
  278. <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
  279. </div>
  280. </div>
  281. <div class="aside-options">
  282. <div class="clearfix mt-3">
  283. <small>
  284. <b>Option 3</b>
  285. </small>
  286. <label class="switch switch-label switch-pill switch-success switch-sm float-right">
  287. <input class="switch-input" type="checkbox">
  288. <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
  289. </label>
  290. </div>
  291. </div>
  292. <div class="aside-options">
  293. <div class="clearfix mt-3">
  294. <small>
  295. <b>Option 4</b>
  296. </small>
  297. <label class="switch switch-label switch-pill switch-success switch-sm float-right">
  298. <input class="switch-input" type="checkbox" checked="">
  299. <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
  300. </label>
  301. </div>
  302. </div>
  303. <hr>
  304. <h6>System Utilization</h6>
  305. <div class="text-uppercase mb-1 mt-4">
  306. <small>
  307. <b>CPU Usage</b>
  308. </small>
  309. </div>
  310. <div class="progress progress-xs">
  311. <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  312. </div>
  313. <small class="text-muted">348 Processes. 1/4 Cores.</small>
  314. <div class="text-uppercase mb-1 mt-2">
  315. <small>
  316. <b>Memory Usage</b>
  317. </small>
  318. </div>
  319. <div class="progress progress-xs">
  320. <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
  321. </div>
  322. <small class="text-muted">11444GB/16384MB</small>
  323. <div class="text-uppercase mb-1 mt-2">
  324. <small>
  325. <b>SSD 1 Usage</b>
  326. </small>
  327. </div>
  328. <div class="progress progress-xs">
  329. <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
  330. </div>
  331. <small class="text-muted">243GB/256GB</small>
  332. <div class="text-uppercase mb-1 mt-2">
  333. <small>
  334. <b>SSD 2 Usage</b>
  335. </small>
  336. </div>
  337. <div class="progress progress-xs">
  338. <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
  339. </div>
  340. <small class="text-muted">25GB/256GB</small>
  341. </div>
  342. </div>
  343. </aside>
  344. </div>
  345. <footer class="app-footer">
  346. <div>
  347. <a href="https://coreui.io">CoreUI</a>
  348. <span>&copy; 2018 creativeLabs.</span>
  349. </div>
  350. <div class="ml-auto">
  351. <span>Powered by</span>
  352. <a href="https://coreui.io">CoreUI</a>
  353. </div>
  354. </footer>
  355. <!-- CoreUI and necessary plugins-->
  356. <script src="node_modules/jquery/dist/jquery.min.js"></script>
  357. <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
  358. <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  359. <script src="node_modules/pace-progress/pace.min.js"></script>
  360. <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
  361. <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
  362. </body>
  363. </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!