Browse Source

Add a jumbo image

and some small changes in raws
Federico Bonelli 2 years ago
parent
commit
27f61d2956

+ 59 - 0
_pgbackup/offcanvas_1488017629.css

@@ -0,0 +1,59 @@
1
+/*
2
+ * Style tweaks
3
+ * --------------------------------------------------
4
+ */
5
+html,
6
+body {
7
+  overflow-x: hidden; /* Prevent scroll on narrow devices */
8
+}
9
+body {
10
+  padding-top: 70px;
11
+}
12
+footer {
13
+  padding: 30px 0;
14
+}
15
+
16
+/*
17
+ * Off Canvas
18
+ * --------------------------------------------------
19
+ */
20
+@media screen and (max-width: 767px) {
21
+  .row-offcanvas {
22
+    position: relative;
23
+    -webkit-transition: all .25s ease-out;
24
+         -o-transition: all .25s ease-out;
25
+            transition: all .25s ease-out;
26
+  }
27
+
28
+  .row-offcanvas-right {
29
+    right: 0;
30
+  }
31
+
32
+  .row-offcanvas-left {
33
+    left: 0;
34
+  }
35
+
36
+  .row-offcanvas-right
37
+  .sidebar-offcanvas {
38
+    right: -50%; /* 6 columns */
39
+  }
40
+
41
+  .row-offcanvas-left
42
+  .sidebar-offcanvas {
43
+    left: -50%; /* 6 columns */
44
+  }
45
+
46
+  .row-offcanvas-right.active {
47
+    right: 50%; /* 6 columns */
48
+  }
49
+
50
+  .row-offcanvas-left.active {
51
+    left: 50%; /* 6 columns */
52
+  }
53
+
54
+  .sidebar-offcanvas {
55
+    position: absolute;
56
+    top: 0;
57
+    width: 50%; /* 6 columns */
58
+  }
59
+}

+ 137 - 0
_pgbackup/offcanvas_1488017629.html

@@ -0,0 +1,137 @@
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="#">Project name</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" style="background-image:url('file:///Users/fredd/Desktop/Screen%20Shot%202017-02-14%20at%2016.19.08.png');">
55
+                        <h1>Hello, world!</h1>
56
+                        <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
57
+                    </div>
58
+                    <div class="row">
59
+                        <div class="col-xs-6 col-lg-4">
60
+                            <h2>Heading</h2>
61
+                            <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>
62
+                            <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
63
+                        </div>
64
+                        <!--/.col-xs-6.col-lg-4-->
65
+                        <div class="col-xs-6 col-lg-4">
66
+                            <h2>Heading</h2>
67
+                            <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>
68
+                            <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
69
+                        </div>
70
+                        <!--/.col-xs-6.col-lg-4-->
71
+                        <div class="col-xs-6 col-lg-4">
72
+                            <h2>Heading</h2>
73
+                            <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>
74
+                            <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
75
+                        </div>
76
+                        <!--/.col-xs-6.col-lg-4-->
77
+                        <div class="col-xs-6 col-lg-4">
78
+                            <h2>Heading</h2>
79
+                            <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>
80
+                            <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
81
+                        </div>
82
+                        <!--/.col-xs-6.col-lg-4-->
83
+                        <div class="col-xs-6 col-lg-4">
84
+                            <h2>Heading</h2>
85
+                            <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>
86
+                            <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
87
+                        </div>
88
+                        <!--/.col-xs-6.col-lg-4-->
89
+                        <div class="col-xs-6 col-lg-4">
90
+                            <h2>Heading</h2>
91
+                            <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>
92
+                            <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
93
+                        </div>
94
+                        <!--/.col-xs-6.col-lg-4-->
95
+                    </div>
96
+                    <!--/row-->
97
+                </div>
98
+                <!--/.col-xs-12.col-sm-9-->
99
+                <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
100
+                    <div class="list-group">
101
+                        <a href="#" class="list-group-item active">Link</a>
102
+                        <a href="#" class="list-group-item">Link</a>
103
+                        <a href="#" class="list-group-item">Link</a>
104
+                        <a href="#" class="list-group-item">Link</a>
105
+                        <a href="#" class="list-group-item">Link</a>
106
+                        <a href="#" class="list-group-item">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
+                    </div>
112
+                </div>
113
+                <!--/.sidebar-offcanvas-->
114
+            </div>
115
+            <!--/row-->
116
+            <hr>
117
+            <footer>
118
+                <p>&copy; Company 2014</p>
119
+            </footer>
120
+        </div>
121
+        <!--/.container-->
122
+        <!-- Bootstrap core JavaScript
123
+    ================================================== -->
124
+        <!-- Placed at the end of the document so the pages load faster -->
125
+        <script src="assets/js/jquery.min.js"></script>
126
+        <script src="bootstrap/js/bootstrap.min.js"></script>
127
+        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
128
+        <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
129
+        <script>
130
+        $(document).ready(function () {
131
+            $('[data-toggle="offcanvas"]').click(function () {
132
+                $('.row-offcanvas').toggleClass('active')
133
+            });
134
+        });
135
+    </script>
136
+    </body>
137
+</html>

+ 73 - 0
_pgbackup/offcanvas_1488020710.css

@@ -0,0 +1,73 @@
1
+
2
+
3
+/*
4
+ * Style tweaks
5
+ * --------------------------------------------------
6
+ */
7
+
8
+html,
9
+body
10
+{
11
+    overflow-x: hidden;
12
+}
13
+
14
+body
15
+{
16
+    padding-top: 70px;
17
+    color: #000000;
18
+    background-color: #e2ecfb;
19
+}
20
+
21
+footer
22
+{
23
+    padding: 30px 0;
24
+}
25
+
26
+/*
27
+ * Off Canvas
28
+ * --------------------------------------------------
29
+ */
30
+
31
+@media screen and (max-width: 767px)
32
+{
33
+    .row-offcanvas
34
+    {
35
+        position: relative;
36
+        -webkit-transition: all .25s ease-out;
37
+        -o-transition: all .25s ease-out;
38
+        transition: all .25s ease-out;
39
+    }
40
+    .row-offcanvas-right
41
+    {
42
+        right: 0;
43
+    }
44
+    .row-offcanvas-left
45
+    {
46
+        left: 0;
47
+    }
48
+    .row-offcanvas-right
49
+  .sidebar-offcanvas
50
+    {
51
+        right: -50%;
52
+    }
53
+    .row-offcanvas-left
54
+  .sidebar-offcanvas
55
+    {
56
+        left: -50%;
57
+    }
58
+    .row-offcanvas-right.active
59
+    {
60
+        right: 50%;
61
+    }
62
+    .row-offcanvas-left.active
63
+    {
64
+        left: 50%;
65
+    }
66
+    .sidebar-offcanvas
67
+    {
68
+        position: absolute;
69
+        top: 0;
70
+        width: 50%;
71
+    }
72
+}
73
+

+ 142 - 0
_pgbackup/offcanvas_1488020710.html

@@ -0,0 +1,142 @@
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>

+ 73 - 0
_pgbackup/offcanvas_1488020948.css

@@ -0,0 +1,73 @@
1
+
2
+
3
+/*
4
+ * Style tweaks
5
+ * --------------------------------------------------
6
+ */
7
+
8
+html,
9
+body
10
+{
11
+    overflow-x: hidden;
12
+}
13
+
14
+body
15
+{
16
+    padding-top: 70px;
17
+    color: #000000;
18
+    background-color: #e2ecfb;
19
+}
20
+
21
+footer
22
+{
23
+    padding: 30px 0;
24
+}
25
+
26
+/*
27
+ * Off Canvas
28
+ * --------------------------------------------------
29
+ */
30
+
31
+@media screen and (max-width: 767px)
32
+{
33
+    .row-offcanvas
34
+    {
35
+        position: relative;
36
+        -webkit-transition: all .25s ease-out;
37
+        -o-transition: all .25s ease-out;
38
+        transition: all .25s ease-out;
39
+    }
40
+    .row-offcanvas-right
41
+    {
42
+        right: 0;
43
+    }
44
+    .row-offcanvas-left
45
+    {
46
+        left: 0;
47
+    }
48
+    .row-offcanvas-right
49
+  .sidebar-offcanvas
50
+    {
51
+        right: -50%;
52
+    }
53
+    .row-offcanvas-left
54
+  .sidebar-offcanvas
55
+    {
56
+        left: -50%;
57
+    }
58
+    .row-offcanvas-right.active
59
+    {
60
+        right: 50%;
61
+    }
62
+    .row-offcanvas-left.active
63
+    {
64
+        left: 50%;
65
+    }
66
+    .sidebar-offcanvas
67
+    {
68
+        position: absolute;
69
+        top: 0;
70
+        width: 50%;
71
+    }
72
+}
73
+

