browser-demo.html 3.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <!doctype html>
  2. <head>
  3. <meta charset="utf-8">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  5. <title>Drop – Browser Demo</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  7. <link rel="icon" href="http://static.hubspot.com/favicon.ico">
  8. <script type="text/javascript" src="//use.typekit.net/ghy0wve.js"></script>
  9. <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
  10. <!-- Drop themes -->
  11. <link rel="stylesheet" href="//github.hubspot.com/tether/dist/css/tether-theme-arrows-dark.css" />
  12. <!-- Browser demo styles -->
  13. <link rel="stylesheet" href="//github.hubspot.com/tether/docs/welcome/css/browser-demo.css" />
  14. </head>
  15. <body>
  16. <div class="browser-demo">
  17. <div class="top"><div class="title"></div></div>
  18. <div class="bottom">
  19. <div class="left">
  20. <div class="item"></div>
  21. <div class="item"></div>
  22. <div class="item"></div>
  23. <div class="item"></div>
  24. <div class="item"></div>
  25. <div class="item"></div>
  26. <div class="item"></div>
  27. <div class="item"></div>
  28. <div class="item"></div>
  29. <div class="item"></div>
  30. <div class="item"></div>
  31. <div class="item"></div>
  32. <div class="item"></div>
  33. <div class="item"></div>
  34. <div class="item"></div>
  35. <div class="item"></div>
  36. <div class="item"></div>
  37. <div class="item"></div>
  38. <div class="item"></div>
  39. <div class="item"></div>
  40. <div class="item"></div>
  41. <div class="item"></div>
  42. <div class="item"></div>
  43. <div class="item"></div>
  44. <div class="item"></div>
  45. <div class="item"></div>
  46. <div class="item"></div>
  47. <div class="item"></div>
  48. <div class="item"></div>
  49. <div class="item"></div>
  50. <div class="item"></div>
  51. <div class="item"></div>
  52. </div>
  53. <div class="right">
  54. <div class="title"></div>
  55. <p>
  56. <div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div>
  57. </p>
  58. <p>
  59. <div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div>
  60. </p>
  61. </div>
  62. </div>
  63. </div>
  64. <!-- Tether javascript -->
  65. <script src="//github.hubspot.com/tether/dist/js/tether.min.js"></script>
  66. <!-- Welcome docs javascript -->
  67. <script src="//github.hubspot.com/tether/docs/welcome/js/log.js"></script>
  68. <script src="//github.hubspot.com/tether/docs/welcome/js/jquery.js"></script>
  69. <script src="//github.hubspot.com/tether/docs/welcome/js/drop.js"></script>
  70. </body>
  71. </html>