-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
executable file
·299 lines (263 loc) · 14.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<html>
<head>
<!-- twitter cards -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@bricobiomtl" />
<meta name="twitter:title" content="Bricobio: Montreal's Biological Maker/Hackerspace" />
<meta name="twitter:description" content="Curious about biology or have ideas for projects? Come visit us at brico.bio!" />
<meta name="twitter:image" content="http://brico.bio/images/bricobio-twitter-small.png" />
<!-- jQuery for menu-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div.hamburger").click(function(){
$("ul.menu-hidden").toggleClass("menu");
$("h3").toggleClass("h3-blue");
});
});
</script>
<!-- hamburger menu -->
<link rel="stylesheet" href="dist/hamburgers.css">
<!-- google analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-71752332-1', 'auto');
ga('send', 'pageview');
</script>
<!-- favicon -->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- CSS and fonds -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Ubuntu:300' rel='stylesheet'>
<script src="https://use.fontawesome.com/0fc3cb0fdc.js"></script>
<title>brico.bio</title>
<!--smooth scrolling -->
<script type="text/javascript" src="javascript/jquery.min.js"></script>
<script type="text/javascript" src="javascript/smoothscroll.js"></script>
</head>
<body>
<header>
<div class="header">
<div class="hamburger hamburger--collapse">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<div style="text-align:center;position:relative;width:300px;margin-left:auto;margin-right:auto;">
<a class="smoothScroll" href="#home">
<img style="height:50px" src="images/bricobio-text.png"/>
</a>
</div>
</div>
</header>
<ul class="menu-hidden">
<li class="menu"><a class="smoothScroll" href="#home">Home</a></li>
<li class="menu"><a href="http://eepurl.com/bM_2m5">Mailing List | Courriel</a></li>
<li class="menu"><a class="smoothScroll" href="#page1">Makerspace | FabLab</a></li>
<li class="menu"><a class="smoothScroll" href="#page2">Events | Événements</a></li>
<li class="menu"><a class="smoothScroll" href="#page3">How to Join | Comment nous joindre</a></li>
<li class="menu"><a class="smoothScroll" href="#page4">Contact</a></li>
<li class="menu"><a class="smoothScroll" href="#page5">About | À propos</a></li>
<li class="menu"><a href="archive.html">Archive</a><li>
</ul>
<div class="content">
<div class="box" id="home" style="padding-bottom:20px;height:auto;text-align:center;background-image:url(images/background.jpg);">
<div style="margin:auto;background-color:rgba(255, 255, 255, 0.8);padding:20px;width:600px">
<h3>A makerspace and community biology lab in Montréal</h3>
<p>We're making scientific tools and knowledge available and accessible for as many people as possible! Come share and experiment with us!
<p>--
<h3>Un makerspace / laboratoire en biologie communautaire à Montréal</h3>
<p>Nous facilitons l'accès à des outils et connaissances scientifiques pour le plus grand nombre possible de personnes! Venez partager et expérimenter avec nous!
<ul class="top">
<li><a href="http://eepurl.com/bM_2m5"><button class="top">Mailing List | Courriel</button></a>
<hr>
<li><a class="smoothScroll" href="index.html#page1"><button class="top">Makerspace | FabLab</button></a>
<li><a class="smoothScroll" href="index.html#page2"><button class="top">Events | Événements</button></a>
<li><a class="smoothScroll" href="index.html#page3"><button class="top">How to Join | Comment nous joindre</button></a>
<li><a class="smoothScroll" href="index.html#page4"><button class="top">Contact</button></a>
<li><a class="smoothScroll" href="index.html#page5"><button class="top">About | À propos</button></a>
</ul>
</div>
</div>
<hr>
<div class="box" id="page1">
<h1 style="text-align:center">Makerspace / Fab Lab / Bio Lab</h1>
<div class="column2">
<p>Bricobio is a shared workshop/lab for doing biology. To access the space you can join our community by becoming a member or volunteer!</p>
<p>At our space we have...</p>
<ul>
<li>Micro and molecular biology tools
<li>Aquariums, incubators, fridge and freezer storage
<li>sterile area (coming soon!)
<li>3D printing, electronics and other maker tools via <a href="http://heliosmakerspace.ca">Helios Makerspace</a>
</ul>
<hr>
<p>which you can use to...</p>
<ul>
<li>Experiment with DNA testing and editing
<li>Grow food, fungi, fabric, algae, or other materials
<li>Learn about synthetic biology, cellular agriculture and other future technologies
</ul>
<p>Volunteers provide safety training to all members.</p>
</div>
<div class="column2" style="background-color:#f2f2f2">
<p>Bricobio est un atelier / laboratoire partagé pour la biologie. Pour accéder à l'espace, vous pouvez rejoindre notre communauté en devenant membre ou bénévole!</p>
<p>Dans notre espace, nous avons ...
<ul>
<li>Outils de micro et de biologie moléculaire
<li>Aquariums, incubateurs, réfrigérateurs et congélateurs
<li>zone stérile (à venir bientôt!)
<li>Impression 3D, électronique et autres outils de fabrication via <a href="http://heliosmakerspace.ca">Helios Makerspace</a>
</ul>
<hr>
<p>que vous pouvez utiliser pour ...
<ul>
<li>Expérimenter les tests d'ADN et leur édition
<li>Cultivez de la nourriture, des champignons, du tissu, des algues ou d'autres matériaux
<li>En savoir plus sur la biologie synthétique, l'agriculture cellulaire et d'autres technologies futures
</ul>
<p>Les bénévoles offrent une formation sur la sécurité à tous les membres.</p>
</div>
<div style="size:auto;margin:auto;position:;text-align:center">
<img style="vertical-align:middle;width:400px;padding:20px;"src="images/event3.jpg">
</div>
</div>
<div class="box" id="page2">
<div class="column2">
<h1>Events</h1>
<p>We run or join events like hackathons and workshops throughout the year.
<p>Check <a href="http://brico.bio/archive.html">our archive</a> for info on our past events.</p>
<p>We usually meet for open lab hangouts on Wednesday or Thursday nights. <a href="http://eepurl.com/bM_2m5">Subscribe</a> to our mailing list to find out when we're meeting next!</p>
<hr>
</div>
<div class="column2" style="background-color:#f2f2f2">
<h1>Événements</h1>
<p>Nous organisons des événements comme des hackathons et des ateliers tout au cours de l'année.
<p>Consultez <a href="http://brico.bio/archive.html">nos archives</a> pour plus d'informations sur nos événements passés.
<p>Souvent nous rencontrons chaque mercredi ou jeudi pour des soirées ouverts. <a href="http://eepurl.com/bM_2m5">Inscris</a> à notre newsletter pour trouver quand est-il le prochain rencontre.
<hr>
</div>
<div style="size:auto;margin:auto;position:;text-align:center">
<img style="vertical-align:middle;width:400px;padding:20px;" src="images/event1.jpg">
<img style="vertical-align:middle;width:400px;padding:20px;"src="images/event2.jpg">
</div>
</div>
<div class="box" id="page3">
<div class="column2">
<h1>How to join the community</h1>
<h3>Join an open night!</h3>
<p>Find out by <a href="http://eepurl.com/bM_2m5">subscribing</a> to our mailing list! Usually we meet on Wednesday or Thursday nights.
<h3>Become a member or volunteer</h3>
<ul>
<li>Members get access to the space with supervision from a volunteer or during open hours (TBD).
<li>Members and volunteers can work on their own projects and use the equipment in the space.
<li>Volunteers help build/maintain the space and get free access!
<li>The weekly commitment for volunteers is 8 hours.
<li>Some experience is necessary.
</ul>
<h3>Start by filling out <a href="https://docs.google.com/forms/d/e/1FAIpQLSf26VnjQbMq45XLKx_dOXH5lCUhm3j2jS8WowV1eWJSerb87w/viewform?usp=sf_link" target="_blank">this form</a></h3>
<hr>
</div>
<div class="column2" style="background-color:#f2f2f2">
<h1>Comment joindre notre communauté</h1>
<h3>Participez à une soirée ouverte!</h3>
<p>Découvrez en vous <a href="http://eepurl.com/bM_2m5">abonnant</a> à notre liste de diffusion! Habituellement, nous nous rencontrons le mercredi ou le jeudi soir.
<h3>Devenir membre</h3>
<ul>
<li>Les membres ont accès avec la supervision d'un bénévole ou pendant les heures d'ouverture (à déterminer).
<li>Les membres et les bénévoles peuvent travailler sur leurs propres projets et utilisez l'équipement dans l'espace.
<li>Les bénévoles aident à construire / entretenir l'espace et obtenir un accès gratuit!
<li>L'engagement hebdomadaire pour des bénévoles de 8 heures.
<li>Une certaine expérience est nécessaire.
</ul>
<h3>Commencez avec <a href="https://docs.google.com/forms/d/e/1FAIpQLSf26VnjQbMq45XLKx_dOXH5lCUhm3j2jS8WowV1eWJSerb87w/viewform?usp=sf_link" target="_blank">ce formulaire</a></h3>
<hr>
</div>
</div>
<div class="box" id="page4">
<div class="column2">
<h1>Contact us!</h1>
<h1>Contactez nous!</h1>
<p>Location: Le beau quartier Saint-Henri, dans <a href="http://heliosmakerspace.ca">Helios Makerspace</a></p>
<p>Open hours / Heures d'ouverture: TBD</p>
<p>Find out when our next open night is by <a href="http://eepurl.com/bM_2m5">subscribing</a> to our mailing list!</p>
<p>Découvrez quand est-il notre prochaine soirée ouverte en vous <a href="http://eepurl.com/bM_2m5">abonnant</a> à notre liste de diffusion!</p>
<div style="text-align:center;">
<p> <a class="icon" href="mailto:info@heliosmakerspace.ca"><i class="fa fa-envelope fa-fw" aria-hidden="true"></i></a> <a class="icon" href="http://facebook.com/bricobio"><i class="fa fa-facebook-square fa-fw" aria-hidden="true"></i></a> <a class="icon" href="http://instagram.com/bricobio"><i class="fa fa-instagram fa-fw" aria-hidden="true"></i></a></p>
</div>
</div>
<div class="column2">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2797.7400359093895!2d-73.58423828444222!3d45.47504047910096!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cc9109cb4970185%3A0xe0d3362932b4728e!2sAtelier+Helios+Makerspace!5e0!3m2!1sen!2sus!4v1508295272472" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
<div class="box" id="page5">
<div class="column2">
<h1>More about us</h1>
<p>Like other maker or hacker spaces, our main goal is to make tools and knowledge for doing biology available and accessible to a wider community and general public. Our core values include:</p>
<div class="values">
<ul>
<li>Openness</li>
<li>Accessibility</li>
<li>Transparency</li>
<li>Community-focus</li>
<li>Safety
</ul>
</div>
<p>We are also sometimes known as biohackers, Do-it-yourself Biology (DIYBio) or community biologists.</p>
<p>We're also always looking for donations of equipment or materials that we can use in our labs. Please reach out if you can help!
<p>Come hang out!</p>
<p>Contact us at <a href="mailto:info@brico.bio">info@brico.bio</a>
<hr>
</div>
<div class="column2" style="background-color:#f2f2f2">
<h1>En plus à propos</h1>
<p>Comme les autres makerspace / fablabs / hackerspaces, notre bût primaire est de créer un espace et un communauté ouverts pour que le publique peut apprendre, faire des expériences et dévlopper des projets en biologie. Nos valeurs incluent:</p>
<div class="values">
<ul>
<li>Ouverture</li>
<li>Acces</li>
<li>Transparence</li>
<li>Communauté</li>
<li>Sécurité
</ul>
</div>
<p>Parfois, nous sommes aussi connus comme des "biohackers" et partie du mouvement de biologie faites-vous-même ou biologie communautaire.</p>
<p>Nous somme souvent en cherchant des dons des équipments et matières pour notre laboratoire. SVP contactez-nous si vous pouvez nous aider!
<p>Venez nous joindre!</p>
<p>Contactez nous à <a href="mailto:info@brico.bio">info@brico.bio</a>
<hr>
</div>
</div>
</div>
<script>
var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};
var hamburgers = document.querySelectorAll(".hamburger");
if (hamburgers.length > 0) {
forEach(hamburgers, function(hamburger) {
hamburger.addEventListener("click", function() {
this.classList.toggle("is-active");
}, false);
});
}
</script>
</body>
</html>