+ 221 - 0
_pgbackup/offcanvas_1488020948.html

@@ -0,0 +1,221 @@
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
+                <!--/.col-xs-12.col-sm-9-->
53
+                <!--/.sidebar-offcanvas-->
54
+            </div>
55
+            <div class="jumbotron">
56
+                <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>
57
+            </div>
58
+            <div class="row">
59
+                <div class="row">
60
+</div>
61
+                <blockquote> 
62
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> 
63
+                    <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
64
+                </blockquote>
65
+                <!--/.col-xs-6.col-lg-4-->
66
+                <!--/.col-xs-6.col-lg-4-->
67
+                <!--/.col-xs-6.col-lg-4-->
68
+                <!--/.col-xs-6.col-lg-4-->
69
+                <!--/.col-xs-6.col-lg-4-->
70
+                <!--/.col-xs-6.col-lg-4-->
71
+            </div>
72
+            <div class="col-md-4"> 
73
+                <img src="img/DowseIntro.png" width="300" /> 
74
+            </div>
75
+            <div class="row">
76
+                <div class="col-xs-6 col-lg-4">
77
+                    <h2></h2>
78
+                    <h5><b>Bring your network traffic to your senses!</b></h5>
79
+                    <p class="p1"><span class="s1">In 2016 you must be able to manner your devices behaviour.</span></p>
80
+                    <p class="p1"><span class="s1">And first you need to be aware of what they do!</span></p>
81
+                    <p></p>
82
+                    <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>
83
+                    <p></p>
84
+                </div>
85
+                <div class="col-xs-6 col-lg-4">
86
+                    <h2></h2>
87
+                    <h5><b><p class="p1"><span class="s1">List of Workshops and shows 2016/2017</span></p></b></h5>
88
+                    <p class="p1"></p>
89
+                    <ul>
90
+                        <li class="li1">
91
+                            <span class="s2"><a href="https://transmediale.de/content/off-the-cloud-zone">TRANSMEDIALE “off the clowd” Berlin January 2016</a></span>
92
+                        </li>
93
+                        <li class="li1">
94
+                            <span class="s3"></span>
95
+                            <a href=" https://liveperformersmeeting.net/editions/2016-amsterdam/artists/dyne/performances/dowse-digital-network-appliance-for-home-based-lan/"><span class="s2">LPM - Live Performers Meeting, Amsterdam May 2016&nbsp;</span></a>
96
+                        </li>
97
+                        <li class="li1">
98
+                            <span class="s3"></span>
99
+                            <a href="https://hackersanddesigners.nl/#/HDSA_2016._If_you_are_so_smart_why_are_you_so_poor"><span class="s2">Hackers and Founders Amsterdam July 2016&nbsp;</span></a>
100
+                        </li>
101
+                        <li class="li1">
102
+                            <span class="s3"></span>
103
+                            <span class="s2"><a href="http://wemake.cc/tag/dowse/">Milan @wemake January 2017</a></span>
104
+                        </li>
105
+                        <li class="li1">
106
+                            <span class="s3"></span>
107
+                            <span class="s2"><a href="http://www.ddw.nl/evenement/667">Dutch Design Week - Sensemaker 2016&nbsp;</a></span>
108
+                        </li>
109
+                        <li class="li1">
110
+                            <span class="s3"></span>
111
+                            <span class="s2"><a href="https://www.thingscon.nl/schedule/">Things Conn Amsterdam 2016&nbsp;</a></span>
112
+                        </li>
113
+                    </ul>
114
+                    <p class="p1"><span class="s1"></span></p>
115
+                    <p></p>
116
+                    <p class="p1"><span class="s1"></span></p>
117
+                    <p></p>
118
+                </div>
119
+                <!--/.col-xs-6.col-lg-4-->
120
+                <!--/.col-xs-6.col-lg-4-->
121
+                <!--/.col-xs-6.col-lg-4-->
122
+                <!--/.col-xs-6.col-lg-4-->
123
+                <!--/.col-xs-6.col-lg-4-->
124
+                <!--/.col-xs-6.col-lg-4-->
125
+            </div>
126
+            <div class="row">
127
+                <div class="col-xs-6 col-lg-4">
128
+                    <h2></h2>
129
+                    <h5><b>SET DOWSE IN YOUR HOME</b>,</h5>
130
+                    <p class="p1"><span class="s1">With a dowse box you can sense and switch off any unwanted network activity.</span></p>
131
+                    <p class="p1"><span class="s1">dyne.org hackers and artists will guide you through in making your own dowse box to bring home and in inventing</span></p>
132
+                    <p class="p1"><span class="s1">ways to bring to your attention events interfacing with it.</span></p>
133
+                    <p class="p1"><span class="s1"><b></b></span></p>
134
+                    <p>more info:&nbsp; <a href="http://www.dowse.eu">www.dowse.eu</a></p>
135
+                </div>
136
+                <div class="col-md-4">
137
+                    <h3>Dyne.org labs</h3>
138
+                    <img src="img/cafudda.png" width="300" />
139
+                    <i>DOWSE is developed by dyne.org, your favorite free-software Think&amp;do Tank</i> 
140
+                </div>
141
+                <div class="col-xs-6 col-lg-4">
142
+                    <h2></h2>
143
+                    <h5><b>THE DOWSE WORKSHOP</b>&nbsp;</h5>
144
+                    <p class="p1"><span class="s1"><b>WORKSHOP COST/TIME:</b> <b>150€</b> euros/person/day (<b>300€</b> if B-to-B, and for educational event ASK);, Raspi 3 included, MAX 20 people (10:00 → 17:00)</span></p>
145
+                    <p><b style="line-height: 1.42857143;">WHAT YOU GET HOME WITH YOU: </b>A fully functioning dowse 0.9 box, knowledge on how customise it and some awareness about internet flows and the controller you build.&nbsp;</p>
146
+                </div>
147
+            </div>
148
+            <hr>
149
+            <div class="row">
150
+                <div class="col-xs-6 col-lg-4">
151
+                    <h2><p class="p1"><span class="s1"><b></b></span></p></h2>
152
+                    <h5><b>DOWSE IS GREAT FOR MAKERS</b></h5>
153
+                    <p></p>
154
+                    <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>
155
+                    <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.</p>
156
+                </div>
157
+                <div class="col-xs-6 col-lg-4">
158
+                    <h2></h2>
159
+                    <h5></h5>
160
+                    <p class="p1"><span class="s1"><b>WHAD DO I LEARN?</b></span></p>
161
+                    <ul>
162
+                        <li class="li1">
163
+                            <span class="s2"></span>
164
+                            <span class="s1">to install and configure DOWSE</span>
165
+                        </li>
166
+                        <li class="li1">
167
+                            <span class="s2"></span>
168
+                            <span class="s1">Basic Dowsing techniques using gource and netdata.</span>
169
+                        </li>
170
+                        <li class="li1">
171
+                            <span class="s2"></span>
172
+                            <span class="s1">To analyse situations were to use Dowse and think about user cases</span>
173
+                        </li>
174
+                        <li class="li1">
175
+                            <span class="s2"></span>
176
+                            <span class="s1">To use MQTT to easily design complex interaction through NODE RED or Pure data</span>
177
+                        </li>
178
+                        <li class="li1">
179
+                            <span class="s2"></span>
180
+                            <span class="s1">To create objects that respond to network events found by Dowse as alarms, sensors, lights, etc.</span>
181
+                        </li>
182
+                        <li class="li1">
183
+                            <span class="s2"></span>
184
+                            <span class="s1">To send home traffic related events to social networks (Twitter, Irc, FB, Telegram)&nbsp;</span>
185
+                        </li>
186
+                    </ul>
187
+                    <p></p>
188
+                </div>
189
+                <div class="col-sm-6 col-md-4"> 
190
+                    <div class="thumbnail"> 
191
+                        <img alt="" src="img/wemakeWS.png"> 
192
+                        <div class="caption"> 
193
+                            <h3>Share Your Dowse Projects</h3> 
194
+                            <p class="p1">www.dowse.eu/projects&nbsp; <br></p>
195
+                        </div>                         
196
+                    </div>                     
197
+                </div>
198
+            </div>
199
+            <!--/row-->
200
+            <hr>
201
+            <footer>
202
+                <p>© dyne.org 2017</p>
203
+            </footer>
204
+        </div>
205
+        <!--/.container-->
206
+        <!-- Bootstrap core JavaScript
207
+    ================================================== -->
208
+        <!-- Placed at the end of the document so the pages load faster -->
209
+        <script src="assets/js/jquery.min.js"></script>
210
+        <script src="bootstrap/js/bootstrap.min.js"></script>
211
+        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
212
+        <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
213
+        <script>
214
+        $(document).ready(function () {
215
+            $('[data-toggle="offcanvas"]').click(function () {
216
+                $('.row-offcanvas').toggleClass('active')
217
+            });
218
+        });
219
+    </script>
220
+    </body>
221
+</html>

