Our webpage
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

400 lines
16KB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <!-- ****************************** -->
  4. <!-- * Ah shit, here we go again. * -->
  5. <!-- ****************************** -->
  6. <head>
  7. <meta charset="utf-8">
  8. <title>FOSC - Free Open Source Club</title>
  9. <meta name="description" content="FOSC: Hackerspace located at Universidad Politecnica de Cartagena (UPCT)">
  10. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <link rel="stylesheet" type="text/css" href="css/main.css">
  12. <link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
  13. <script src="js/modernizer.js"></script>
  14. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  15. <!-- Massive amount of favicon related stuff -->
  16. <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2">
  17. <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2">
  18. <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=2">
  19. <link rel="manifest" href="/site.webmanifest?v=2">
  20. <link rel="mask-icon" href="/safari-pinned-tab.svg?v=2" color="#5bbad5">
  21. <link rel="shortcut icon" href="/favicon.ico?v=2">
  22. <meta name="apple-mobile-web-app-title" content="FOSC">
  23. <meta name="application-name" content="FOSC">
  24. <meta name="msapplication-TileColor" content="#da532c">
  25. <meta name="theme-color" content="#ffffff">
  26. <!-- Analytics -->
  27. <script async defer data-domain="fosc.space" src="https://plausible.fosc.space/js/plausible.js"></script>
  28. </head>
  29. <body>
  30. <header>
  31. <section class="navigation">
  32. <div class="nav-container">
  33. <div class="brand">
  34. <picture>
  35. <source type="image/webp" data-srcset="img/Logo-invert.webp">
  36. <source type="image/png" data-srcset="img/Logo-invert.png">
  37. <img alt="FOSC Logo" class="lazy" data-src="img/Logo-invert.png" style="width: 100px;">
  38. </picture>
  39. </div>
  40. <nav>
  41. <div class="nav-mobile"><span id="nav-toggle" href="#!"><span></span></span></div>
  42. <ul class="nav-list">
  43. <li>
  44. <a href="https://blog.fosc.space"><span class="iconify" data-icon="mdi:notebook"></span> Blog</a>
  45. </li>
  46. <li>
  47. <a href="https://gallery.fosc.space"><span class="iconify" data-icon="mdi:image"></span> Gallery</a>
  48. </li>
  49. <li>
  50. <a href="https://download.fosc.space"><span class="iconify" data-icon="mdi:download"></span> Downloads</a>
  51. </li>
  52. <li>
  53. <a href="#contact"><span class="iconify" data-icon="mdi:account"></span> Contact</a>
  54. </li>
  55. <li>
  56. <a href="#!"><span class="iconify" data-icon="mdi:cogs"></span> Services</a>
  57. <ul class="nav-dropdown">
  58. <li>
  59. <a href="https://cloud.fosc.space"><span class="iconify" data-icon="mdi:cloud"></span> Cloud</a>
  60. </li>
  61. <li>
  62. <a href="https://doc.fosc.space"><span class="iconify" data-icon="mdi:text"></span> Wiki</a>
  63. </li>
  64. <li>
  65. <a href="https://rss.fosc.space"><span class="iconify" data-icon="mdi:rss"></span> RSS</a>
  66. </li>
  67. <li>
  68. <a href="https://netdata.fosc.space"><span class="iconify" data-icon="mdi:finance"></span> NetData</a>
  69. </li>
  70. <li>
  71. <a href="https://analytics.fosc.space"><span class="iconify" data-icon="mdi:google-analytics"></span>
  72. Analytics</a>
  73. </li>
  74. <li>
  75. <a href="https://git.fosc.space"><span class="iconify" data-icon="mdi:git"></span> Stolen Code</a>
  76. </li>
  77. <li>
  78. <a href="https://services.fosc.space"><span class="iconify" data-icon="mdi:bookmark-plus"></span>
  79. More</a>
  80. </li>
  81. </ul>
  82. </li>
  83. </ul>
  84. </nav>
  85. </div>
  86. </section>
  87. <script>
  88. (function ($) {
  89. $(function () { // DOM ready
  90. // If a link has a dropdown, add sub menu toggle.
  91. $('nav ul li a:not(:only-child)').click(function (e) {
  92. $(this).siblings('.nav-dropdown').toggle();
  93. // Close one dropdown when selecting another
  94. $('.nav-dropdown').not($(this).siblings()).hide();
  95. e.stopPropagation();
  96. });
  97. // Clicking away from dropdown will remove the dropdown class
  98. $('html').click(function () {
  99. $('.nav-dropdown').hide();
  100. });
  101. // Toggle open and close nav styles on click
  102. $('#nav-toggle').click(function () {
  103. $('nav ul').slideToggle();
  104. });
  105. // Hamburger to X toggle
  106. $('#nav-toggle').on('click', function () {
  107. this.classList.toggle('active');
  108. });
  109. }); // end DOM ready
  110. })(jQuery);
  111. </script>
  112. </header>
  113. <div class="hero">
  114. <h1>Welcome to <span class="color">FOSC</span></h1>
  115. <h3>Hackerspace located at Polytechnic University of Cartagena</h3>
  116. <hr>
  117. </div>
  118. <div class="fosc">
  119. <h1>What is FOSC?</h1>
  120. <hr>
  121. <h3>We are a student association focused on expanding free software and hacker culture</h3>
  122. </div>
  123. <div class="bgallery">
  124. <div class="gallery">
  125. <div class="column-gallery">
  126. <picture>
  127. <source type="image/webp" data-srcset="img/junction2018.webp">
  128. <source type="image/jpeg" data-srcset="img/junction2018.jpg">
  129. <img class="lazy" data-src="img/junction2018.jpg" alt="Winners at Junction 2018">
  130. </picture>
  131. <picture>
  132. <source type="image/webp" data-srcset="img/santi.webp">
  133. <source type="image/jpeg" data-srcset="img/santi.jpg">
  134. <img class="lazy" data-src="img/santi.jpg" alt="Explaining MCU glitching at Makers Murcia">
  135. </picture>
  136. <picture>
  137. <source type="image/webp" data-srcset="img/kids.webp">
  138. <source type="image/jpeg" data-srcset="img/kids.jpg">
  139. <img class="lazy" data-src="img/kids.jpg" alt="Showing 3D printing at Semana de la Ciencia">
  140. </picture>
  141. <picture>
  142. <source type="image/webp" data-srcset="img/sec.webp">
  143. <source type="image/jpeg" data-srcset="img/sec.jpg">
  144. <img class="lazy" data-src="img/sec.jpg" alt="More Semana de la Ciencia">
  145. </picture>
  146. <picture>
  147. <source type="image/webp" data-srcset="img/junction2018-1.webp">
  148. <source type="image/jpeg" data-srcset="img/junction2018-1.jpg">
  149. <img class="lazy" data-src="img/junction2018-1.jpg" alt="Hacking at Junction 2018">
  150. </picture>
  151. </div>
  152. <div class="column-gallery">
  153. <picture>
  154. <source type="image/webp" data-srcset="img/app.webp">
  155. <source type="image/jpeg" data-srcset="img/app.jpg">
  156. <img class="lazy" data-src="img/app.jpg" alt="Speaking for Puertas Violetas app">
  157. </picture>
  158. <picture>
  159. <source type="image/webp" data-srcset="img/bitup.webp">
  160. <source type="image/jpeg" data-srcset="img/bitup.jpg">
  161. <img class="lazy" data-src="img/bitup.jpg" alt="Giving an ESP32 hacking talk at BITUP 2019">
  162. </picture>
  163. <picture>
  164. <source type="image/webp" data-srcset="img/soldadura.webp">
  165. <source type="image/jpeg" data-srcset="img/soldadura.jpg">
  166. <img class="lazy" data-src="img/soldadura.jpg" alt="Learning to solder">
  167. </picture>
  168. <picture>
  169. <source type="image/webp" data-srcset="img/hacking.webp">
  170. <source type="image/jpeg" data-srcset="img/hacking.jpg">
  171. <img class="lazy" data-src="img/hacking.jpg" alt="Installing Coreboot open firmware into a Thinkpad x230">
  172. </picture>
  173. <picture>
  174. <source type="image/webp" data-srcset="img/junction2019-1.webp">
  175. <source type="image/jpeg" data-srcset="img/junction2019-1.jpg">
  176. <img class="lazy" data-src="img/junction2019-1.jpg" alt="Posing at Junction 2019">
  177. </picture>
  178. </div>
  179. <div class="column-gallery">
  180. <picture>
  181. <source type="image/webp" data-srcset="img/pepemod.webp">
  182. <source type="image/jpeg" data-srcset="img/pepemod.jpg">
  183. <img class="lazy" data-src="img/pepemod.jpg" alt="Soldering Nitrocaster's adapter board to a Thinkpad x230">
  184. </picture>
  185. <picture>
  186. <source type="image/webp" data-srcset="img/atresmedia.webp">
  187. <source type="image/jpeg" data-srcset="img/atresmedia.jpg">
  188. <img class="lazy" data-src="img/atresmedia.jpg" alt="Having fun in Atresmedia">
  189. </picture>
  190. <picture>
  191. <source type="image/webp" data-srcset="img/junction2019.webp">
  192. <source type="image/jpeg" data-srcset="img/junction2019.jpg">
  193. <img class="lazy" data-src="img/junction2019.jpg" alt="Hacking at Junction 2019">
  194. </picture>
  195. <picture>
  196. <source type="image/webp" data-srcset="img/printer3d.webp">
  197. <source type="image/jpeg" data-srcset="img/printer3d.jpg">
  198. <img class="lazy" data-src="img/printer3d-1.jpg" alt="3D printer, 3D printing">
  199. </picture>
  200. </div>
  201. <div class="column-gallery">
  202. <picture>
  203. <source type="image/webp" data-srcset="img/flp1.webp">
  204. <source type="image/jpeg" data-srcset="img/flp1.jpg">
  205. <img class="lazy" data-src="img/flp1.jpg" alt="First FOSC LAN Party">
  206. </picture>
  207. <picture>
  208. <source type="image/webp" data-srcset="img/soldadura1.webp">
  209. <source type="image/jpeg" data-srcset="img/soldadura1.jpg">
  210. <img class="lazy" data-src="img/soldadura1.jpg" alt="Soldering workshop">
  211. </picture>
  212. <picture>
  213. <source type="image/webp" data-srcset="img/nn1.webp">
  214. <source type="image/jpeg" data-srcset="img/nn1.jpg">
  215. <img class="lazy" data-src="img/nn1.jpg" alt="Giving an open firmware talk at Navaja Negra 2019">
  216. </picture>
  217. <picture>
  218. <source type="image/webp" data-srcset="img/fosc2.webp">
  219. <source type="image/jpeg" data-srcset="img/fosc2.jpg">
  220. <img class="lazy" data-src="img/fosc2-1.jpg" alt="Showing some stuff during Cable Amarillo">
  221. </picture>
  222. </div>
  223. </div>
  224. </div>
  225. <div class="mgallery">
  226. <h3>Linux, hackathons, courses, talks, server systems administration, open software, firmware and hardware!</h3>
  227. </div>
  228. <div id="services">
  229. <div class="services">
  230. <h1>OUR SERVICES</h1>
  231. <p>We believe in self hosting! Our members can enjoy many different applications which run from our servers.</p>
  232. <p>Here we show a few ones, but there are much more.</p>
  233. </div>
  234. <div class="tabla">
  235. <div class="column">
  236. <a href="https://cloud.fosc.space">
  237. <picture>
  238. <source type="image/webp" data-srcset="icons/cloud-computing.webp">
  239. <source type="image/png" data-srcset="icons/cloud-computing.png">
  240. <img class="lazy" data-src="icons/cloud-computing.png" alt="Cloud">
  241. </picture>
  242. </a>
  243. <h4>Cloud</h4>
  244. </div>
  245. <div class="column">
  246. <a href="https://doc.fosc.space">
  247. <picture>
  248. <source type="image/webp" data-srcset="icons/book.webp">
  249. <source type="image/png" data-srcset="icons/book.png">
  250. <img class="lazy" data-src="icons/book.png" alt="Wiki">
  251. </picture>
  252. </a>
  253. <h4>Wiki</h4>
  254. </div>
  255. <div class="column">
  256. <a href="https://rss.fosc.space">
  257. <picture>
  258. <source type="image/webp" data-srcset="icons/rss2.webp">
  259. <source type="image/png" data-srcset="icons/rss2.png">
  260. <img class="lazy" data-src="icons/rss2.png" alt="RSS">
  261. </picture>
  262. </a>
  263. <h4>RSS</h4>
  264. </div>
  265. </div>
  266. <div class="tabla tabla2">
  267. <div class="column">
  268. <a href="https://netdata.fosc.space">
  269. <picture>
  270. <source type="image/webp" data-srcset="icons/chart.webp">
  271. <source type="image/png" data-srcset="icons/chart.png">
  272. <img class="lazy" data-src="icons/chart.png" alt="NetData">
  273. </picture>
  274. </a>
  275. <h4>NetData</h4>
  276. </div>
  277. <div class="column">
  278. <a href="https://analytics.fosc.space">
  279. <picture>
  280. <source type="image/webp" data-srcset="icons/analytics.webp">
  281. <source type="image/png" data-srcset="icons/analytics.png">
  282. <img class="lazy" data-src="icons/analytics.png" alt="Analytics">
  283. </picture>
  284. </a>
  285. <h4>Analytics</h4>
  286. </div>
  287. <div class="column">
  288. <a href="https://git.fosc.space">
  289. <picture>
  290. <source type="image/webp" data-srcset="icons/gitea.webp">
  291. <source type="image/png" data-srcset="icons/gitea.png">
  292. <img class="lazy" data-src="icons/gitea.png" alt="Gitea">
  293. </picture>
  294. </a>
  295. <h4>Stolen Code</h4>
  296. </div>
  297. </div>
  298. </div>
  299. <div class="members" id="contact">
  300. <h1>We're looking for new members!</h1>
  301. <div class="shape">
  302. <div class="cmembers cmembers1">
  303. <h4>How do I become a member?</h4>
  304. <hr>
  305. <p>You become a member by either coming to our physical hackerspace often<br><br>
  306. If you've been coming a lot to the space, it's likely that you will be asked to become a formal
  307. member.<br><br>
  308. <b>Even if you are not a member, if the lights are on, you are free to come and hack inside.</b>
  309. </p>
  310. </div>
  311. <div class="cmembers cmembers2">
  312. <h4>Tell us anything</h4>
  313. <hr>
  314. <div class="contact_methods">
  315. <p><span class="iconify" data-icon="mdi:twitter" style="color: #2196f3"></span> <a
  316. href="https://twitter.com/foscupct">Contact us on Twitter</a></p>
  317. <br>
  318. <p><span class="iconify" data-icon="mdi:email" style="color: #f32821;"></span> <a
  319. href="mailto:contact@fosc.space">Send us an email</a></p>
  320. </div>
  321. <div class="button">
  322. <button onclick="document.getElementById('mapButton').style.animation = 'rainbow 1s linear infinite'"
  323. id="mapButton">Or just come in</button>
  324. </div>
  325. </div>
  326. </div>
  327. <div class="map">
  328. <iframe id="map" title="Map view of our location" frameborder="0" allowfullscreen class="lazy"
  329. data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1580.5054989176758!2d-0.9796837724532329!3d37.60190018337746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd6341863c83cf8f%3A0xe24278be476b56b8!2sFOSC!5e0!3m2!1ses!2ses!4v1544058887076"></iframe>
  330. </div>
  331. </div>
  332. <footer>
  333. <hr>
  334. <div class="foot-logo">
  335. <picture>
  336. <source type="image/webp" data-srcset="img/Logo-invert.webp">
  337. <source type="image/png" data-srcset="img/Logo-invert.png">
  338. <img class="lazy" data-src="img/Logo-invert.png" alt="FOSC Logo">
  339. </picture>
  340. <a href="https://git.fosc.space/fosc/fosc.space">WEBSITE SOURCE CODE</a>
  341. <div class="author">
  342. <p>Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> and <a
  343. href="https://www.flaticon.com/authors/smalllikeart" title="Smalllikeart">Smalllikeart</a> from <a
  344. href="https://www.flaticon.com/">www.flaticon.com</a>.</p>
  345. </div>
  346. </div>
  347. </footer>
  348. <!-- With the DOM ready, lazyload all pics and swap all icons -->
  349. <script>
  350. window.lazyLoadOptions = {
  351. elements_selector: ".lazy"
  352. };
  353. </script>
  354. <script async src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.1.1/dist/lazyload.min.js"></script>
  355. <script async src="https://code.iconify.design/1/1.0.6/iconify.min.js"></script>
  356. </body>
  357. </html>