366 lines
15 KiB
HTML
366 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<!-- ****************************** -->
|
|
<!-- * Ah shit, here we go again. * -->
|
|
<!-- ****************************** -->
|
|
|
|
<!-- Hi guys, this document is for the FOSC website. You probably already know that, otherwise you can visit him here "https://fosc.space/" -->
|
|
<!-- First, I'm sorry if there's any mistake, I'm not an expert yet. -->
|
|
<!-- Second, this document is free, so you can see it, use it and modify it as you wish. -->
|
|
<!-- Finally, the document is divided into parts for better reading. The style pages and scripts are in different documents. The google fonts and others icons are linked in head section. -->
|
|
<!-- That's all, thank you. -->
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>FOSC - Free Open Source Club</title>
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta name="description" content="FOSC, Hackerspace from Cartagena">
|
|
<meta name="keywords" content="Open Source, Free Software, Linux, Hackerspace, Foss">
|
|
<meta name="author" content="FOSC">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<link rel="icon" href="img/Logo-invert.png" type="image/gif">
|
|
<link rel="stylesheet" type="text/css" href="cs.css">
|
|
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.0.45/css/materialdesignicons.min.css">
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
|
|
|
|
<script src="js/main.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@13.0.1/dist/lazyload.min.js"></script>
|
|
</head>
|
|
|
|
<header>
|
|
<section class="navigation">
|
|
<div class="nav-container">
|
|
<div class="brand">
|
|
<picture>
|
|
<source type="image/webp" data-srcset="img/Logo-invert.webp">
|
|
<source type="image/png" data-srcset="img/Logo-invert.png">
|
|
<img class="lazy" data-src="img/Logo-invert.png" style="width: 100px;">
|
|
</picture>
|
|
</div>
|
|
<nav>
|
|
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
|
|
<ul class="nav-list">
|
|
<li>
|
|
<a href="https://fosc.space/"><i class="mdi mdi-home"></i>Home</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://blog.fosc.space"><i class="mdi mdi-notebook"></i>Blog</a>
|
|
</li>
|
|
<li>
|
|
<a href="#!"><i class="mdi mdi-cogs"></i>Services</a>
|
|
<ul class="nav-dropdown">
|
|
<li>
|
|
<a href="https://cloud.fosc.space">Cloud</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://doc.fosc.space">Wiki</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://rss.fosc.space">RSS</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://netdata.fosc.space">NetData</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://analytics.fosc.space">Analytics</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://git.fosc.space">Stolen Code</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="https://gallery.fosc.space"><i class="mdi mdi-image"></i>Gallery</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://download.fosc.space"><i class="mdi mdi-download"></i>Downloads</a>
|
|
</li>
|
|
<li>
|
|
<a href="#contact"><i class="mdi mdi-account"></i>Contact</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
(function($) { // Begin jQuery
|
|
$(function() { // DOM ready
|
|
// If a link has a dropdown, add sub menu toggle.
|
|
$('nav ul li a:not(:only-child)').click(function(e) {
|
|
$(this).siblings('.nav-dropdown').toggle();
|
|
// Close one dropdown when selecting another
|
|
$('.nav-dropdown').not($(this).siblings()).hide();
|
|
e.stopPropagation();
|
|
});
|
|
// Clicking away from dropdown will remove the dropdown class
|
|
$('html').click(function() {
|
|
$('.nav-dropdown').hide();
|
|
});
|
|
// Toggle open and close nav styles on click
|
|
$('#nav-toggle').click(function() {
|
|
$('nav ul').slideToggle();
|
|
});
|
|
// Hamburger to X toggle
|
|
$('#nav-toggle').on('click', function() {
|
|
this.classList.toggle('active');
|
|
});
|
|
}); // end DOM ready
|
|
})(jQuery); // end jQuery
|
|
</script>
|
|
</header>
|
|
|
|
<body>
|
|
<div class="hero">
|
|
<h1>Welcome to <span class="color">FOSC</span></h1>
|
|
<h3>Hackerspace located at Polytechnic University of Cartagena</h3>
|
|
<hr>
|
|
</div>
|
|
|
|
<div class="fosc">
|
|
<h1>What is FOSC?</h1>
|
|
<hr>
|
|
<h3>We are a student association focused on expanding free software and hacker culture</h3>
|
|
</div>
|
|
|
|
<div class="bgallery">
|
|
<div class="gallery">
|
|
<div class="column-gallery">
|
|
<picture>
|
|
<source type="image/webp" data-srcset="img/junction2018.webp">
|
|
<source type="image/jpeg" data-srcset="img/junction2018.jpg">
|
|
<img class="lazy" data-src="img/junction2018.jpg">
|
|
</picture>
|
|
<picture>
|
|
<source type="image/webp" data-srcset="img/santi.webp">
|
|
<source type="image/jpeg" data-srcset="img/santi.jpg">
|
|
<img class="lazy" data-src="img/santi.jpg">
|
|
</picture>
|
|
<picture>
|
|
<source type="image/webp" data-srcset="img/kids.webp">
|
|
<source type="image/jpeg" data-srcset="img/kids.jpg">
|
|
<img class="lazy" data-src="img/kids.jpg">
|
|
</picture>
|
|
<picture>
|
|
<source type="image/webp" data-srcset="img/sec.webp">
|
|
<source type="image/jpeg" data-srcset="img/sec.jpg">
|
|
<img class="lazy" data-src="img/sec.jpg">
|
|
</picture>
|
|
<picture>
|
|
<source type="image/webp" data-srcset="img/junction2018-1.webp">
|
|
<source type="image/jpeg" data-srcset="img/junction2018-1.jpg">
|
|
<img class="lazy" data-src="img/junction2018-1.jpg">
|
|
</picture>
|
|
</div>
|
|
|
|
<div class="column-gallery">
|
|
<picture>
|
|
<source type="image/webp" data-srcset="img/app.webp">
|
|
<source type="image/jpeg" data-srcset="img/app.jpg">
|
|
<img class="lazy" data-src="img/app.jpg">
|
|
</picture>
|
|
<picture>
|
|
<source type="image/webp" data-srcset="img/bitup.webp">
|
|
<source type="image/jpeg" data-srcset="img/bitup.jpg">
|
|
<img class="lazy" data-src="img/bitup.jpg">
|
|
</picture>
|
|
<picture>
|
|
<source type="image/webp" data-srcset="img/soldadura.webp">
|
|
<source type="image/jpeg" data-srcset="img/soldadura.jpg">
|
|
<img class="lazy" data-src="img/soldadura.jpg">
|
|
</picture>
|
|
<picture>
|
|
<source type="image/webp" data-srcset="img/hacking.webp">
|
|
<source type="image/jpeg" data-srcset="img/hacking.jpg">
|
|
<img class="lazy" data-src="img/hacking.jpg">
|
|
</picture>
|
|
<picture>
|
|
<source type="image/webp" data-srcset="img/junction2019-1.webp">
|
|
<source type="image/jpeg" data-srcset="img/junction2019-1.jpg">
|
|
<img class="lazy" data-src="img/junction2019-1.jpg">
|
|
</picture>
|
|
</div>
|
|
|
|
<div class="column-gallery">
|
|
<picture>
|
|
<source type="image/webp" data-srcset="img/pepemod.webp">
|
|
<source type="image/jpeg" data-srcset="img/pepemod.jpg">
|
|
<img class="lazy" data-src="img/pepemod.jpg">
|
|
</picture>
|
|
<picture>
|
|
<source type="image/webp" data-srcset="img/atresmedia.webp">
|
|
<source type="image/jpeg" data-srcset="img/atresmedia.jpg">
|
|
<img class="lazy" data-src="img/atresmedia.jpg">
|
|
</picture>
|
|
<picture>
|
|
<source type="image/webp" data-srcset="img/junction2019.webp">
|
|
<source type="image/jpeg" data-srcset="img/junction2019.jpg">
|
|
<img class="lazy" data-src="img/junction2019.jpg">
|
|
</picture>
|
|
<picture>
|
|
<source type="image/webp" data-srcset="img/printer3d.webp">
|
|
<source type="image/jpeg" data-srcset="img/printer3d.jpg">
|
|
<img class="lazy" data-src="img/printer3d-1.jpg">
|
|
</picture>
|
|
</div>
|
|
|
|
<div class="column-gallery">
|
|
<picture>
|
|
<source type="image/webp" data-srcset="img/flp1.webp">
|
|
<source type="image/jpeg" data-srcset="img/flp1.jpg">
|
|
<img class="lazy" data-src="img/flp1.jpg">
|
|
</picture>
|
|
<picture>
|
|
<source type="image/webp" data-srcset="img/soldadura1.webp">
|
|
<source type="image/jpeg" data-srcset="img/soldadura1.jpg">
|
|
<img class="lazy" data-src="img/soldadura1.jpg">
|
|
</picture>
|
|
<picture>
|
|
<source type="image/webp" data-srcset="img/nn1.webp">
|
|
<source type="image/jpeg" data-srcset="img/nn1.jpg">
|
|
<img class="lazy" data-src="img/nn1.jpg">
|
|
</picture>
|
|
<picture>
|
|
<source type="image/webp" data-srcset="img/fosc2.webp">
|
|
<source type="image/jpeg" data-srcset="img/fosc2.jpg">
|
|
<img class="lazy" data-src="img/fosc2-1.jpg">
|
|
</picture>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mgallery">
|
|
<h3>Development of free software projects, realization of courses of various technologies, maintenance of a server to provide services both inside and outside the association, dissemination of talks, job offers and any other information of interest to the partners.</h3>
|
|
</div>
|
|
|
|
<div id="services">
|
|
<div class="services">
|
|
<h1>OUR SERVICES</h1>
|
|
<p>Formal members are stored in our member database and have access to the multitude of services we provide. Check out our list of services below. Additionally, the tools and materials in the space are available for you to hack and mess with.</p>
|
|
</div>
|
|
|
|
<div class="tabla">
|
|
<div class="column">
|
|
<a href="https://cloud.fosc.space">
|
|
<picture>
|
|
<source type="image/webp" data-srcset="icons/cloud-computing.webp">
|
|
<source type="image/png" data-srcset="icons/cloud-computing.png">
|
|
<img class="lazy" data-src="icons/cloud-computing.png" alt="Cloud">
|
|
</picture>
|
|
</a>
|
|
<h4>Cloud</h4>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<a href="https://doc.fosc.space">
|
|
<picture>
|
|
<source type="image/webp" data-srcset="icons/book.webp">
|
|
<source type="image/png" data-srcset="icons/book.png">
|
|
<img class="lazy" data-src="icons/book.png" alt="Wiki">
|
|
</picture>
|
|
</a>
|
|
<h4>Wiki</h4>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<a href="https://rss.fosc.space">
|
|
<picture>
|
|
<source type="image/webp" data-srcset="icons/rss2.webp">
|
|
<source type="image/png" data-srcset="icons/rss2.png">
|
|
<img class="lazy" data-src="icons/rss2.png" alt="RSS">
|
|
</picture>
|
|
</a>
|
|
<h4>RSS</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tabla tabla2">
|
|
<div class="column">
|
|
<a href="https://netdata.fosc.space">
|
|
<picture>
|
|
<source type="image/webp" data-srcset="icons/chart.webp">
|
|
<source type="image/png" data-srcset="icons/chart.png">
|
|
<img class="lazy" data-src="icons/chart.png" alt="NetData">
|
|
</picture>
|
|
</a>
|
|
<h4>NetData</h4>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<a href="https://analytics.fosc.space">
|
|
<picture>
|
|
<source type="image/webp" data-srcset="icons/analytics.webp">
|
|
<source type="image/png" data-srcset="icons/analytics.png">
|
|
<img class="lazy" data-src="icons/analytics.png" alt="Analytics">
|
|
</picture>
|
|
</a>
|
|
<h4>Analytics</h4>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<a href="https://git.fosc.space">
|
|
<picture>
|
|
<source type="image/webp" data-srcset="icons/gitea.webp">
|
|
<source type="image/png" data-srcset="icons/gitea.png">
|
|
<img class="lazy" data-src="icons/gitea.png" alt="Gitea">
|
|
</picture>
|
|
</a>
|
|
<h4>Stolen Code</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="members" id="contact">
|
|
<div class="shape">
|
|
<div class="cmembers cmembers1">
|
|
<h4>How do I become a member?</h4>
|
|
<hr>
|
|
<p>You become a member by either coming to our physical hackerspace often, or patronizing it.<br><br>
|
|
If the lights are on, you are free to come and hack inside.<br><br>
|
|
<span>Even if you are not a member you are welcome to come in anytime.</span><br><br>
|
|
Becoming a member is less of a legal process and more of a trust process, there is no way to become a member without being accepted by others in the group.<br><br>
|
|
If you've been coming a lot to the space, it's likely that you will be asked to become a formal member.</p>
|
|
</div>
|
|
|
|
<div class="cmembers cmembers2">
|
|
<h4>We're looking for new members, students are specially welcome</h4>
|
|
<hr>
|
|
|
|
<div class="contact_methods">
|
|
<p><i class="mdi mdi-twitter"></i> <a href="https://twitter.com/foscupct">Contact us on Twitter</a></p>
|
|
<p><i class="mdi mdi-email"></i> <a href="mailto:contact@fosc.space">Send us an email</a></p>
|
|
</div>
|
|
|
|
<div class="button">
|
|
<button onclick="loadMap()" id="mapButton">Or just come in</button>
|
|
</div>
|
|
|
|
<div class="map">
|
|
<iframe id="map" frameborder="0" style="border:0" allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
<footer>
|
|
<hr>
|
|
<div class="foot-logo">
|
|
<picture>
|
|
<source type="image/webp" data-srcset="img/Logo-invert.webp">
|
|
<source type="image/png" data-srcset="img/Logo-invert.png">
|
|
<img class="lazy" data-src="img/Logo-invert.png">
|
|
</picture>
|
|
<a href="https://git.fosc.space/fosc/fosc.space">WEBSITE SOURCE CODE</a>
|
|
<div class="author">
|
|
<p>Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> and <a href="https://www.flaticon.com/authors/smalllikeart" title="Smalllikeart">Smalllikeart</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a>.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</html>
|