+ 73 - 0
_pgbackup/offcanvas_1488035468.css

@@ -0,0 +1,73 @@
1
+
2
+
3
+/*
4
+ * Style tweaks
5
+ * --------------------------------------------------
6
+ */
7
+
8
+html,
9
+body
10
+{
11
+    overflow-x: hidden;
12
+}
13
+
14
+body
15
+{
16
+    padding-top: 70px;
17
+    color: #000000;
18
+    background-color: #e2ecfb;
19
+}
20
+
21
+footer
22
+{
23
+    padding: 30px 0;
24
+}
25
+
26
+/*
27
+ * Off Canvas
28
+ * --------------------------------------------------
29
+ */
30
+
31
+@media screen and (max-width: 767px)
32
+{
33
+    .row-offcanvas
34
+    {
35
+        position: relative;
36
+        -webkit-transition: all .25s ease-out;
37
+        -o-transition: all .25s ease-out;
38
+        transition: all .25s ease-out;
39
+    }
40
+    .row-offcanvas-right
41
+    {
42
+        right: 0;
43
+    }
44
+    .row-offcanvas-left
45
+    {
46
+        left: 0;
47
+    }
48
+    .row-offcanvas-right
49
+  .sidebar-offcanvas
50
+    {
51
+        right: -50%;
52
+    }
53
+    .row-offcanvas-left
54
+  .sidebar-offcanvas
55
+    {
56
+        left: -50%;
57
+    }
58
+    .row-offcanvas-right.active
59
+    {
60
+        right: 50%;
61
+    }
62
+    .row-offcanvas-left.active
63
+    {
64
+        left: 50%;
65
+    }
66
+    .sidebar-offcanvas
67
+    {
68
+        position: absolute;
69
+        top: 0;
70
+        width: 50%;
71
+    }
72
+}
73
+

+ 221 - 0
_pgbackup/offcanvas_1488035468.html

@@ -0,0 +1,221 @@
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
+                <!--/.col-xs-12.col-sm-9-->
53
+                <!--/.sidebar-offcanvas-->
54
+            </div>
55
+            <div class="jumbotron">
56
+                <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>
57
+            </div>
58
+            <div class="row">
59
+                <div class="row">
60
+</div>
61
+                <blockquote> 
62
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> 
63
+                    <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
64
+                </blockquote>
65
+                <!--/.col-xs-6.col-lg-4-->
66
+                <!--/.col-xs-6.col-lg-4-->
67
+                <!--/.col-xs-6.col-lg-4-->
68
+                <!--/.col-xs-6.col-lg-4-->
69
+                <!--/.col-xs-6.col-lg-4-->
70
+                <!--/.col-xs-6.col-lg-4-->
71
+            </div>
72
+            <div class="col-md-4"> 
73
+                <img src="img/DowseIntro.png" width="300" /> 
74
+            </div>
75
+            <div class="row">
76
+                <div class="col-xs-6 col-lg-4">
77
+                    <h2></h2>
78
+                    <h5><b>Bring your network traffic to your senses!</b></h5>
79
+                    <p class="p1"><span class="s1">In 2016 you must be able to manner your devices behaviour.</span></p>
80
+                    <p class="p1"><span class="s1">And first you need to be aware of what they do!</span></p>
81
+                    <p></p>
82
+                    <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>
83
+                    <p></p>
84
+                </div>
85
+                <div class="col-xs-6 col-lg-4">
86
+                    <h2></h2>
87
+                    <h5><b><p class="p1"><span class="s1">List of Workshops and shows 2016/2017</span></p></b></h5>
88
+                    <p class="p1"></p>
89
+                    <ul>
90
+                        <li class="li1">
91
+                            <span class="s2"><a href="https://transmediale.de/content/off-the-cloud-zone">TRANSMEDIALE “off the clowd” Berlin January 2016</a></span>
92
+                        </li>
93
+                        <li class="li1">
94
+                            <span class="s3"></span>
95
+                            <a href=" https://liveperformersmeeting.net/editions/2016-amsterdam/artists/dyne/performances/dowse-digital-network-appliance-for-home-based-lan/"><span class="s2">LPM - Live Performers Meeting, Amsterdam May 2016&nbsp;</span></a>
96
+                        </li>
97
+                        <li class="li1">
98
+                            <span class="s3"></span>
99
+                            <a href="https://hackersanddesigners.nl/#/HDSA_2016._If_you_are_so_smart_why_are_you_so_poor"><span class="s2">Hackers and Founders Amsterdam July 2016&nbsp;</span></a>
100
+                        </li>
101
+                        <li class="li1">
102
+                            <span class="s3"></span>
103
+                            <span class="s2"><a href="http://wemake.cc/tag/dowse/">Milan @wemake January 2017</a></span>
104
+                        </li>
105
+                        <li class="li1">
106
+                            <span class="s3"></span>
107
+                            <span class="s2"><a href="http://www.ddw.nl/evenement/667">Dutch Design Week - Sensemaker 2016&nbsp;</a></span>
108
+                        </li>
109
+                        <li class="li1">
110
+                            <span class="s3"></span>
111
+                            <span class="s2"><a href="https://www.thingscon.nl/schedule/">Things Conn Amsterdam 2016&nbsp;</a></span>
112
+                        </li>
113
+                    </ul>
114
+                    <p class="p1"><span class="s1"></span></p>
115
+                    <p></p>
116
+                    <p class="p1"><span class="s1"></span></p>
117
+                    <p></p>
118
+                </div>
119
+                <!--/.col-xs-6.col-lg-4-->
120
+                <!--/.col-xs-6.col-lg-4-->
121
+                <!--/.col-xs-6.col-lg-4-->
122
+                <!--/.col-xs-6.col-lg-4-->
123
+                <!--/.col-xs-6.col-lg-4-->
124
+                <!--/.col-xs-6.col-lg-4-->
125
+            </div>
126
+            <div class="row">
127
+                <div class="col-xs-6 col-lg-4">
128
+                    <h2></h2>
129
+                    <h5><b>SET DOWSE IN YOUR HOME</b>,</h5>
130
+                    <p class="p1"><span class="s1">With a dowse box you can sense and switch off any unwanted network activity.</span></p>
131
+                    <p class="p1"><span class="s1">dyne.org hackers and artists will guide you through in making your own dowse box to bring home and in inventing</span></p>
132
+                    <p class="p1"><span class="s1">ways to bring to your attention events interfacing with it.</span></p>
133
+                    <p class="p1"><span class="s1"><b></b></span></p>
134
+                    <p>more info:&nbsp; <a href="http://www.dowse.eu">www.dowse.eu</a></p>
135
+                </div>
136
+                <div class="col-md-4">
137
+                    <h3>Dyne.org labs</h3>
138
+                    <img src="img/cafudda.png" width="300" />
139
+                    <i>DOWSE is developed by dyne.org, your favorite free-software Think&amp;do Tank</i> 
140
+                </div>
141
+                <div class="col-xs-6 col-lg-4">
142
+                    <h2></h2>
143
+                    <h5><b>THE DOWSE WORKSHOP</b>&nbsp;</h5>
144
+                    <p class="p1"><span class="s1"><b>WORKSHOP COST/TIME:</b> <b>150€</b> euros/person/day (<b>300€</b> if B-to-B, and for educational event ASK);, Raspi 3 included, MAX 20 people (10:00 → 17:00)</span></p>
145
+                    <p><b style="line-height: 1.42857143;">WHAT YOU GET HOME WITH YOU: </b>A fully functioning dowse 0.9 box, knowledge on how customise it and some awareness about internet flows and the controller you build.&nbsp;</p>
146
+                </div>
147
+            </div>
148
+            <hr>
149
+            <div class="row">
150
+                <div class="col-xs-6 col-lg-4">
151
+                    <h2><p class="p1"><span class="s1"><b></b></span></p></h2>
152
+                    <h5><b>DOWSE IS GREAT FOR MAKERS</b></h5>
153
+                    <p></p>
154
+                    <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>
155
+                    <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.</p>
156
+                </div>
157
+                <div class="col-xs-6 col-lg-4">
158
+                    <h2></h2>
159
+                    <h5></h5>
160
+                    <p class="p1"><span class="s1"><b>WHAD DO I LEARN?</b></span></p>
161
+                    <ul>
162
+                        <li class="li1">
163
+                            <span class="s2"></span>
164
+                            <span class="s1">to install and configure DOWSE</span>
165
+                        </li>
166
+                        <li class="li1">
167
+                            <span class="s2"></span>
168
+                            <span class="s1">Basic Dowsing techniques using gource and netdata.</span>
169
+                        </li>
170
+                        <li class="li1">
171
+                            <span class="s2"></span>
172
+                            <span class="s1">To analyse situations were to use Dowse and think about user cases</span>
173
+                        </li>
174
+                        <li class="li1">
175
+                            <span class="s2"></span>
176
+                            <span class="s1">To use MQTT to easily design complex interaction through NODE RED or Pure data</span>
177
+                        </li>
178
+                        <li class="li1">
179
+                            <span class="s2"></span>
180
+                            <span class="s1">To create objects that respond to network events found by Dowse as alarms, sensors, lights, etc.</span>
181
+                        </li>
182
+                        <li class="li1">
183
+                            <span class="s2"></span>
184
+                            <span class="s1">To send home traffic related events to social networks (Twitter, Irc, FB, Telegram)&nbsp;</span>
185
+                        </li>
186
+                    </ul>
187
+                    <p></p>
188
+                </div>
189
+                <div class="col-sm-6 col-md-4"> 
190
+                    <div class="thumbnail"> 
191
+                        <img alt="" src="img/wemakeWS.png"> 
192
+                        <div class="caption"> 
193
+                            <h3>Share Your Dowse Projects</h3> 
194
+                            <p class="p1">www.dowse.eu/projects&nbsp; <br></p>
195
+                        </div>                         
196
+                    </div>                     
197
+                </div>
198
+            </div>
199
+            <!--/row-->
200
+            <hr>
201
+            <footer>
202
+                <p>© dyne.org 2017</p>
203
+            </footer>
204
+        </div>
205
+        <!--/.container-->
206
+        <!-- Bootstrap core JavaScript
207
+    ================================================== -->
208
+        <!-- Placed at the end of the document so the pages load faster -->
209
+        <script src="assets/js/jquery.min.js"></script>
210
+        <script src="bootstrap/js/bootstrap.min.js"></script>
211
+        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
212
+        <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
213
+        <script>
214
+        $(document).ready(function () {
215
+            $('[data-toggle="offcanvas"]').click(function () {
216
+                $('.row-offcanvas').toggleClass('active')
217
+            });
218
+        });
219
+    </script>
220
+    </body>
221
+</html>

