API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 4th, 2018
401
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.91 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <title>My App</title>
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
  9. <link href="css/normalize.css" rel="stylesheet">
  10. <link href="css/toggle-switch.css" rel="stylesheet" />
  11. <link href="css/grid.css" rel="stylesheet">
  12. <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  13. <link href="css/styles.css" rel="stylesheet">
  14. </head>
  15.  
  16. <body>
  17.  
  18. <div class="container">
  19. <div class="header">
  20. <ul class="top-nav">
  21. <li class="names"><strong>Jackie</strong>App&trade;</li>
  22. <li><img class="bell" src="icons/icon-bell.svg" alt="bell" width="25" onclick="myalert()">
  23. <p class="circle"></p>
  24. </li>
  25. <li class="border"><img class="avatar" src="icons/5.jpg" alt="avatar" height="40" width="40"></li>
  26. <li>Jackie Craft</li>
  27.  
  28. </ul>
  29. </div>
  30.  
  31. <div class="nav">
  32. <ul class="left-nav">
  33. <li>
  34. <a href="dashboard"><img src="icons/icon-dashboard.svg" alt="dashboard" width="25"> </a>
  35. </li>
  36. <li>
  37. <a href="members"><img src="icons/icon-members.svg" alt="members" width="25"></a>
  38. </li>
  39. <li>
  40. <a href="visits"><img src="icons/icon-visits.svg" alt="visits" width="25"></a>
  41. </li>
  42. <li>
  43. <a href="settings"><img src="icons/icon-settings.svg" alt="settings" width="25"></a>
  44. </li>
  45.  
  46. </ul>
  47. </div>
  48.  
  49. <div class="main">
  50. <div class="search">
  51. <h2> Dashboard </h2>
  52. <input class="searchBar" type='text' placeholder='Search' id='search-text-input' />
  53. <div class="alert">
  54. <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  55. <strong>Alert!</strong> You have five new members today!
  56. </div>
  57. </div>
  58.  
  59. <div class="lineChart">
  60. <div class="line">
  61. <ul class="timeline">
  62. <li class="traffic">Traffic</li>
  63. <li class="Hourly">Hourly</li>
  64. <li class="Daily">Daily</li>
  65. <li class="Weekly">Weekly</li>
  66. <li class="Monthly">Monthly</li>
  67. </ul>
  68. <canvas id="lineChart"></canvas>
  69. </div>
  70. </div>
  71.  
  72. <div class="barChart">
  73.  
  74. <div class="bar">
  75. <h3 class="dailyTraffic"> Daily Traffic </h3>
  76. <br>
  77. <canvas id="barChart"></canvas>
  78. </div>
  79. </div>
  80.  
  81. <div class="donutChart">
  82.  
  83. <div class="donut">
  84. <h3 class="mobile"> Mobile Users </h3>
  85. <canvas id="donutChart"></canvas>
  86. </div>
  87. </div>
  88. </div>
  89.  
  90. <div class="aside">
  91.  
  92. <div class="socialStats">
  93. <h3 class="stats"> Social Stats </h3>
  94. <div id="twitter" class="icons">
  95. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  96. <path d="M32 3.1c-1.2.5-2.4.9-3.8 1 1.4-.8 2.4-2.1 2.9-3.6-1.3.8-2.7 1.3-4.2 1.6C25.8.8 24 0 22.2 0c-3.6 0-6.6 2.9-6.6 6.6 0 .5.1 1 .2 1.5-5.5-.3-10.3-2.9-13.6-6.9-.6 1-.9 2.1-.9 3.3 0 2.3 1.2 4.3 2.9 5.5-1.1 0-2.1-.3-3-.8v.1c0 3.2 2.3 5.8 5.3 6.4-.6.1-1.1.2-1.7.2-.4 0-.8 0-1.2-.1.8 2.6 3.3 4.5 6.1 4.6-2.2 1.8-5.1 2.8-8.2 2.8-.5 0-1.1 0-1.6-.1 2.9 1.9 6.4 3 10.1 3 12.1 0 18.7-10 18.7-18.7v-.8c1.3-1 2.4-2.2 3.3-3.5z" />
  97. </svg>
  98. <div class="group">
  99. <h4 class="social"> Twitter</h4>
  100. <br>
  101. <h2 class="numbers"> 10,345 </h2>
  102. </div>
  103. </div>
  104.  
  105. <div id="facebook" class="icons">
  106. <svg enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  107. <path d="M40.43,21.739h-7.645v-5.014c0-1.883,1.248-2.322,2.127-2.322c0.877,0,5.395,0,5.395,0V6.125l-7.43-0.029 c-8.248,0-10.125,6.174-10.125,10.125v5.518h-4.77v8.53h4.77c0,10.947,0,24.137,0,24.137h10.033c0,0,0-13.32,0-24.137h6.77 L40.43,21.739z" />
  108. </svg>
  109. <div class="group">
  110. <h4 class="social"> Facebook</h4>
  111. <br>
  112. <h2 class="numbers"> 3,739 </h2>
  113. </div>
  114. </div>
  115.  
  116. <div id="google" class="icons">
  117. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  118. <path d="M17.7 25.7c0-.3 0-.5-.1-.8-.1-.2-.1-.5-.2-.7-.1-.2-.2-.4-.3-.7-.2-.2-.3-.4-.4-.6-.1-.2-.3-.3-.5-.6l-.5-.5c-.1-.1-.3-.3-.6-.5s-.5-.4-.6-.4-.3-.2-.6-.4-.5-.4-.6-.4h-1c-.7 0-1.4 0-2 .1-.7.1-1.4.2-2.1.5-.7.2-1.3.5-1.9.9s-1 .8-1.3 1.4c-.3.6-.5 1.3-.5 2.1 0 .9.2 1.7.7 2.3.5.7 1.1 1.2 1.8 1.6s1.5.7 2.3.9 1.6.3 2.4.3c.8 0 1.5-.1 2.2-.2.7-.2 1.3-.4 1.9-.8.6-.3 1.1-.8 1.4-1.4.3-.6.5-1.3.5-2.1zM15.4 9.1c0-.8-.1-1.6-.3-2.5-.2-.9-.5-1.7-.9-2.5s-.9-1.5-1.6-2c-.7-.5-1.5-.8-2.3-.8-1.2 0-2.1.4-2.8 1.3-.7.9-1 1.9-1 3.2 0 .6.1 1.2.2 1.9s.4 1.3.7 2c.3.7.7 1.3 1.1 1.8.4.5.9 1 1.5 1.3.6.3 1.2.5 1.9.5 1.2 0 2.1-.4 2.7-1.2.5-.7.8-1.7.8-3zM12.9 0h8.4l-2.6 1.5h-2.6c.9.6 1.6 1.4 2.1 2.4S19 6 19 7.1c0 .9-.1 1.8-.4 2.5-.3.7-.7 1.3-1.1 1.8-.4.4-.8.9-1.3 1.2-.4.4-.8.8-1.1 1.2-.3.4-.4.8-.4 1.3 0 .3.1.7.3 1 .2.3.5.6.8.9.3.3.7.6 1.1.9.4.3.8.7 1.2 1.1.4.4.8.8 1.1 1.3.3.5.6 1 .8 1.6.2.6.3 1.3.3 2 0 2.1-.9 3.9-2.7 5.4-1.9 1.7-4.6 2.5-8.1 2.5-.8 0-1.5-.1-2.3-.2-.8-.1-1.6-.3-2.3-.6-.8-.3-1.5-.7-2.1-1.1-.6-.4-1.1-1-1.5-1.7C1 27.6.8 26.9.8 26c0-.8.2-1.6.7-2.6.4-.8 1-1.5 1.8-2.1.8-.6 1.8-1.1 2.8-1.4 1-.3 2-.5 3-.7.9-.1 1.9-.2 2.9-.3-.8-1.1-1.2-2-1.2-2.9v-.5c0-.1.1-.3.1-.4 0-.1.1-.2.2-.4s.1-.3.1-.4c-.5.1-1 .1-1.3.1-1.9 0-3.5-.6-4.9-1.9-1.4-1.3-2-2.8-2-4.7C3 6 3.6 4.4 4.8 3 6 1.7 7.5.8 9.3.4c1.2-.3 2.4-.4 3.6-.4zm19.9 4.9v2.5h-4.9v4.9h-2.5V7.4h-4.9V4.9h4.9V0h2.5v4.9h4.9z" />
  119. </svg>
  120. <div class="group">
  121. <h4 class="social"> Google+</h4>
  122. <br>
  123. <h2 class="numbers"> 2,530 </h2></div>
  124. </div>
  125. </div>
  126. </div>
  127.  
  128. <div class="section">
  129. <div class="members">
  130. <div class="sectionTwo">
  131. <div class="memberOne">
  132. <h3>New Members</h3>
  133. <img class="icon" src="icons/1.jpg" alt="avatar" height="40" width="40">
  134. <p class="name last">Jonathan Keen </p>
  135. <br>
  136. <p class="email">JKeen@gmail.com</p>
  137. <p class="date"> 3/15/18 </p>
  138. </div>
  139. <div class="memberOne">
  140. <img class="icon" src="icons/2.jpg" alt="avatar" height="40" width="40">
  141. <p class="name last">Gary Long </p>
  142. <br>
  143. <p class="email">GaryL@gmail.com</p>
  144. <p class="date"> 3/16/18 </p>
  145. </div>
  146. <div class="memberOne">
  147. <img class="icon" src="icons/3.jpg" alt="avatar" height="40" width="40">
  148. <p class="name last">Anna Wu </p>
  149. <br>
  150. <p class="email">AnnaWu@gmail.com</p>
  151. <p class="date"> 3/17/18 </p>
  152. </div>
  153. <div class="memberOne">
  154. <img class="icon" src="icons/4.jpg" alt="avatar" height="40" width="40">
  155. <p class="name last"> Lynn Gilkey </p>
  156. <br>
  157. <p class="email">LynnG@gmail.com</p>
  158. <p class="date"> 3/18/18 </p>
  159. </div>
  160. </div>
  161. </div>
  162.  
  163. <div class="activity">
  164. <div class="sectionTwo">
  165. <div class="memberOne">
  166. <h3> Recent Activity </h3>
  167. <img class="icon" src="icons/1.jpg" alt="avatar" height="40" width="40">
  168. <p class="name">Jonathan Keen commented on <strong>YourApp's SEO Tips</strong></p>
  169. <br>
  170. <p class="days">4 hours ago</p>
  171. <p class="arrow"> &#8250; </p>
  172. </div>
  173. <div class="memberOne">
  174. <img class="icon" src="icons/2.jpg" alt="avatar" height="40" width="40">
  175. <p class="name">Gary Long liked the post <strong>Facebook Changes</strong> </p>
  176. <br>
  177. <p class="days">5 hours ago</p>
  178. <p class="arrow"> &#8250; </p>
  179. </div>
  180. <div class="memberOne">
  181. <img class="icon" src="icons/3.jpg" alt="avatar" height="40" width="40">
  182. <p class="name">Anna Wu commented on <strong>Facebook's Changes</strong> </p>
  183. <br>
  184. <p class="days">7 hours ago </p>
  185. <p class="arrow"> &#8250; </p>
  186. </div>
  187. <div class="memberOne">
  188. <img class="icon" src="icons/4.jpg" alt="avatar" height="40" width="40">
  189. <p class="name"> Lynn Gilkey posted <strong> YourApp's SEO Tips</strong></p>
  190. <br>
  191. <p class="days">1 day ago</p>
  192. <p class="arrow"> &#8250; </p>
  193. </div>
  194. </div>
  195. </div>
  196.  
  197. <div class="users">
  198. <h3> Message User </h3>
  199. <div class="searchField">
  200. <form class="message" action="index.html" method="post">
  201. <input id="select_username" type="text" placeholder="Search For User">
  202.  
  203. <textarea id="message" placeholder="Message for User"></textarea>
  204.  
  205. <button id="btn" class="send" type="submit">Send</button>
  206. <p id="success"></p>
  207.  
  208. </form>
  209. </div>
  210. </div>
  211.  
  212. <div class="settings">
  213. <h3> Settings </h3>
  214. <div class="settingsField">
  215. <div class="spanOne">Send Email Notifications
  216. <label class="switch-light switch-ios on" onclick="">
  217. <input type="checkbox">
  218.  
  219. <span>
  220. <span>Off</span>
  221. <span>On</span>
  222. <a></a>
  223. </span>
  224. </label>
  225. </div>
  226.  
  227. <div class="spanTwo">
  228. Set Profile To Public
  229. <label class="switch-light switch-ios off" onclick="">
  230. <input type="checkbox">
  231.  
  232. <span>
  233. <span>Off</span>
  234. <span>On</span>
  235. <a></a>
  236. </span>
  237. </label>
  238. </div>
  239.  
  240. <div class="user-timezone">
  241. <select name="timezone">
  242. <option value="" disabled selected>Select Timezone</option>
  243. <option value="-10.0">(GMT -10:00) Hawaii</option>
  244. <option value="-9.0">(GMT -9:00) Alaska</option>
  245. <option value="-8.0">(GMT -8:00) Pacific Time</option>
  246. <option value="-7.0">(GMT -7:00) Mountain Time</option>
  247. <option value="-6.0">(GMT -6:00) Central Time</option>
  248. <option value="-5.0">(GMT -5:00) Eastern Time</option>
  249.  
  250. </select>
  251. </div>
  252. <button class="settingsButton save">SAVE</button>
  253. <button class="settingsButton cancel">CANCEL</button>
  254. </div>
  255. </div>
  256. </div>
  257. </div>
  258.  
  259. <script src="js/script.js"></script>
  260. </body>
  261.  
  262. </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!