No Description

offcanvas_1488020710.html 8.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta name="description" content="">
  8. <meta name="author" content="">
  9. <title>Off Canvas Template for Bootstrap</title>
  10. <!-- Bootstrap core CSS -->
  11. <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  12. <!-- Custom styles for this template -->
  13. <link href="offcanvas.css" rel="stylesheet">
  14. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  15. <!--[if lt IE 9]>
  16. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  17. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  18. <![endif]-->
  19. </head>
  20. <body>
  21. <nav class="navbar navbar-fixed-top navbar-inverse">
  22. <div class="container">
  23. <div class="navbar-header">
  24. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  25. <span class="sr-only">Toggle navigation</span>
  26. <span class="icon-bar"></span>
  27. <span class="icon-bar"></span>
  28. <span class="icon-bar"></span>
  29. </button>
  30. <a class="navbar-brand" href="#">Dowse Workshops</a>
  31. </div>
  32. <div id="navbar" class="collapse navbar-collapse">
  33. <ul class="nav navbar-nav">
  34. <li class="active">
  35. <a href="#">Home</a>
  36. </li>
  37. <li>
  38. <a href="#about">About</a>
  39. </li>
  40. <li>
  41. <a href="#contact">Contact</a>
  42. </li>
  43. </ul>
  44. </div>
  45. <!-- /.nav-collapse -->
  46. </div>
  47. <!-- /.container -->
  48. </nav>
  49. <!-- /.navbar -->
  50. <div class="container">
  51. <div class="row row-offcanvas row-offcanvas-right">
  52. <div class="col-xs-12 col-sm-9">
  53. <p class="pull-right visible-xs"><button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button></p>
  54. <div class="jumbotron">
  55. <h1><p class="p1"><span class="s1"><b>THE DOWSE WORKSHOP</b>&nbsp;</span></p><p class="p1"><span class="s1">is a 3 day intensive design workshop dedicated to set up, explore and reflect on the notion of private network, shared resources, net awareness through dowse.&nbsp;</span></p></h1>
  56. </div>
  57. <div class="row">
  58. <div class="col-xs-6 col-lg-4">
  59. <h2></h2>
  60. <h5><b>Network Sensing Workshop</b></h5>
  61. <p class="p1"><span class="s1">In 2016 you must be able to manner your devices behaviour.</span></p>
  62. <p class="p1"><span class="s1">And first you need to be aware of what they do!</span></p>
  63. <p></p>
  64. <p class="p1"><span class="s1">We have created an instrument that allows you to “sense” the activity of your own network, take care of its doing, light heartedly share your resources with your friends or neighbours and protect your home-LAN.</span></p>
  65. <p></p>
  66. </div>
  67. <!--/.col-xs-6.col-lg-4-->
  68. <div class="col-xs-6 col-lg-4">
  69. <h2><p class="p1"><span class="s1"><b></b></span></p></h2>
  70. <h5><b>DOWSE IS GREAT FOR MAKERS</b></h5>
  71. <p></p>
  72. <p class="p1"><span class="s1"><b>Dowse</b> allows you to practice the art of “dowsing the net” wile at the same time you create your own smart meters, your responsive environments or objects. <br><br></span></p>
  73. <p>The dowse device talks to you using Websockets MQTT and OSC so interfaces with anything that uses open standards and protocols, allowing you to create the interface you want and inventing new ones.<a class="btn btn-default" href="#" role="button">View details »</a></p>
  74. </div>
  75. <!--/.col-xs-6.col-lg-4-->
  76. <div class="col-xs-6 col-lg-4">
  77. <h2><h5><b>WHAD DO I LEARN?</b></h5></h2>
  78. <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  79. <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
  80. </div>
  81. <!--/.col-xs-6.col-lg-4-->
  82. <div class="col-xs-6 col-lg-4">
  83. <h2><h5><b>THE DOWSE WORKSHOP</b>&nbsp;</h5></h2>
  84. <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  85. <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
  86. </div>
  87. <!--/.col-xs-6.col-lg-4-->
  88. <div class="col-xs-6 col-lg-4">
  89. <h2><h5><b>SET DOWSE IN YOUR HOME</b>,</h5></h2>
  90. <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  91. <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
  92. </div>
  93. <!--/.col-xs-6.col-lg-4-->
  94. <div class="col-xs-6 col-lg-4">
  95. <h2>Heading</h2>
  96. <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  97. <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
  98. </div>
  99. <!--/.col-xs-6.col-lg-4-->
  100. </div>
  101. <!--/row-->
  102. </div>
  103. <!--/.col-xs-12.col-sm-9-->
  104. <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
  105. <div class="list-group">
  106. <a href="#" class="list-group-item active">Link</a>
  107. <a href="#" class="list-group-item">Link</a>
  108. <a href="#" class="list-group-item">Link</a>
  109. <a href="#" class="list-group-item">Link</a>
  110. <a href="#" class="list-group-item">Link</a>
  111. <a href="#" class="list-group-item">Link</a>
  112. <a href="#" class="list-group-item">Link</a>
  113. <a href="#" class="list-group-item">Link</a>
  114. <a href="#" class="list-group-item">Link</a>
  115. <a href="#" class="list-group-item">Link</a>
  116. </div>
  117. </div>
  118. <!--/.sidebar-offcanvas-->
  119. </div>
  120. <!--/row-->
  121. <hr>
  122. <footer>
  123. <p>&copy; Company 2014</p>
  124. </footer>
  125. </div>
  126. <!--/.container-->
  127. <!-- Bootstrap core JavaScript
  128. ================================================== -->
  129. <!-- Placed at the end of the document so the pages load faster -->
  130. <script src="assets/js/jquery.min.js"></script>
  131. <script src="bootstrap/js/bootstrap.min.js"></script>
  132. <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  133. <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
  134. <script>
  135. $(document).ready(function () {
  136. $('[data-toggle="offcanvas"]').click(function () {
  137. $('.row-offcanvas').toggleClass('active')
  138. });
  139. });
  140. </script>
  141. </body>
  142. </html>