+ 73 - 0
_pgbackup/offcanvas_1488197172.css

@@ -0,0 +1,73 @@
1
+
2
+
3
+/*
4
+ * Style tweaks
5
+ * --------------------------------------------------
6
+ */
7
+
8
+html,
9
+body
10
+{
11
+    overflow-x: hidden;
12
+}
13
+
14
+body
15
+{
16
+    padding-top: 70px;
17
+    color: #000000;
18
+    background-color: #e2ecfb;
19
+}
20
+
21
+footer
22
+{
23
+    padding: 30px 0;
24
+}
25
+
26
+/*
27
+ * Off Canvas
28
+ * --------------------------------------------------
29
+ */
30
+
31
+@media screen and (max-width: 767px)
32
+{
33
+    .row-offcanvas
34
+    {
35
+        position: relative;
36
+        -webkit-transition: all .25s ease-out;
37
+        -o-transition: all .25s ease-out;
38
+        transition: all .25s ease-out;
39
+    }
40
+    .row-offcanvas-right
41
+    {
42
+        right: 0;
43
+    }
44
+    .row-offcanvas-left
45
+    {
46
+        left: 0;
47
+    }
48
+    .row-offcanvas-right
49
+  .sidebar-offcanvas
50
+    {
51
+        right: -50%;
52
+    }
53
+    .row-offcanvas-left
54
+  .sidebar-offcanvas
55
+    {
56
+        left: -50%;
57
+    }
58
+    .row-offcanvas-right.active
59
+    {
60
+        right: 50%;
61
+    }
62
+    .row-offcanvas-left.active
63
+    {
64
+        left: 50%;
65
+    }
66
+    .sidebar-offcanvas
67
+    {
68
+        position: absolute;
69
+        top: 0;
70
+        width: 50%;
71
+    }
72
+}
73
+

+ 254 - 0
_pgbackup/offcanvas_1488197172.html

@@ -0,0 +1,254 @@
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
+                <!--/.col-xs-12.col-sm-9-->
53
+                <!--/.sidebar-offcanvas-->
54
+            </div>
55
+            <div class="jumbotron">
56
+                <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>
57
+            </div>
58
+            <div class="row">
59
+                <div class="row">
60
+</div>
61
+                <!--/.col-xs-6.col-lg-4-->
62
+                <!--/.col-xs-6.col-lg-4-->
63
+                <!--/.col-xs-6.col-lg-4-->
64
+                <!--/.col-xs-6.col-lg-4-->
65
+                <!--/.col-xs-6.col-lg-4-->
66
+                <!--/.col-xs-6.col-lg-4-->
67
+            </div>
68
+            <div class="col-md-4"> 
69
+                <img src="img/DowseIntro.png" width="380" /> 
70
+            </div>
71
+            <div class="row">
72
+                <div class="col-xs-6 col-lg-4 pull-right">
73
+                    <h2></h2>
74
+                    <h5><b>Bring your network traffic to your senses!</b></h5>
75
+                    <p class="p1"><span class="s1">In 2016 you must be able to manner your devices behaviour.</span></p>
76
+                    <p class="p1"><span class="s1">And first you need to be aware of what they do!</span></p>
77
+                    <p></p>
78
+                    <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>
79
+                    <p></p>
80
+                </div>
81
+                <div class="col-xs-6 col-lg-4 pull-right">
82
+                    <h2></h2>
83
+                    <h5><b><p class="p1"><span class="s1">List of Workshops and shows 2016/2017</span></p></b></h5>
84
+                    <p class="p1"></p>
85
+                    <ul>
86
+                        <li class="li1">
87
+                            <span class="s2"><a href="https://transmediale.de/content/off-the-cloud-zone">TRANSMEDIALE “off the clowd” Berlin January 2016</a></span>
88
+                        </li>
89
+                        <li class="li1">
90
+                            <span class="s3"></span>
91
+                            <a href=" https://liveperformersmeeting.net/editions/2016-amsterdam/artists/dyne/performances/dowse-digital-network-appliance-for-home-based-lan/"><span class="s2">LPM - Live Performers Meeting, Amsterdam May 2016&nbsp;</span></a>
92
+                        </li>
93
+                        <li class="li1">
94
+                            <span class="s3"></span>
95
+                            <a href="https://hackersanddesigners.nl/#/HDSA_2016._If_you_are_so_smart_why_are_you_so_poor"><span class="s2">Hackers and Founders Amsterdam July 2016&nbsp;</span></a>
96
+                        </li>
97
+                        <li class="li1">
98
+                            <span class="s3"></span>
99
+                            <span class="s2"><a href="http://wemake.cc/tag/dowse/">Milan @wemake January 2017</a></span>
100
+                        </li>
101
+                        <li class="li1">
102
+                            <span class="s3"></span>
103
+                            <span class="s2"><a href="http://www.ddw.nl/evenement/667">Dutch Design Week - Sensemaker 2016&nbsp;</a></span>
104
+                        </li>
105
+                        <li class="li1">
106
+                            <span class="s3"></span>
107
+                            <span class="s2"><a href="https://www.thingscon.nl/schedule/">Things Conn Amsterdam 2016&nbsp;</a></span>
108
+                        </li>
109
+                    </ul>
110
+                    <p class="p1"><span class="s1"></span></p>
111
+                    <p></p>
112
+                    <p class="p1"><span class="s1"></span></p>
113
+                    <p></p>
114
+                </div>
115
+                <div class="col-xs-6 col-lg-4 pull-right">
116
+                    <h2></h2>
117
+                    <h5><b>SET DOWSE IN YOUR HOME</b>,</h5>
118
+                    <p class="p1"><span class="s1">With a dowse box you can sense and switch off any unwanted network activity.</span></p>
119
+                    <p class="p1"><span class="s1">dyne.org hackers and artists will guide you through in making your own dowse box to bring home and in inventing</span></p>
120
+                    <p class="p1"><span class="s1">ways to bring to your attention events interfacing with it.</span></p>
121
+                    <p class="p1"><span class="s1"><b></b></span></p>
122
+                    <p>more info:&nbsp; <a href="http://www.dowse.eu">www.dowse.eu</a></p>
123
+                </div>
124
+                <!--/.col-xs-6.col-lg-4-->
125
+                <!--/.col-xs-6.col-lg-4-->
126
+                <!--/.col-xs-6.col-lg-4-->
127
+                <!--/.col-xs-6.col-lg-4-->
128
+                <!--/.col-xs-6.col-lg-4-->
129
+                <!--/.col-xs-6.col-lg-4-->
130
+            </div>
131
+            <div class="row">
132
+                <div class="col-md-4">
133
+                    <img src="img/dowsebox.png" width="300" class="img-rounded pull-right" />
134
+                    <h3><p>&nbsp;</p></h3>
135
+                    <img src="img/Dyne_Labs.png" width="300" />
136
+                    <i>DOWSE is developed by dyne.org, your favorite free-software Think&amp;do Tank</i> 
137
+                </div>
138
+                <div class="col-xs-6 col-lg-4">
139
+                    <h2></h2>
140
+                    <h2><b>THE DOWSE WORKSHOP</b>&nbsp;</h2>
141
+                    <p class="p1"><span class="s1"><b>WORKSHOP COST/TIME:</b> <b>150€</b> euros/person/day (<b>300€</b> if B-to-B, and for educational event or hackmeeting ASK our hackers);, <br>Raspi 3 included, MAX 20 people (10:00 → 17:00)</span></p>
142
+                    <p><b style="line-height: 1.42857143;">WHAT YOU GET HOME WITH YOU: </b>A fully functioning dowse 0.9 box, knowledge on how customise it and some awareness about internet flows and the controller you build.&nbsp;</p>
143
+                </div>
144
+                <div class="col-sm-6 col-md-4"> 
145
+                    <div class="thumbnail"> 
146
+                        <img src="img/hackyourbox.png" alt=""> 
147
+                        <div class="caption"> 
148
+                            <h3>Hack Your Own Dowse&nbsp;</h3> 
149
+                            <p>Dowse can be installed on many hardware combination. We tested with Devuan minimal linux distro.</p>
150
+                            <p>If you want to share your experience check out our group on irc://irc.dyne.org #dowse</p>
151
+                            <img src="img/devuanLogo.png" width="200" />
152
+                            <p><br></p> 
153
+                            <p> </p>
154
+                        </div>                         
155
+                    </div>                     
156
+                </div>
157
+            </div>
158
+            <hr>
159
+            <div class="row">
160
+                <div class="thumbnail"> 
161
+                    <img alt="" src="img/wemakeWS.png" width="640"> 
162
+                    <div class="caption"> 
163
+                        <h3>Share Your Dowse Projects</h3> 
164
+                        <p class="p1">www.dowse.eu/projects&nbsp; <br></p>
165
+                    </div>                     
166
+                </div>
167
+                <div class="col-xs-6 col-lg-4">
168
+                    <h2><p class="p1"><span class="s1"><b></b></span></p></h2>
169
+                    <h5><b>DOWSE IS GREAT FOR MAKERS</b></h5>
170
+                    <p></p>
171
+                    <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>
172
+                    <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.</p>
173
+                </div>
174
+                <div class="col-xs-6 col-lg-4">
175
+                    <h2></h2>
176
+                    <h5></h5>
177
+                    <p class="p1"><span class="s1"><b>WHAT DO I LEARN?</b></span></p>
178
+                    <ul>
179
+                        <li class="li1">
180
+                            <span class="s2"></span>
181
+                            <span class="s1">to install and configure DOWSE</span>
182
+                        </li>
183
+                        <li class="li1">
184
+                            <span class="s2"></span>
185
+                            <span class="s1">Basic Dowsing techniques using gource and netdata.</span>
186
+                        </li>
187
+                        <li class="li1">
188
+                            <span class="s2"></span>
189
+                            <span class="s1">To analyse situations were to use Dowse and think about user cases</span>
190
+                        </li>
191
+                        <li class="li1">
192
+                            <span class="s2"></span>
193
+                            <span class="s1">To use MQTT to easily design complex interaction through NODE RED or Pure data</span>
194
+                        </li>
195
+                        <li class="li1">
196
+                            <span class="s2"></span>
197
+                            <span class="s1">To create objects that respond to network events found by Dowse as alarms, sensors, lights, etc.</span>
198
+                        </li>
199
+                        <li class="li1">
200
+                            <span class="s2"></span>
201
+                            <span class="s1">To send home traffic related events to social networks (Twitter, Irc, FB, Telegram)&nbsp;</span>
202
+                        </li>
203
+                    </ul>
204
+                    <p></p>
205
+                </div>
206
+                <img src="img/Logos_supported.png" width="400" class="pull-right" />
207
+                <div class="col-md-4">
208
+                    <h3>Mailing List</h3> 
209
+                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
210
+                    <form role="form"> 
211
+                        <div class="form-group"> 
212
+                            <label class="control-label" for="exampleInputEmail1">Email address</label>                             
213
+
214
+                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> 
215
+                        </div>                                                  
216
+
217
+                        <div class="form-group">                                                                                        
218
+</div>                         
219
+
220
+                        <div class="checkbox"> 
221
+                            <label class="control-label"> 
222
+                                <input type="checkbox"> Check me out                        
223
+                            </label>                             
224
+                        </div>                         
225
+
226
+                        <button type="submit" class="btn">Subscribe</button>                         
227
+                    </form>                     
228
+                </div>
229
+                <div class="col-sm-6 col-md-4">                      
230
+</div>
231
+            </div>
232
+            <!--/row-->
233
+            <hr>
234
+            <footer>
235
+                <p>© dyne.org 2017</p>
236
+            </footer>
237
+        </div>
238
+        <!--/.container-->
239
+        <!-- Bootstrap core JavaScript
240
+    ================================================== -->
241
+        <!-- Placed at the end of the document so the pages load faster -->
242
+        <script src="assets/js/jquery.min.js"></script>
243
+        <script src="bootstrap/js/bootstrap.min.js"></script>
244
+        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
245
+        <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
246
+        <script>
247
+        $(document).ready(function () {
248
+            $('[data-toggle="offcanvas"]').click(function () {
249
+                $('.row-offcanvas').toggleClass('active')
250
+            });
251
+        });
252
+    </script>
253
+    </body>
254
+</html>

+ 73 - 0
_pgbackup/offcanvas_1488283694.css

@@ -0,0 +1,73 @@
1
+
2
+
3
+/*
4
+ * Style tweaks
5
+ * --------------------------------------------------
6
+ */
7
+
8
+html,
9
+body
10
+{
11
+    overflow-x: hidden;
12
+}
13
+
14
+body
15
+{
16
+    padding-top: 70px;
17
+    color: #000000;
18
+    background-color: #e2ecfb;
19
+}
20
+
21
+footer
22
+{
23
+    padding: 30px 0;
24
+}
25
+
26
+/*
27
+ * Off Canvas
28
+ * --------------------------------------------------
29
+ */
30
+
31
+@media screen and (max-width: 767px)
32
+{
33
+    .row-offcanvas
34
+    {
35
+        position: relative;
36
+        -webkit-transition: all .25s ease-out;
37
+        -o-transition: all .25s ease-out;
38
+        transition: all .25s ease-out;
39
+    }
40
+    .row-offcanvas-right
41
+    {
42
+        right: 0;
43
+    }
44
+    .row-offcanvas-left
45
+    {
46
+        left: 0;
47
+    }
48
+    .row-offcanvas-right
49
+  .sidebar-offcanvas
50
+    {
51
+        right: -50%;
52
+    }
53
+    .row-offcanvas-left
54
+  .sidebar-offcanvas
55
+    {
56
+        left: -50%;
57
+    }
58
+    .row-offcanvas-right.active
59
+    {
60
+        right: 50%;
61
+    }
62
+    .row-offcanvas-left.active
63
+    {
64
+        left: 50%;
65
+    }
66
+    .sidebar-offcanvas
67
+    {
68
+        position: absolute;
69
+        top: 0;
70
+        width: 50%;
71
+    }
72
+}
73
+

+ 254 - 0
_pgbackup/offcanvas_1488283694.html

