Advertisement
Guest User

Untitled

a guest
Dec 15th, 2019
82
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.04 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <base href="./">
  6. <meta charset="utf-8">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  9.  
  10. <title>Kornlee - Practice</title>
  11. <!-- Icons-->
  12. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  13. <!-- Main styles for this application-->
  14. <link href="css/style.css" rel="stylesheet">
  15. <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
  16. <link href="css/korn.css" rel="stylesheet">
  17. </head>
  18.  
  19. <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
  20. <header class="app-top-header navbar">
  21. <div class="app-top-header-dashboard text-center">
  22. <button class="navbar-toggler sidebar-toggler text-white button-sidebar-menu" type="button">
  23. <i class="fa fa-bars"></i>
  24. </button>
  25. <h4 class="m-0 font-weight-light"><i class="fa fa-area-chart"></i> Dashboard</h4>
  26. </div>
  27. </header>
  28. <div class="app-body">
  29. <div class="sidebar">
  30. <nav class="sidebar-nav">
  31. <ul class="nav">
  32. <li class="nav-item">
  33. <a class="nav-link text-center py-4" href="#">
  34. <i class="fa fa-bar-chart"></i> <br />
  35. Dashboard
  36. </a>
  37. </li>
  38. <li class="nav-item">
  39. <a class="nav-link text-center py-4" href="#">
  40. <i class="fa fa-bar-chart"></i> <br />
  41. Dashboard
  42. </a>
  43. </li>
  44. <li class="nav-item">
  45. <a class="nav-link text-center py-4" href="#">
  46. <i class="fa fa-bar-chart"></i> <br />
  47. Dashboard
  48. </a>
  49. </li>
  50. </ul>
  51. </nav>
  52. </div>
  53. <main class="main">
  54. <div class="container-fluid">
  55. <div class="row">
  56. <div class="col-sm-12 pt-3">
  57. <div class="row">
  58. <div class="col-sm-9">
  59. <div class="measure">
  60. <div class="panel panel-user p-3">
  61. <div class="row">
  62. <div class="col-sm-2">
  63. <div class="user-image text-center">
  64. <i class="fa fa-user fa-5x"></i>
  65. </div>
  66. </div>
  67. <div class="col-sm-10">
  68. <div class="row">
  69. <h3 class="col-sm-12">Welcome</h3>
  70. <h4 class="col-sm-8">Trip to Laem Chabang, Thailand</h4>
  71. <h4 class="col-sm-4 text-right">10 people</h4>
  72. <h2 class="col-sm-8 offset-sm-4">"Miss. Chaleekorn Ruangworakit"</h2>
  73. </div>
  74. <div class="row mt-1">
  75. <h5 class="col-sm-4"><i class="fa fa-calendar"></i> Today</h5>
  76. <h5 class="col-sm-4"><i class="fa fa-map-marker"></i> Laem Chabang, Thailand</h5>
  77. <h5 class="col-sm-4 text-right text-white"><a href="#" class="text-white"><i
  78. class="fa fa-calendar"></i> Schedule</a></h5>
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83.  
  84. <div class="panel panel-calendar p-3 mt-4">
  85. <div class="row">
  86. <div class="col-sm-12 text-center">
  87. <img src="./img/calenda.png" style="max-width: 100%;" />
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92. </div>
  93.  
  94. <div class="col-sm-3 event-list">
  95. <div class="row">
  96. <div class="col-sm-12">
  97. <div class="">
  98. <div class="row">
  99. <div class="col-sm-12">
  100. <div class="row">
  101. <h5 class="text-center m-0 py-3 col-sm-12">
  102. Event <i class="fa fa-search"></i>
  103. </h5>
  104. </div>
  105. </div>
  106. </div>
  107.  
  108. <div class="row py-3 event-item active">
  109. <div class="col-10">
  110. <i class="fa fa-user"></i> lipsum
  111. </div>
  112. <div class="col-2">
  113. 10
  114. </div>
  115. <div class="col-6">
  116. <i class="fa fa-calendar"></i> Tomorrow
  117. </div>
  118. <div class="col-6">
  119. <i class="fa fa-clock-o"></i> 13:00
  120. </div>
  121. </div>
  122.  
  123. <div class="row py-3 event-item">
  124. <div class="col-10">
  125. <i class="fa fa-user"></i> lipsum
  126. </div>
  127. <div class="col-2">
  128. 15
  129. </div>
  130. <div class="col-6">
  131. <i class="fa fa-calendar"></i> Tomorrow
  132. </div>
  133. <div class="col-6">
  134. <i class="fa fa-clock-o"></i> 13:00
  135. </div>
  136. </div>
  137.  
  138. <div class="row py-3 event-item">
  139. <div class="col-10">
  140. <i class="fa fa-user"></i> lipsum
  141. </div>
  142. <div class="col-2">
  143. 15
  144. </div>
  145. <div class="col-6">
  146. <i class="fa fa-calendar"></i> Tomorrow
  147. </div>
  148. <div class="col-6">
  149. <i class="fa fa-clock-o"></i> 13:00
  150. </div>
  151. </div>
  152.  
  153. <div class="row py-3 event-item">
  154. <div class="col-10">
  155. <i class="fa fa-user"></i> lipsum
  156. </div>
  157. <div class="col-2">
  158. 15
  159. </div>
  160. <div class="col-6">
  161. <i class="fa fa-calendar"></i> Tomorrow
  162. </div>
  163. <div class="col-6">
  164. <i class="fa fa-clock-o"></i> 13:00
  165. </div>
  166. </div>
  167.  
  168. <div class="row py-3 event-item">
  169. <div class="col-10">
  170. <i class="fa fa-user"></i> lipsum
  171. </div>
  172. <div class="col-2">
  173. 15
  174. </div>
  175. <div class="col-6">
  176. <i class="fa fa-calendar"></i> Tomorrow
  177. </div>
  178. <div class="col-6">
  179. <i class="fa fa-clock-o"></i> 13:00
  180. </div>
  181. </div>
  182.  
  183. <div class="row py-3 event-item">
  184. <div class="col-10">
  185. <i class="fa fa-user"></i> lipsum
  186. </div>
  187. <div class="col-2">
  188. 15
  189. </div>
  190. <div class="col-6">
  191. <i class="fa fa-calendar"></i> Tomorrow
  192. </div>
  193. <div class="col-6">
  194. <i class="fa fa-clock-o"></i> 13:00
  195. </div>
  196. </div>
  197.  
  198. <div class="row py-3 event-item">
  199. <div class="col-10">
  200. <i class="fa fa-user"></i> lipsum
  201. </div>
  202. <div class="col-2">
  203. 15
  204. </div>
  205. <div class="col-6">
  206. <i class="fa fa-calendar"></i> Tomorrow
  207. </div>
  208. <div class="col-6">
  209. <i class="fa fa-clock-o"></i> 13:00
  210. </div>
  211. </div>
  212. </div>
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217.  
  218. <div class="row">
  219. <div class="col-sm-12">
  220. <div class="panel panel-visitor p-3 mt-4">
  221. <div class="row">
  222. <div class="col-sm-8">
  223. <h2>Site Visitors</h2>
  224. </div>
  225. <div class="col-sm-4">
  226. <div class="pull-right">
  227. <div class="btn-group btn-group-toggle" data-toggle="buttons">
  228. <label class="btn btn-outline-dark text-white px-4 active">
  229. <input type="radio" name="options" id="option1" autocomplete="off" checked> <i
  230. class="fa fa-map"></i>
  231. </label>
  232. <label class="btn btn-outline-dark text-white px-4">
  233. <input type="radio" name="options" id="option2" autocomplete="off"> <i
  234. class="fa fa-bar-chart"></i>
  235. </label>
  236. <label class="btn btn-outline-dark text-white px-4">
  237. <input type="radio" name="options" id="option3" autocomplete="off"> <i
  238. class="fa fa-area-chart"></i>
  239. </label>
  240. </div>
  241. </div>
  242. </div>
  243. <div class="col-sm-12 text-center">
  244. <img src="./img/earth2-bg.png" style="width: 80%;" class="py-2" />
  245. </div>
  246. </div>
  247. </div>
  248. </div>
  249. </div>
  250.  
  251. <div class="row">
  252. <div class="col-sm-4">
  253. <div class="panel panel-feedback pt-3 pl-3 pr-3 mt-4">
  254. <div class="row">
  255. <div class="col-sm-12 panel-feedback-header">
  256. <h4><i class="fa fa-comments"></i> Feedback</h4>
  257. </div>
  258.  
  259. <div class="col-sm-12 py-2 panel-feedback-item">
  260. <div class="row">
  261. <div class="col-sm-6">
  262. Customer's Name
  263. </div>
  264. <div class="col-sm-6 text-right">
  265. Feb 2, 2020 10:57
  266. </div>
  267. <div class="col-sm-12 mt-2">
  268. Sed vel congue mi, sagittis ultricies justo. Suspendisse gravida gravida nibh, in tincidunt
  269. arcu cursus ultricies. Morbi ac dui ac ex scelerisque pharetra.
  270. </div>
  271. </div>
  272. </div>
  273.  
  274. <div class="col-sm-12 py-2 panel-feedback-item">
  275. <div class="row">
  276. <div class="col-sm-6">
  277. Customer's Name
  278. </div>
  279. <div class="col-sm-6 text-right">
  280. Feb 2, 2020 10:57
  281. </div>
  282. <div class="col-sm-12 mt-2">
  283. Sed vel congue mi, sagittis ultricies justo. Suspendisse gravida gravida nibh, in tincidunt
  284. arcu cursus ultricies. Morbi ac dui ac ex scelerisque pharetra.
  285. </div>
  286. </div>
  287. </div>
  288. </div>
  289. </div>
  290. </div>
  291. <div class="col-sm-4">
  292. <div class="panel panel-activity pt-3 pl-3 pr-3 mt-4">
  293. <div class="row">
  294. <div class="col-sm-12 panel-activity-header">
  295. <h4><i class="fa fa-calendar-o"></i> Activity</h4>
  296. </div>
  297.  
  298. <div class="col-sm-12 py-2 panel-activity-item">
  299. <div class="row">
  300. <div class="col-sm-6">
  301. Customer's Name
  302. </div>
  303. <div class="col-sm-6 text-right">
  304. Feb 2, 2020 10:57
  305. </div>
  306. <div class="col-sm-12 mt-2">
  307. Sed vel congue mi, sagittis ultricies justo. Suspendisse gravida gravida nibh, in tincidunt
  308. arcu cursus ultricies. Morbi ac dui ac ex scelerisque pharetra.
  309. </div>
  310. </div>
  311. </div>
  312.  
  313. <div class="col-sm-12 py-2 panel-activity-item">
  314. <div class="row">
  315. <div class="col-sm-6">
  316. Customer's Name
  317. </div>
  318. <div class="col-sm-6 text-right">
  319. Feb 2, 2020 10:57
  320. </div>
  321. <div class="col-sm-12 mt-2">
  322. Sed vel congue mi, sagittis ultricies justo. Suspendisse gravida gravida nibh, in tincidunt
  323. arcu cursus ultricies. Morbi ac dui ac ex scelerisque pharetra.
  324. </div>
  325. </div>
  326. </div>
  327. </div>
  328. </div>
  329. </div>
  330. <div class="col-sm-4">
  331. <div class="panel panel-staff pt-3 pl-3 pr-3 mt-4">
  332. <div class="row">
  333. <div class="col-sm-12 panel-staff-header">
  334. <h4><i class="fa fa-users"></i> Staff</h4>
  335. </div>
  336.  
  337. <div class="col-sm-12 panel-staff-item py-2">
  338. <img src="./img/avatars/1.jpg" class="rounded-circle" />
  339. Phasellus sed tincidunt nunc. Duis dui leo.
  340. </div>
  341.  
  342. <div class="col-sm-12 panel-staff-item py-2">
  343. <img src="./img/avatars/2.jpg" class="rounded-circle" />
  344. Phasellus sed tincidunt nunc. Duis dui leo.
  345. </div>
  346.  
  347. <div class="col-sm-12 panel-staff-item py-2">
  348. <img src="./img/avatars/3.jpg" class="rounded-circle" />
  349. Phasellus sed tincidunt nunc. Duis dui leo.
  350. </div>
  351.  
  352. <div class="col-sm-12 panel-staff-item py-2">
  353. <img src="./img/avatars/4.jpg" class="rounded-circle" />
  354. Phasellus sed tincidunt nunc. Duis dui leo.
  355. </div>
  356. </div>
  357. </div>
  358. </div>
  359. </div>
  360. </div>
  361. </div>
  362. </div>
  363.  
  364. <footer class="mt-3 py-5">
  365. <div class="container-fluid">
  366. <div class="row">
  367. <div class="col-sm">
  368. Dashboard
  369. </div>
  370. <div class="col-sm">
  371. <a href="#" class="d-block">New Event</a>
  372. <a href="#" class="d-block">New Event</a>
  373. <a href="#" class="d-block">New Event</a>
  374. <a href="#" class="d-block">New Event</a>
  375. </div>
  376. <div class="col-sm">
  377. <a href="#" class="d-block">New Event</a>
  378. <a href="#" class="d-block">New Event</a>
  379. <a href="#" class="d-block">New Event</a>
  380. <a href="#" class="d-block">New Event</a>
  381. </div>
  382. <div class="col-sm">
  383. <a href="#" class="d-block">New Event</a>
  384. <a href="#" class="d-block">New Event</a>
  385. <a href="#" class="d-block">New Event</a>
  386. <a href="#" class="d-block">New Event</a>
  387. </div>
  388. <div class="col-sm">
  389. <h5>Contact Us</h5>
  390. <address>
  391. Celestica (Thailand), <br />
  392. 49/18 Laem Chabang Industrial Estate, <br />
  393. Moo 5, Tungsukhla, Sriracha, <br />
  394. Chonburi 20230
  395. </address>
  396. </div>
  397. </div>
  398.  
  399. <div class="row">
  400. <div class="col-sm-12">
  401. <h2 class="d-block text-center m-0 py-3">Customer Care Logo</h2>
  402. </div>
  403. <div class="col-sm-12">
  404. <h5 class="d-block text-center m-0 py-2">© Copyright Celestica (Thailand) Limited 20167 All rights
  405. reserved</h5>
  406. </div>
  407. </div>
  408. </div>
  409. </footer>
  410. </main>
  411. </div>
  412. <!-- CoreUI and necessary plugins-->
  413. <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  414. integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
  415. crossorigin="anonymous"></script>
  416. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
  417. integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
  418. crossorigin="anonymous"></script>
  419. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
  420. integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
  421. crossorigin="anonymous"></script>
  422.  
  423. <script>
  424. var measure = $('.measure');
  425. var height = measure.height();
  426.  
  427. $(function () {
  428. $(window).on('resize', function() {
  429. height = measure.height();
  430. adjustEventHeight();
  431. });
  432.  
  433. function adjustEventHeight() {
  434. $('.event-list').height(height);
  435. }
  436.  
  437. adjustEventHeight();
  438. });
  439. </script>
  440. </body>
  441. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement