index.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. <!DOCTYPE html>
  2. <html lang="fr">
  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="ROBOTS" content="INDEX, FOLLOW">
  8. <title>Laboratoire Ouvert Lyonnais — le LOL</title>
  9. <meta name="keywords" content="hackerspace, hacklab, DIY, bidouillage, informatique, électronique, arts numériques">
  10. <meta name="description" content="Présentation du LOL, hackerspace sur Lyon : localisation, projets en cours, vie courante.">
  11. <link rel="schema.dc" href="http://purl.org/dc/elements/1.1/">
  12. <meta name="dc.title" content="Laboratoire Ouvert Lyonnais — le LOL" lang="fr">
  13. <meta name="dc.description" content="Présentation du LOL, hackerspace sur Lyon : localisation, projets en cours, vie courante." lang="fr">
  14. <meta name="dc.language" content="fr">
  15. <meta name="dc.publisher" content="LOL">
  16. <meta name="dc.rights" content="Creative Commons by-sa 2.0 fr, https://creativecommons.org/licenses/by-sa/2.0/fr/">
  17. <meta name="dc.type" content="text">
  18. <meta name="dc.format" content="text/html">
  19. <meta name="dc.date" content="2011-04-28T22:03:31+02:00">
  20. <!-- Bootstrap -->
  21. <link rel="stylesheet" href="css/bootstrap.min.css">
  22. <!-- Optional theme -->
  23. <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  24. <link rel="stylesheet" href="css/style.css">
  25. <!-- Latest compiled and minified JavaScript -->
  26. <script src="js/bootstrap.min.js"></script>
  27. <!-- Bootstrap
  28. <link href="css/bootstrap.min.css" rel="stylesheet">
  29. -->
  30. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  31. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  32. <!--[if lt IE 9]>
  33. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  34. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  35. <![endif]-->
  36. </head>
  37. <body id="page-top" class="index">
  38. <nav class="navbar navbar-default navbar-fixed-top">
  39. <div class="container">
  40. <!-- Brand and toggle get grouped for better mobile display -->
  41. <div class="navbar-header page-scroll">
  42. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  43. <span class="sr-only">Toggle navigation</span>
  44. <span class="icon-bar"></span>
  45. <span class="icon-bar"></span>
  46. <span class="icon-bar"></span>
  47. </button>
  48. <a class="navbar-brand" href="#page-top">Laboratoire Ouvert Lyonnais</a>
  49. </div>
  50. <!-- Collect the nav links, forms, and other content for toggling -->
  51. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  52. <ul class="nav navbar-nav navbar-right">
  53. <li class="hidden">
  54. <a href="#page-top"></a>
  55. </li>
  56. <li class="page-scroll">
  57. <a href="#page-top">Accueil</a>
  58. </li>
  59. <li class="page-scroll">
  60. <a href="#about">À propos</a>
  61. </li>
  62. <li class="page-scroll">
  63. <a href="#contact">Contact</a>
  64. </li>
  65. <li class="page-scroll">
  66. <a href="irc://irc.geeknode.org/labolyon">IRC</a>
  67. </li>
  68. <li class="page-scroll">
  69. <a href="https://team.labolyon.fr">Mattermost</a>
  70. </li>
  71. <li class="page-scroll">
  72. <a href="https://git.labolyon.fr">Git</a>
  73. </li>
  74. </ul>
  75. </div>
  76. <!-- /.navbar-collapse -->
  77. </div>
  78. <!-- /.container-fluid -->
  79. </nav>
  80. <header>
  81. <div class="container">
  82. <div class="row">
  83. <div class="col-lg-12">
  84. <img class="img-responsive" src="img/lol.png" alt="logo du LOL">
  85. <div class="intro-text">
  86. <hr class="star-light">
  87. <span class="skills">Association - Rencontre - Échange - Partage</span>
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92. </header>
  93. <!-- About Section -->
  94. <section class="success" id="about">
  95. <div class="container">
  96. <div class="row">
  97. <div class="col-lg-12 text-center">
  98. <h2>À propos</h2>
  99. <hr class="star-light">
  100. </div>
  101. </div>
  102. <div class="row">
  103. <p>Le Laboratoire Ouvert Lyonnais (<abbr title="Laboratoire Ouvert Lyonnais">LOL</abbr>) est un <i lang="en">hackerspace</i> sur Lyon.</p>
  104. <!-- comment parler du PPRA sans le nommer ? :) -->
  105. <p>En <a href="http://labolyon.fr/blog/post/2011/01/12/Mise-en-place-d-un-hacker-space-lyonnais">début janvier 2011</a> un membre du <a href="http://logre.org/"><abbr title="Laboratoire Ouvert Grenoblois">LOG</abbr></a>, une paire de personnes impliquées dans la vie lyonnaise, et une pincée de gens venant de différents milieux technologiques (informaticiens barbus) et artistiques (ça chauffe, les flammes de la <a href="http://friche-rvi.org/">Friche RVI</a>) se sont rassemblées lors d'un apéro pour voir s'ils avaient envie de faire des choses ensemble. La réponse fut oui, restait à savoir comment. Le LOL était lancé.</p>
  106. <!-- repris sans vergogne depuis le LOG http://logre.org/ -->
  107. <p>Le LOL rassemble des passionnés de bidouillages en tous genres. Électronique, informatique, mécanique, chimie, arts numériques, cuisine expérimentale, etc. : chacun amène son savoir-faire et sa curiosité dans un mélange ludique de création, bricolage et de détournement technologique en tout genre. Vous avez un projet à partager&nbsp;? C'est l'occasion de le présenter, et peut-être trouver de nouveaux contributeurs.</p>
  108. <p>L'une des vocations du LOL est de fournir à ses membres un lieu pour héberger leurs projets ainsi que d'organiser des présentations publiques. Il est aussi ouvert sur l'extérieur par le biais de partenariats avec les institutionnels, animations ou participation à des événements.</p>
  109. <p>Un autre objectif du LOL est le partage des connaissances, et l'aide à la ré-appropriation des technologies par le grand public. Notre vie est remplie de machines plus ou moins intelligentes. Si en gérer une seule ne pose pas de soucis, prévoir ce qui va se passer lorsque plusieurs machines vont travailler ensemble est beaucoup plus délicat; surtout si un humain se trouve au milieu.</p>
  110. <p>Le LOL est une émanation du mouvement mondial <i>hackerspace</i>/<a href="https://secure.wikimedia.org/wikipedia/fr/wiki/Hacklab">hacklab</a> et se veut ouvert aux échanges et collaborations avec les autres groupes.</p>
  111. <p>En avril 2011, le LOL a rejoint les <a href="http://www.lespetitsdebrouillards.org/?rub=reseau&region=21">Petits Débrouillards de Lyon</a>.</p>
  112. </div>
  113. </div>
  114. </section>
  115. <!-- Contact Section -->
  116. <section id="contact">
  117. <div class="container">
  118. <div class="row">
  119. <div class="col-lg-12 text-center">
  120. <h2>Contactez nous</h2>
  121. <hr class="star-primary">
  122. </div>
  123. </div>
  124. <div class="row">
  125. <div class="col-lg-8 col-lg-offset-2">
  126. <form name="sentMessage" id="contactForm" novalidate>
  127. <div class="row control-group">
  128. <div class="form-group col-xs-12 floating-label-form-group controls">
  129. <label>Nom</label>
  130. <input type="text" class="form-control" placeholder="Nom" id="name" required data-validation-required-message="Entrer votre nom.">
  131. <p class="help-block text-danger"></p>
  132. </div>
  133. </div>
  134. <div class="row control-group">
  135. <div class="form-group col-xs-12 floating-label-form-group controls">
  136. <label>Email</label>
  137. <input type="email" class="form-control" placeholder="Email" id="email" required data-validation-required-message="Entrer votre email.">
  138. <p class="help-block text-danger"></p>
  139. </div>
  140. </div>
  141. <div class="row control-group">
  142. <div class="form-group col-xs-12 floating-label-form-group controls">
  143. <label>Téléphone</label>
  144. <input type="tel" class="form-control" placeholder="Téléphone" id="phone" required data-validation-required-message="Entrer votre numéro de téléphone.">
  145. <p class="help-block text-danger"></p>
  146. </div>
  147. </div>
  148. <div class="row control-group">
  149. <div class="form-group col-xs-12 floating-label-form-group controls">
  150. <label>Message</label>
  151. <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Entrer votre message."></textarea>
  152. <p class="help-block text-danger"></p>
  153. </div>
  154. </div>
  155. <br>
  156. <div id="success"></div>
  157. <div class="row">
  158. <div class="form-group col-xs-12">
  159. <button type="submit" class="btn btn-success btn-lg">Envoyer !</button>
  160. </div>
  161. </div>
  162. </form>
  163. <p>Mail : contact (arobaz) labolyon (.) fr</p>
  164. </div>
  165. </div>
  166. </div>
  167. </section>
  168. <!-- Footer -->
  169. <footer class="text-center">
  170. <div class="footer-above">
  171. <div class="container">
  172. <div class="row">
  173. <div class="footer-col col-md-4">
  174. <!-- adresse -->
  175. </div>
  176. <div class="footer-col col-md-4">
  177. <h3>Laboratoire Ouvert Lyonnais</h3>
  178. <p>7 place Louis Chazette<br>69001 Lyon</p>
  179. <p>Overture : mardi 19h30-00h</p>
  180. <p>IRC : <a href="irc://irc.geeknode.org/labolyon">#LaboLyon</a> sur geeknode</p>
  181. </div>
  182. </div>
  183. </div>
  184. </div>
  185. <div class="footer-below">
  186. <div class="container">
  187. <div class="row">
  188. <div class="col-lg-12">
  189. Contenu du site placé sous <a href="http://creativecommons.org/licenses/by-sa/2.0/fr/">contrat <abbr title="Creative Commons&nbsp;: Paternité - Partage des Conditions Initiales à l’Identique version 2.0 France">CC BY-SA 2.0 fr</abbr></a>
  190. </div>
  191. </div>
  192. </div>
  193. </div>
  194. </footer>
  195. <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
  196. <div class="scroll-top page-scroll visible-xs visible-sm">
  197. <a class="btn btn-primary" href="#page-top">
  198. </a>
  199. </div>
  200. <!-- jQuery -->
  201. <script src="js/jquery.js"></script>
  202. <!-- Bootstrap Core JavaScript -->
  203. <script src="js/bootstrap.min.js"></script>
  204. <!-- Plugin JavaScript -->
  205. <script src="js/jquery.easing.min.js"></script>
  206. <script src="js/classie.js"></script>
  207. <script src="js/cbpAnimatedHeader.js"></script>
  208. <!-- Contact Form JavaScript -->
  209. <script src="js/jqBootstrapValidation.js"></script>
  210. <script src="js/contact_me.js"></script>
  211. <!-- Custom Theme JavaScript -->
  212. <script src="js/freelancer.js"></script>
  213. </body>
  214. </html>