@@ -0,0 +1,254 @@
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
+                <!--/.col-xs-12.col-sm-9-->
53
+                <!--/.sidebar-offcanvas-->
54
+            </div>
55
+            <div class="jumbotron">
56
+                <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>
57
+            </div>
58
+            <div class="row">
59
+                <div class="row">
60
+</div>
61
+                <!--/.col-xs-6.col-lg-4-->
62
+                <!--/.col-xs-6.col-lg-4-->
63
+                <!--/.col-xs-6.col-lg-4-->
64
+                <!--/.col-xs-6.col-lg-4-->
65
+                <!--/.col-xs-6.col-lg-4-->
66
+                <!--/.col-xs-6.col-lg-4-->
67
+            </div>
68
+            <div class="col-md-4"> 
69
+                <img src="img/DowseIntro.png" width="380" /> 
70
+            </div>
71
+            <div class="row">
72
+                <div class="col-xs-6 col-lg-4 pull-right">
73
+                    <h2></h2>
74
+                    <h5><b>Bring your network traffic to your senses!</b></h5>
75
+                    <p class="p1"><span class="s1">In 2016 you must be able to manner your devices behaviour.</span></p>
76
+                    <p class="p1"><span class="s1">And first you need to be aware of what they do!</span></p>
77
+                    <p></p>
78
+                    <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>
79
+                    <p></p>
80
+                </div>
81
+                <div class="col-xs-6 col-lg-4 pull-right">
82
+                    <h2></h2>
83
+                    <h5><b><p class="p1"><span class="s1">List of Workshops and shows 2016/2017</span></p></b></h5>
84
+                    <p class="p1"></p>
85
+                    <ul>
86
+                        <li class="li1">
87
+                            <span class="s2"><a href="https://transmediale.de/content/off-the-cloud-zone">TRANSMEDIALE “off the clowd” Berlin January 2016</a></span>
88
+                        </li>
89
+                        <li class="li1">
90
+                            <span class="s3"></span>
91
+                            <a href=" https://liveperformersmeeting.net/editions/2016-amsterdam/artists/dyne/performances/dowse-digital-network-appliance-for-home-based-lan/"><span class="s2">LPM - Live Performers Meeting, Amsterdam May 2016&nbsp;</span></a>
92
+                        </li>
93
+                        <li class="li1">
94
+                            <span class="s3"></span>
95
+                            <a href="https://hackersanddesigners.nl/#/HDSA_2016._If_you_are_so_smart_why_are_you_so_poor"><span class="s2">Hackers and Founders Amsterdam July 2016&nbsp;</span></a>
96
+                        </li>
97
+                        <li class="li1">
98
+                            <span class="s3"></span>
99
+                            <span class="s2"><a href="http://wemake.cc/tag/dowse/">Milan @wemake January 2017</a></span>
100
+                        </li>
101
+                        <li class="li1">
102
+                            <span class="s3"></span>
103
+                            <span class="s2"><a href="http://www.ddw.nl/evenement/667">Dutch Design Week - Sensemaker 2016&nbsp;</a></span>
104
+                        </li>
105
+                        <li class="li1">
106
+                            <span class="s3"></span>
107
+                            <span class="s2"><a href="https://www.thingscon.nl/schedule/">Things Conn Amsterdam 2016&nbsp;</a></span>
108
+                        </li>
109
+                    </ul>
110
+                    <p class="p1"><span class="s1"></span></p>
111
+                    <p></p>
112
+                    <p class="p1"><span class="s1"></span></p>
113
+                    <p></p>
114
+                </div>
115
+                <div class="col-xs-6 col-lg-4 pull-right">
116
+                    <h2></h2>
117
+                    <h5><b>SET DOWSE IN YOUR HOME</b>,</h5>
118
+                    <p class="p1"><span class="s1">With a dowse box you can sense and switch off any unwanted network activity.</span></p>
119
+                    <p class="p1"><span class="s1">dyne.org hackers and artists will guide you through in making your own dowse box to bring home and in inventing</span></p>
120
+                    <p class="p1"><span class="s1">ways to bring to your attention events interfacing with it.</span></p>
121
+                    <p class="p1"><span class="s1"><b></b></span></p>
122
+                    <p>more info:&nbsp; <a href="http://www.dowse.eu">www.dowse.eu</a></p>
123
+                </div>
124
+                <!--/.col-xs-6.col-lg-4-->
125
+                <!--/.col-xs-6.col-lg-4-->
126
+                <!--/.col-xs-6.col-lg-4-->
127
+                <!--/.col-xs-6.col-lg-4-->
128
+                <!--/.col-xs-6.col-lg-4-->
129
+                <!--/.col-xs-6.col-lg-4-->
130
+            </div>
131
+            <div class="row">
132
+                <div class="col-md-4">
133
+                    <img src="img/dowsebox.png" width="300" class="img-rounded pull-right" />
134
+                    <h3><p>&nbsp;</p></h3>
135
+                    <img src="img/Dyne_Labs.png" width="300" />
136
+                    <i>DOWSE is developed by dyne.org, your favorite free-software Think&amp;do Tank</i> 
137
+                </div>
138
+                <div class="col-xs-6 col-lg-4">
139
+                    <h2></h2>
140
+                    <h2><b>THE DOWSE WORKSHOP</b>&nbsp;</h2>
141
+                    <p class="p1"><span class="s1"><b>WORKSHOP COST/TIME:</b> <b>150€</b> euros/person/day (<b>300€</b> if B-to-B, and for educational event or hackmeeting ASK our hackers);, <br>Raspi 3 included, MAX 20 people (10:00 → 17:00)</span></p>
142
+                    <p><b style="line-height: 1.42857143;">WHAT YOU GET HOME WITH YOU: </b>A fully functioning dowse 0.9 box, knowledge on how customise it and some awareness about internet flows and the controller you build.&nbsp;</p>
143
+                </div>
144
+                <div class="col-sm-6 col-md-4"> 
145
+                    <div class="thumbnail"> 
146
+                        <img src="img/hackyourbox.png" alt=""> 
147
+                        <div class="caption"> 
148
+                            <h3>Hack Your Own Dowse&nbsp;</h3> 
149
+                            <p>Dowse can be installed on many hardware combination. We tested with Devuan minimal linux distro.</p>
150
+                            <p>If you want to share your experience check out our group on irc://irc.dyne.org #dowse</p>
151
+                            <img src="img/devuanLogo.png" width="200" />
152
+                            <p><br></p> 
153
+                            <p> </p>
154
+                        </div>                         
155
+                    </div>                     
156
+                </div>
157
+            </div>
158
+            <hr>
159
+            <div class="row">
160
+                <div class="thumbnail"> 
161
+                    <img alt="" src="img/wemakeWS.png" width="640"> 
162
+                    <div class="caption"> 
163
+                        <h3>Share Your Dowse Projects</h3> 
164
+                        <p class="p1">www.dowse.eu/projects&nbsp; <br></p>
165
+                    </div>                     
166
+                </div>
167
+                <div class="col-xs-6 col-lg-4">
168
+                    <h2><p class="p1"><span class="s1"><b></b></span></p></h2>
169
+                    <h5><b>DOWSE IS GREAT FOR MAKERS</b></h5>
170
+                    <p></p>
171
+                    <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>
172
+                    <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.</p>
173
+                </div>
174
+                <div class="col-xs-6 col-lg-4">
175
+                    <h2></h2>
176
+                    <h5></h5>
177
+                    <p class="p1"><span class="s1"><b>WHAT DO I LEARN?</b></span></p>
178
+                    <ul>
179
+                        <li class="li1">
180
+                            <span class="s2"></span>
181
+                            <span class="s1">to install and configure DOWSE</span>
182
+                        </li>
183
+                        <li class="li1">
184
+                            <span class="s2"></span>
185
+                            <span class="s1">Basic Dowsing techniques using gource and netdata.</span>
186
+                        </li>
187
+                        <li class="li1">
188
+                            <span class="s2"></span>
189
+                            <span class="s1">To analyse situations were to use Dowse and think about user cases</span>
190
+                        </li>
191
+                        <li class="li1">
192
+                            <span class="s2"></span>
193
+                            <span class="s1">To use MQTT to easily design complex interaction through NODE RED or Pure data</span>
194
+                        </li>
195
+                        <li class="li1">
196
+                            <span class="s2"></span>
197
+                            <span class="s1">To create objects that respond to network events found by Dowse as alarms, sensors, lights, etc.</span>
198
+                        </li>
199
+                        <li class="li1">
200
+                            <span class="s2"></span>
201
+                            <span class="s1">To send home traffic related events to social networks (Twitter, Irc, FB, Telegram)&nbsp;</span>
202
+                        </li>
203
+                    </ul>
204
+                    <p></p>
205
+                </div>
206
+                <img src="img/Logos_supported.png" width="400" class="pull-right" />
207
+                <div class="col-md-4">
208
+                    <h3>Mailing List</h3> 
209
+                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
210
+                    <form role="form"> 
211
+                        <div class="form-group"> 
212
+                            <label class="control-label" for="exampleInputEmail1">Email address</label>                             
213
+
214
+                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> 
215
+                        </div>                                                  
216
+
217
+                        <div class="form-group">                                                                                        
218
+</div>                         
219
+
220
+                        <div class="checkbox"> 
221
+                            <label class="control-label"> 
222
+                                <input type="checkbox"> Check me out                        
223
+                            </label>                             
224
+                        </div>                         
225
+
226
+                        <button type="submit" class="btn">Subscribe</button>                         
227
+                    </form>                     
228
+                </div>
229
+                <div class="col-sm-6 col-md-4">                      
230
+</div>
231
+            </div>
232
+            <!--/row-->
233
+            <hr>
234
+            <footer>
235
+                <p>© dyne.org 2017</p>
236
+            </footer>
237
+        </div>
238
+        <!--/.container-->
239
+        <!-- Bootstrap core JavaScript
240
+    ================================================== -->
241
+        <!-- Placed at the end of the document so the pages load faster -->
242
+        <script src="assets/js/jquery.min.js"></script>
243
+        <script src="bootstrap/js/bootstrap.min.js"></script>
244
+        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
245
+        <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
246
+        <script>
247
+        $(document).ready(function () {
248
+            $('[data-toggle="offcanvas"]').click(function () {
249
+                $('.row-offcanvas').toggleClass('active')
250
+            });
251
+        });
252
+    </script>
253
+    </body>
254
+</html>

