API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 15th, 2018
77
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.14 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3. <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  4.  
  5. <header class="header">
  6. <nav class="navbar navbar-toggleable-md navbar-light pt-0 pb-0 ">
  7. <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
  8. aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
  9. <span class="navbar-toggler-icon"></span>
  10. </button>
  11. <div class="float-left">
  12. <a href="#" class="button-left">
  13. <span class="fa fa-fw fa-bars "></span>
  14. </a>
  15. </div>
  16. <a class="navbar-brand p-0 mr-5" href="#">DigitalPen</a>
  17. <div class="collapse navbar-collapse flex-row-reverse" id="navbarNavDropdown">
  18. <ul class="navbar-nav">
  19. <li class="nav-item dropdown messages-menu">
  20. <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
  21. aria-expanded="false">
  22. <i class="fa fa-bell-o"></i>
  23. <span class="label label-success bg-success">10</span>
  24. </a>
  25. <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
  26. <ul class="dropdown-menu-over list-unstyled">
  27. <li class="header-ul text-center">You have 4 messages</li>
  28. <li>
  29. <!-- inner menu: contains the actual data -->
  30. <ul class="menu list-unstyled">
  31. <li>
  32. <!-- start message -->
  33. <a href="#">
  34. <div class="pull-left">
  35. <img src="http://via.placeholder.com/160x160" class="rounded-circle " alt="User Image">
  36. </div>
  37. <h4>
  38. Support Team
  39. <small>
  40. <i class="fa fa-clock-o"></i> 5 mins</small>
  41. </h4>
  42. <p>Why not buy a new awesome theme?</p>
  43. </a>
  44. </li>
  45. <!-- end message -->
  46. <li>
  47. <a href="#">
  48. <div class="pull-left">
  49. <img src="http://via.placeholder.com/160x160" class="rounded-circle " alt="User Image">
  50. </div>
  51. <h4>
  52. AdminLTE Design Team
  53. <small>
  54. <i class="fa fa-clock-o"></i> 2 hours</small>
  55. </h4>
  56. <p>Why not buy a new awesome theme?</p>
  57. </a>
  58. </li>
  59. <li>
  60. <a href="#">
  61. <div class="pull-left">
  62. <img src="http://via.placeholder.com/160x160" class="rounded-circle " alt="User Image">
  63. </div>
  64. <h4>
  65. Developers
  66. <small>
  67. <i class="fa fa-clock-o"></i> Today</small>
  68. </h4>
  69. <p>Why not buy a new awesome theme?</p>
  70. </a>
  71. </li>
  72. <li>
  73. <a href="#">
  74. <div class="pull-left">
  75. <img src="http://via.placeholder.com/160x160" class="rounded-circle " alt="User Image">
  76. </div>
  77. <h4>
  78. Sales Department
  79. <small>
  80. <i class="fa fa-clock-o"></i> Yesterday</small>
  81. </h4>
  82. <p>Why not buy a new awesome theme?</p>
  83. </a>
  84. </li>
  85. <li>
  86. <a href="#">
  87. <div class="pull-left">
  88. <img src="http://via.placeholder.com/160x160" class="rounded-circle " alt="User Image">
  89. </div>
  90. <h4>
  91. Reviewers
  92. <small>
  93. <i class="fa fa-clock-o"></i> 2 days</small>
  94. </h4>
  95. <p>Why not buy a new awesome theme?</p>
  96. </a>
  97. </li>
  98. </ul>
  99. </li>
  100. <li class="footer-ul text-center">
  101. <a href="#">See All Messages</a>
  102. </li>
  103. </ul>
  104. </div>
  105. </li>
  106. <li class="nav-item dropdown notifications-menu">
  107. <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
  108. aria-expanded="false">
  109. <i class="fa fa-envelope-o"></i>
  110. <span class="label label-warning bg-warning">10</span>
  111. </a>
  112. <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
  113. <ul class="dropdown-menu-over list-unstyled">
  114. <li class="header-ul text-center">You have 10 notifications</li>
  115. <li>
  116. <!-- inner menu: contains the actual data -->
  117. <ul class="menu list-unstyled">
  118. <li>
  119. <a href="#">
  120. <i class="fa fa-users text-aqua"></i> 5 new members joined today
  121. </a>
  122. </li>
  123. <li>
  124. <a href="#">
  125. <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause
  126. design problems
  127. </a>
  128. </li>
  129. <li>
  130. <a href="#">
  131. <i class="fa fa-users text-red"></i> 5 new members joined
  132. </a>
  133. </li>
  134. <li>
  135. <a href="#">
  136. <i class="fa fa-shopping-cart text-green"></i> 25 sales made
  137. </a>
  138. </li>
  139. <li>
  140. <a href="#">
  141. <i class="fa fa-user text-red"></i> You changed your username
  142. </a>
  143. </li>
  144. </ul>
  145. </li>
  146. <li class="footer-ul text-center">
  147. <a href="#">View all</a>
  148. </li>
  149. </ul>
  150. </div>
  151. </li>
  152.  
  153. <li class="nav-item dropdown user-menu">
  154. <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
  155. aria-expanded="false">
  156. <img src="http://via.placeholder.com/160x160" class="user-image" alt="User Image">
  157. <span class="hidden-xs">Numele Prenumele</span>
  158. </a>
  159. <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
  160. <a class="dropdown-item" href="#">Action</a>
  161. <a class="dropdown-item" href="#">Another action</a>
  162. <a class="dropdown-item" href="#">Something else here</a>
  163. </div>
  164. </li>
  165. </ul>
  166. </div>
  167. </nav>
  168. </header>
  169.  
  170.  
  171. <div class="main">
  172. <aside>
  173. <div class="sidebar-container">
  174.  
  175. <div class="sidebar left ">
  176. <div class="user-panel">
  177. <div class="pull-left image">
  178. <img src="http://via.placeholder.com/160x160" class="rounded-circle" alt="User Image">
  179. </div>
  180. <div class="pull-left info">
  181. <p>Numele Prenumele</p>
  182. <a href="#">
  183. <i class="fa fa-circle text-success"></i> Online</a>
  184. </div>
  185. </div>
  186. <ul class="list-sidebar bg-defoult">
  187. <li>
  188. <a href="#" data-toggle="collapse" data-target="#dashboard" class="collapsed active">
  189. <i class="fa fa-th-large"></i>
  190. <span class="nav-label"> Panou de control </span>
  191. <span class="fa fa-chevron-left pull-right"></span>
  192. </a>
  193.  
  194. </li>
  195. <li>
  196. <a href="#">
  197. <i class="fa fa-diamond"></i>
  198. <span class="nav-label">Cursuri</span>
  199. </a>
  200. </li>
  201. <li>
  202. <a href="#" data-toggle="collapse" data-target="#products" class="collapsed active">
  203. <i class="fa fa-bar-chart-o"></i>
  204. <span class="nav-label">Note</span>
  205. <span class="fa fa-chevron-left pull-right"></span>
  206. </a>
  207.  
  208. </li>
  209. <li>
  210. <a href="#">
  211. <i class="fa fa-laptop"></i>
  212. <span class="nav-label">Maculator</span>
  213. </a>
  214. </li>
  215. <li>
  216. <a href="#" data-toggle="collapse" data-target="#tables" class="collapsed active">
  217. <i class="fa fa-table"></i>
  218. <span class="nav-label">Orarul</span>
  219. <span class="fa fa-chevron-left pull-right"></span>
  220. </a>
  221. </li>
  222. </ul>
  223. </div>
  224.  
  225.  
  226. <div class="sidebar right ">
  227. <ul class="list-sidebar bg-defoult">
  228. <li>
  229. <a href="#" data-toggle="collapse" data-target="#dashboard" class="collapsed active">
  230. <i class="fa fa-th-large"></i>
  231. <span class="nav-label"> Noutăți </span>
  232. <span class="fa fa-chevron-left pull-right"></span>
  233. </a>
  234. </li>
  235. <li>
  236. <a href="#" data-toggle="collapse" data-target="#tables" class="collapsed active">
  237. <i class="fa fa-table"></i>
  238. <span class="nav-label">Calendar</span>
  239. <span class="fa fa-chevron-left pull-right"></span>
  240. </a>
  241. </li>
  242. </ul>
  243. </div>
  244.  
  245. </div>
  246.  
  247.  
  248.  
  249.  
  250.  
  251.  
  252. <div class="content">
  253. <div class="container-fluid">
  254. <input class="search-form" type="text" placeholder="Căutare" aria-label="Search">
  255.  
  256.  
  257.  
  258.  
  259.  
  260.  
  261.  
  262. <div class="courses">
  263. <div class="ol-sm-4 course" style="width: 18rem;">
  264. <img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQr6x6mLuI3I25mwwNSKjnhwx7ezgbyS28te3iDEoQnO4aO3JwA" alt="Card image cap">
  265. <h5 class="card-title">CSS</h5>
  266. <svg viewBox="0 0 36 36" class="circular-chart">
  267. <path class="circle" stroke-dasharray="17, 100" d="M18 2.0845
  268. a 15.9155 15.9155 0 0 1 0 31.831
  269. a 15.9155 15.9155 0 0 1 0 -31.831" />
  270. </svg>
  271. <a href="#" class="btn btn-primary">Treci la curs</a>
  272. </div>
  273. <div class="ol-sm-4 course" style="width: 18rem;">
  274. <img class="card-img-top" src="http://isabelledumortier.itfrog.org/wp-content/uploads/2018/04/screenshot-0.jpg" alt="Card image cap">
  275. <h5 class="card-title">Html</h5>
  276. <svg viewBox="0 0 36 36" class="circular-chart">
  277. <path class="circle" stroke-dasharray="95, 100" d="M18 2.0845
  278. a 15.9155 15.9155 0 0 1 0 31.831
  279. a 15.9155 15.9155 0 0 1 0 -31.831" />
  280. </svg>
  281. <a href="#" class="btn btn-primary">Treci la curs</a>
  282. </div>
  283. <div class="ol-sm-4 course" style="width: 18rem;">
  284. <img class="card-img-top" src="https://i.ytimg.com/vi/Tbo_1jtpLWs/maxresdefault.jpg" alt="Card image cap">
  285. <h5 class="card-title">React JS</h5>
  286. <svg viewBox="0 0 36 36" class="circular-chart">
  287. <path class="circle" stroke-dasharray="78, 100" d="M18 2.0845
  288. a 15.9155 15.9155 0 0 1 0 31.831
  289. a 15.9155 15.9155 0 0 1 0 -31.831" />
  290. </svg>
  291. <a href="#" class="btn btn-primary">Treci la curs</a>
  292. </div>
  293. <div class="ol-sm-4 course" style="width: 18rem;">
  294. <img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_chGoJJVPU0fAItS0c5ljFdLH7bFIsQMgvEzVJyfmKBmdlHVt" alt="Card image cap">
  295. <h5 class="card-title">Excel</h5>
  296. <svg viewBox="0 0 36 36" class="circular-chart">
  297. <path class="circle" stroke-dasharray="30, 100" d="M18 2.0845
  298. a 15.9155 15.9155 0 0 1 0 31.831
  299. a 15.9155 15.9155 0 0 1 0 -31.831" />
  300. </svg>
  301. <a href="#" class="btn btn-primary">Treci la curs</a>
  302. </div>
  303. </div>
  304.  
  305.  
  306.  
  307. </div>
  308.  
  309. </div>
  310.  
  311.  
  312.  
  313.  
  314.  
  315.  
  316.  
  317.  
  318.  
  319.  
  320.  
  321.  
  322.  
  323.  
  324.  
  325. </aside>
  326. </div>
  327. <script>
  328. $(document).ready(function () {
  329. $('.button-left').click(function () {
  330. $('.sidebar').toggleClass('fliph');
  331. $('.content').toggleClass('fliph');
  332.  
  333. });
  334.  
  335. });
  336. </script>
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!