+ 73 - 0
_pgbackup/offcanvas_1488284035.css

@@ -0,0 +1,73 @@
1
+
2
+
3
+/*
4
+ * Style tweaks
5
+ * --------------------------------------------------
6
+ */
7
+
8
+html,
9
+body
10
+{
11
+    overflow-x: hidden;
12
+}
13
+
14
+body
15
+{
16
+    padding-top: 70px;
17
+    color: #000000;
18
+    background-color: #e2ecfb;
19
+}
20
+
21
+footer
22
+{
23
+    padding: 30px 0;
24
+}
25
+
26
+/*
27
+ * Off Canvas
28
+ * --------------------------------------------------
29
+ */
30
+
31
+@media screen and (max-width: 767px)
32
+{
33
+    .row-offcanvas
34
+    {
35
+        position: relative;
36
+        -webkit-transition: all .25s ease-out;
37
+        -o-transition: all .25s ease-out;
38
+        transition: all .25s ease-out;
39
+    }
40
+    .row-offcanvas-right
41
+    {
42
+        right: 0;
43
+    }
44
+    .row-offcanvas-left
45
+    {
46
+        left: 0;
47
+    }
48
+    .row-offcanvas-right
49
+  .sidebar-offcanvas
50
+    {
51
+        right: -50%;
52
+    }
53
+    .row-offcanvas-left
54
+  .sidebar-offcanvas
55
+    {
56
+        left: -50%;
57
+    }
58
+    .row-offcanvas-right.active
59
+    {
60
+        right: 50%;
61
+    }
62
+    .row-offcanvas-left.active
63
+    {
64
+        left: 50%;
65
+    }
66
+    .sidebar-offcanvas
67
+    {
68
+        position: absolute;
69
+        top: 0;
70
+        width: 50%;
71
+    }
72
+}
73
+

+ 249 - 0
_pgbackup/offcanvas_1488284035.html

@@ -0,0 +1,249 @@
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
+                <!--/.col-xs-12.col-sm-9-->
53
+                <!--/.sidebar-offcanvas-->
54
+            </div>
55
+            <div class="jumbotron">
56
+                <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>
57
+            </div>
58
+            <div class="row">
59
+                <div class="row">
60
+</div>
61
+                <!--/.col-xs-6.col-lg-4-->
62
+                <!--/.col-xs-6.col-lg-4-->
63
+                <!--/.col-xs-6.col-lg-4-->
64
+                <!--/.col-xs-6.col-lg-4-->
65
+                <!--/.col-xs-6.col-lg-4-->
66
+                <!--/.col-xs-6.col-lg-4-->
67
+            </div>
68
+            <div class="col-md-4"> 
69
+                <img src="img/DowseIntro.png" width="380" /> 
70
+            </div>
71
+            <div class="row">
72
+                <div class="col-xs-6 col-lg-4 pull-right">
73
+                    <h2></h2>
74
+                    <h5><b>Bring your network traffic to your senses!</b></h5>
75
+                    <p class="p1"><span class="s1">In 2016 you must be able to manner your devices behaviour.</span></p>
76
+                    <p class="p1"><span class="s1">And first you need to be aware of what they do!</span></p>
77
+                    <p></p>
78
+                    <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>
79
+                    <p></p>
80
+                </div>
81
+                <div class="col-xs-6 col-lg-4 pull-right">
82
+                    <h2></h2>
83
+                    <h5><b><p class="p1"><span class="s1">List of Workshops and shows 2016/2017</span></p></b></h5>
84
+                    <p class="p1"></p>
85
+                    <ul>
86
+                        <li class="li1">
87
+                            <span class="s2"><a href="https://transmediale.de/content/off-the-cloud-zone">TRANSMEDIALE “off the clowd” Berlin January 2016</a></span>
88
+                        </li>
89
+                        <li class="li1">
90
+                            <span class="s3"></span>
91
+                            <a href=" https://liveperformersmeeting.net/editions/2016-amsterdam/artists/dyne/performances/dowse-digital-network-appliance-for-home-based-lan/"><span class="s2">LPM - Live Performers Meeting, Amsterdam May 2016&nbsp;</span></a>
92
+                        </li>
93
+                        <li class="li1">
94
+                            <span class="s3"></span>
95
+                            <a href="https://hackersanddesigners.nl/#/HDSA_2016._If_you_are_so_smart_why_are_you_so_poor"><span class="s2">Hackers and Founders Amsterdam July 2016&nbsp;</span></a>
96
+                        </li>
97
+                        <li class="li1">
98
+                            <span class="s3"></span>
99
+                            <span class="s2"><a href="http://wemake.cc/tag/dowse/">Milan @wemake January 2017</a></span>
100
+                        </li>
101
+                        <li class="li1">
102
+                            <span class="s3"></span>
103
+                            <span class="s2"><a href="http://www.ddw.nl/evenement/667">Dutch Design Week - Sensemaker 2016&nbsp;</a></span>
104
+                        </li>
105
+                        <li class="li1">
106
+                            <span class="s3"></span>
107
+                            <span class="s2"><a href="https://www.thingscon.nl/schedule/">Things Conn Amsterdam 2016&nbsp;</a></span>
108
+                        </li>
109
+                    </ul>
110
+                    <p class="p1"><span class="s1"></span></p>
111
+                    <p></p>
112
+                    <p class="p1"><span class="s1"></span></p>
113
+                    <p></p>
114
+                </div>
115
+                <div class="col-xs-6 col-lg-4 pull-right">
116
+                    <h2></h2>
117
+                    <h5><b>SET DOWSE IN YOUR HOME</b>,</h5>
118
+                    <p class="p1"><span class="s1">With a dowse box you can sense and switch off any unwanted network activity.</span></p>
119
+                    <p class="p1"><span class="s1">dyne.org hackers and artists will guide you through in making your own dowse box to bring home and in inventing</span></p>
120
+                    <p class="p1"><span class="s1">ways to bring to your attention events interfacing with it.</span></p>
121
+                    <p class="p1"><span class="s1"><b></b></span></p>
122
+                    <p>more info:&nbsp; <a href="http://www.dowse.eu">www.dowse.eu</a></p>
123
+                </div>
124
+                <!--/.col-xs-6.col-lg-4-->
125
+                <!--/.col-xs-6.col-lg-4-->
126
+                <!--/.col-xs-6.col-lg-4-->
127
+                <!--/.col-xs-6.col-lg-4-->
128
+                <!--/.col-xs-6.col-lg-4-->
129
+                <!--/.col-xs-6.col-lg-4-->
130
+            </div>
131
+            <div class="row">
132
+                <div class="col-md-4">
133
+                    <img src="img/dowsebox.png" width="300" class="img-rounded pull-right" />
134
+                    <h3><p>&nbsp;</p></h3>
135
+                    <img src="img/Dyne_Labs.png" width="300" />
136
+                    <i>DOWSE is developed by dyne.org, your favorite free-software Think&amp;do Tank</i> 
137
+                </div>
138
+                <div class="col-xs-6 col-lg-4">
139
+                    <h2></h2>
140
+                    <h2><b>THE DOWSE WORKSHOP</b>&nbsp;</h2>
141
+                    <p class="p1"><span class="s1"><b>WORKSHOP COST/TIME:</b> <b>150€</b> euros/person/day (<b>300€</b> if B-to-B, and for educational event or hackmeeting ASK our hackers);, <br>Raspi 3 included, MAX 20 people (10:00 → 17:00)</span></p>
142
+                    <p><b style="line-height: 1.42857143;">WHAT YOU GET HOME WITH YOU: </b>A fully functioning dowse 0.9 box, knowledge on how customise it and some awareness about internet flows and the controller you build.&nbsp;</p>
143
+                </div>
144
+                <div class="col-sm-6 col-md-4"> 
145
+                    <div class="thumbnail">                          
146
+                        <div class="caption"> 
147
+                            <h3>Hack Your Own Dowse&nbsp;</h3> 
148
+                            <p>Dowse can be installed on many hardware combination. We tested with Devuan minimal linux distro.</p>
149
+                            <p>If you want to share your experience check out our group on irc://irc.dyne.org #dowse</p>
150
+                            <img src="img/devuanLogo.png" width="200" />
151
+                            <p><br></p> 
152
+                            <p> </p>
153
+                        </div>                         
154
+                    </div>                     
155
+                </div>
156
+            </div>
157
+            <hr>
158
+            <div class="row">
159
+                <div class="thumbnail"> 
160
+                    <img alt="" src="img/wemakeWS.png" width="640"> 
161
+                    <div class="caption"> 
162
+                        <h3>Share Your Dowse Projects</h3> 
163
+                        <p class="p1">www.dowse.eu/projects&nbsp; <br></p>
164
+                    </div>                     
165
+                </div>
166
+                <div class="col-xs-6 col-lg-4">
167
+                    <h2><p class="p1"><span class="s1"><b></b></span></p></h2>
168
+                    <h5><b>DOWSE IS GREAT FOR MAKERS</b></h5>
169
+                    <p></p>
170
+                    <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>
171
+                    <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.</p>
172
+                </div>
173
+                <div class="col-xs-6 col-lg-4">
174
+                    <h2></h2>
175
+                    <h5></h5>
176
+                    <p class="p1"><span class="s1"><b>WHAT DO I LEARN?</b></span></p>
177
+                    <ul>
178
+                        <li class="li1">
179
+                            <span class="s2"></span>
180
+                            <span class="s1">to install and configure DOWSE</span>
181
+                        </li>
182
+                        <li class="li1">
183
+                            <span class="s2"></span>
184
+                            <span class="s1">Basic Dowsing techniques using gource and netdata.</span>
185
+                        </li>
186
+                        <li class="li1">
187
+                            <span class="s2"></span>
188
+                            <span class="s1">To analyse situations were to use Dowse and think about user cases</span>
189
+                        </li>
190
+                        <li class="li1">
191
+                            <span class="s2"></span>
192
+                            <span class="s1">To use MQTT to easily design complex interaction through NODE RED or Pure data</span>
193
+                        </li>
194
+                        <li class="li1">
195
+                            <span class="s2"></span>
196
+                            <span class="s1">To create objects that respond to network events found by Dowse as alarms, sensors, lights, etc.</span>
197
+                        </li>
198
+                        <li class="li1">
199
+                            <span class="s2"></span>
200
+                            <span class="s1">To send home traffic related events to social networks (Twitter, Irc, FB, Telegram)&nbsp;</span>
201
+                        </li>
202
+                    </ul>
203
+                    <p></p>
204
+                </div>
205
+                <img src="img/Logos_supported.png" width="400" class="pull-right" />
206
+                <div class="col-md-4">
207
+                    <h3>Mailing List</h3> 
208
+                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
209
+                    <form role="form"> 
210
+                        <div class="form-group"> 
211
+                            <label class="control-label" for="exampleInputEmail1">Email address</label>                             
212
+                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> 
213
+                        </div>                         
214
+                        <div class="form-group"> 
215
+</div>                         
216
+                        <div class="checkbox"> 
217
+                            <label class="control-label"> 
218
+                                <input type="checkbox"> Check me out                        
219
+                            </label>                             
220
+                        </div>                         
221
+                        <button type="submit" class="btn">Subscribe</button>                         
222
+                    </form>                     
223
+                </div>
224
+                <div class="col-sm-6 col-md-4"> 
225
+</div>
226
+            </div>
227
+            <!--/row-->
228
+            <hr>
229
+            <footer>
230
+                <p>© dyne.org 2017</p>
231
+            </footer>
232
+        </div>
233
+        <!--/.container-->
234
+        <!-- Bootstrap core JavaScript
235
+    ================================================== -->
236
+        <!-- Placed at the end of the document so the pages load faster -->
237
+        <script src="assets/js/jquery.min.js"></script>
238
+        <script src="bootstrap/js/bootstrap.min.js"></script>
239
+        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
240
+        <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
241
+        <script>
242
+        $(document).ready(function () {
243
+            $('[data-toggle="offcanvas"]').click(function () {
244
+                $('.row-offcanvas').toggleClass('active')
245
+            });
246
+        });
247
+    </script>
248
+    </body>
249
+</html>

+ 73 - 0
_pgbackup/offcanvas_1488292805.css

@@ -0,0 +1,73 @@
1
+
2
+
3
+/*
4
+ * Style tweaks
5
+ * --------------------------------------------------
6
+ */
7
+
8
+html,
9
+body
10
+{
11
+    overflow-x: hidden;
12
+}
13
+
14
+body
15
+{
16
+    padding-top: 70px;
17
+    color: #000000;
18
+    background-color: #e2ecfb;
19
+}
20
+
21
+footer
22
+{
23
+    padding: 30px 0;
24
+}
25
+
26
+/*
27
+ * Off Canvas
28
+ * --------------------------------------------------
29
+ */
30
+
31
+@media screen and (max-width: 767px)
32
+{
33
+    .row-offcanvas
34
+    {
35
+        position: relative;
36
+        -webkit-transition: all .25s ease-out;
37
+        -o-transition: all .25s ease-out;
38
+        transition: all .25s ease-out;
39
+    }
40
+    .row-offcanvas-right
41
+    {
42
+        right: 0;
43
+    }
44
+    .row-offcanvas-left
45
+    {
46
+        left: 0;
47
+    }
48
+    .row-offcanvas-right
49
+  .sidebar-offcanvas
50
+    {
51
+        right: -50%;
52
+    }
53
+    .row-offcanvas-left
54
+  .sidebar-offcanvas
55
+    {
56
+        left: -50%;
57
+    }
58
+    .row-offcanvas-right.active
59
+    {
60
+        right: 50%;
61
+    }
62
+    .row-offcanvas-left.active
63
+    {
64
+        left: 50%;
65
+    }
66
+    .sidebar-offcanvas
67
+    {
68
+        position: absolute;
69
+        top: 0;
70
+        width: 50%;
71
+    }
72
+}
73
+

BIN
img/jumbo_01.jpg


+ 5 - 6
offcanvas.html

@@ -52,7 +52,7 @@
52 52
                 <!--/.col-xs-12.col-sm-9-->
53 53
                 <!--/.sidebar-offcanvas-->
54 54
             </div>
55
-            <div class="jumbotron">
55
+            <div class="jumbotron" style="background-image:url('img/jumbo_01.jpg');">
56 56
                 <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>
57 57
             </div>
58 58
             <div class="row">
@@ -66,8 +66,7 @@
66 66
                 <!--/.col-xs-6.col-lg-4-->
67 67
             </div>
68 68
             <div class="col-md-4"> 
69
-                <img src="img/DowseIntro.png" width="380" /> 
70
-            </div>
69
+</div>
71 70
             <div class="row">
72 71
                 <div class="col-xs-6 col-lg-4 pull-right">
73 72
                     <h2></h2>
@@ -142,7 +141,7 @@
142 141
                     <p><b style="line-height: 1.42857143;">WHAT YOU GET HOME WITH YOU: </b>A fully functioning dowse 0.9 box, knowledge on how customise it and some awareness about internet flows and the controller you build.&nbsp;</p>
143 142
                 </div>
144 143
                 <div class="col-sm-6 col-md-4"> 
145
-                    <div class="thumbnail">                          
144
+                    <div class="thumbnail"> 
146 145
                         <div class="caption"> 
147 146
                             <h3>Hack Your Own Dowse&nbsp;</h3> 
148 147
                             <p>Dowse can be installed on many hardware combination. We tested with Devuan minimal linux distro.</p>
@@ -156,8 +155,8 @@
156 155
             </div>
157 156
             <hr>
158 157
             <div class="row">
159
-                <div class="thumbnail"> 
160
-                    <img alt="" src="img/wemakeWS.png" width="640"> 
158
+                <img alt="" src="img/wemakeWS.png" width="400" class="pull.right">
159
+                <div class="thumbnail">                      
161 160
                     <div class="caption"> 
162 161
                         <h3>Share Your Dowse Projects</h3> 
163 162
                         <p class="p1">www.dowse.eu/projects&nbsp; <br></p>