---
import Layout from '../layouts/old.astro';
---

<Layout>
  <header>
    <section class="navigation">
      <div class="nav-container">
        <div class="brand">
          <picture>
            <source type="image/webp" srcset="img/Logo-invert.webp" />
            <source type="image/png" srcset="img/Logo-invert.png" />
            <img alt="FOSC Logo" loading="lazy" src="img/Logo-invert.png" style="width: 100px" />
          </picture>
        </div>
        <nav>
          <div class="nav-mobile">
            <span id="nav-toggle"><span></span></span>
          </div>
          <ul class="nav-list">
            <li>
              <a href="https://blog.fosc.space"><span class="iconify" data-icon="mdi:notebook"></span>
                Blog</a>
            </li>
            <li>
              <a href="https://gallery.fosc.space"><span class="iconify" data-icon="mdi:image"></span>
                Gallery</a>
            </li>
            <li>
              <a href="https://download.fosc.space"><span class="iconify" data-icon="mdi:download"></span>
                Downloads</a>
            </li>
            <li>
              <a href="#contact"><span class="iconify" data-icon="mdi:account"></span>
                Contact</a>
            </li>
            <li>
              <a href="#!"><span class="iconify" data-icon="mdi:cogs"></span>
                Services</a>
              <ul class="nav-dropdown">
                <li>
                  <a href="https://cloud.fosc.space"><span class="iconify" data-icon="mdi:cloud"></span>
                    Cloud</a>
                </li>
                <li>
                  <a href="https://wiki.fosc.space"><span class="iconify" data-icon="mdi:text"></span>
                    Wiki</a>
                </li>
                <li>
                  <a href="https://rss.fosc.space"><span class="iconify" data-icon="mdi:rss"></span> RSS</a>
                </li>
                <li>
                  <a href="https://netdata.fosc.space"><span class="iconify" data-icon="mdi:finance"></span>
                    NetData</a>
                </li>
                <li>
                  <a href="https://plausible.fosc.space"><span class="iconify" data-icon="mdi:google-analytics"></span>
                    Analytics</a>
                </li>
                <li>
                  <a href="https://git.fosc.space"><span class="iconify" data-icon="mdi:git"></span> Stolen
                    Code</a>
                </li>
                <li>
                  <a href="https://services.fosc.space"><span class="iconify" data-icon="mdi:bookmark-plus"></span>
                    More</a>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </section>

   
  </header>

  <div class="hero">
    <h1><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" srcset="img/junction2018.webp" />
          <source type="image/jpeg" srcset="img/junction2018.jpg" />
          <img loading="lazy" src="img/junction2018.jpg" alt="Winners at Junction 2018" />
        </picture>
        <picture>
          <source type="image/webp" srcset="/img/santi.webp" />
          <source type="image/jpeg" srcset="/img/santi.jpg" />
          <img loading="lazy" src="img/santi.jpg" alt="Explaining MCU glitching at Makers Murcia" />
        </picture>
        <picture>
          <source type="image/webp" srcset="img/kids.webp" />
          <source type="image/jpeg" srcset="img/kids.jpg" />
          <img loading="lazy" src="img/kids.jpg" alt="Showing 3D printing at Semana de la Ciencia" />
        </picture>
        <picture>
          <source type="image/webp" srcset="img/sec.webp" />
          <source type="image/jpeg" srcset="img/sec.jpg" />
          <img loading="lazy" src="img/sec.jpg" alt="More Semana de la Ciencia" />
        </picture>
        <picture>
          <source type="image/webp" srcset="img/junction2018-1.webp" />
          <source type="image/jpeg" srcset="img/junction2018-1.jpg" />
          <img loading="lazy" src="img/junction2018-1.jpg" alt="Hacking at Junction 2018" />
        </picture>
      </div>

      <div class="column-gallery">
        <picture>
          <source type="image/webp" srcset="img/app.webp" />
          <source type="image/jpeg" srcset="img/app.jpg" />
          <img loading="lazy" src="img/app.jpg" alt="Speaking for Puertas Violetas app" />
        </picture>
        <picture>
          <source type="image/webp" srcset="img/bitup.webp" />
          <source type="image/jpeg" srcset="img/bitup.jpg" />
          <img loading="lazy" src="img/bitup.jpg" alt="Giving an ESP32 hacking talk at BITUP 2019" />
        </picture>
        <picture>
          <source type="image/webp" srcset="img/soldadura.webp" />
          <source type="image/jpeg" srcset="img/soldadura.jpg" />
          <img loading="lazy" src="img/soldadura.jpg" alt="Learning to solder" />
        </picture>
        <picture>
          <source type="image/webp" srcset="img/hacking.webp" />
          <source type="image/jpeg" srcset="img/hacking.jpg" />
          <img loading="lazy" src="img/hacking.jpg" alt="Installing Coreboot open firmware into a Thinkpad x230" />
        </picture>
        <picture>
          <source type="image/webp" srcset="img/junction2019-1.webp" />
          <source type="image/jpeg" srcset="img/junction2019-1.jpg" />
          <img loading="lazy" src="img/junction2019-1.jpg" alt="Posing at Junction 2019" />
        </picture>
      </div>

      <div class="column-gallery">
        <picture>
          <source type="image/webp" srcset="img/pepemod.webp" />
          <source type="image/jpeg" srcset="img/pepemod.jpg" />
          <img loading="lazy" src="img/pepemod.jpg" alt="Soldering Nitrocaster's adapter board to a Thinkpad x230" />
        </picture>
        <picture>
          <source type="image/webp" srcset="img/atresmedia.webp" />
          <source type="image/jpeg" srcset="img/atresmedia.jpg" />
          <img loading="lazy" src="img/atresmedia.jpg" alt="Having fun in Atresmedia" />
        </picture>
        <picture>
          <source type="image/webp" srcset="img/junction2019.webp" />
          <source type="image/jpeg" srcset="img/junction2019.jpg" />
          <img loading="lazy" src="img/junction2019.jpg" alt="Hacking at Junction 2019" />
        </picture>
        <picture>
          <source type="image/webp" srcset="img/printer3d.webp" />
          <source type="image/jpeg" srcset="img/printer3d.jpg" />
          <img loading="lazy" src="img/printer3d.jpg" alt="3D printer, 3D printing" />
        </picture>
      </div>

      <div class="column-gallery">
        <picture>
          <source type="image/webp" srcset="img/flp1.webp" />
          <source type="image/jpeg" srcset="img/flp1.jpg" />
          <img loading="lazy" src="img/flp1.jpg" alt="First FOSC LAN Party" />
        </picture>
        <picture>
          <source type="image/webp" srcset="img/soldadura.webp" />
          <source type="image/jpeg" srcset="img/soldadura.jpg" />
          <img loading="lazy" src="img/soldadura.jpg" alt="Soldering workshop" />
        </picture>
        <picture>
          <source type="image/webp" srcset="img/nn1.webp" />
          <source type="image/jpeg" srcset="img/nn1.jpg" />
          <img loading="lazy" src="img/nn1.jpg" alt="Giving an open firmware talk at Navaja Negra 2019" />
        </picture>
        <picture>
          <source type="image/webp" srcset="img/fosc.webp" />
          <source type="image/jpeg" srcset="img/fosc.jpg" />
          <img loading="lazy" src="img/fosc2.jpg" alt="Showing some stuff during Cable Amarillo" />
        </picture>
      </div>
    </div>
  </div>

  <div class="mgallery">
    <h3>
      Linux, hackathons, courses, talks, server systems administration, open
      software, firmware and hardware!
    </h3>
  </div>

  <div id="services">
    <div class="services">
      <h1>OUR SERVICES</h1>
      <p>
        We believe in self hosting! Our members can enjoy many different
        applications which run from our servers.
      </p>

      <p>Here we show a few ones, but there are much more.</p>
    </div>

    <div class="tabla">
      <div class="column">
        <a href="https://cloud.fosc.space">
          <picture>
            <source type="image/webp" srcset="icons/cloud-computing.webp" />
            <source type="image/png" srcset="icons/cloud-computing.png" />
            <img loading="lazy" 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" srcset="icons/book.webp" />
            <source type="image/png" srcset="icons/book.png" />
            <img loading="lazy" 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" srcset="icons/rss2.webp" />
            <source type="image/png" srcset="icons/rss2.png" />
            <img loading="lazy" 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" srcset="icons/chart.webp" />
            <source type="image/png" srcset="icons/chart.png" />
            <img loading="lazy" src="icons/chart.png" alt="NetData" />
          </picture>
        </a>
        <h4>NetData</h4>
      </div>

      <div class="column">
        <a href="https://plausible.fosc.space">
          <picture>
            <source type="image/webp" srcset="icons/analytics.webp" />
            <source type="image/png" srcset="icons/analytics.png" />
            <img loading="lazy" 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" srcset="icons/gitea.webp" />
            <source type="image/png" srcset="icons/gitea.png" />
            <img loading="lazy" src="icons/gitea.png" alt="Gitea" />
          </picture>
        </a>
        <h4>Stolen Code</h4>
      </div>
    </div>
  </div>

  <div class="members" id="contact">
    <h1>We're looking for new members!</h1>

    <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<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.<br /><br />
          <b>Even if you are not a member, if the lights are on, you are free
            to come and hack inside.</b>
        </p>
      </div>

      <div class="cmembers cmembers2">
        <h4>Tell us anything</h4>
        <hr />

        <div class="contact_methods">
          <p>
            <span class="iconify" data-icon="mdi:twitter" style="color: #2196f3"></span>
            <a href="https://twitter.com/foscupct">Contact us on Twitter</a>
          </p>
          <br />
          <p>
            <span class="iconify" data-icon="mdi:email" style="color: #f32821"></span>
            <a href="mailto:contact@fosc.space">Send us an email</a>
          </p>
        </div>

        <div class="button">
          <button onclick="document.getElementById('mapButton').style.animation = 'rainbow 1s linear infinite'"
            id="mapButton">
            Or just come in
          </button>
        </div>
      </div>
    </div>

    <div class="map">
      <iframe id="map" title="Map view of our location" frameborder="0" allowfullscreen loading="lazy"
        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>
    </div>
  </div>

  <footer>
    <hr />
    <div class="foot-logo">
      <picture>
        <source type="image/webp" srcset="img/Logo-invert.webp" />
        <source type="image/png" srcset="img/Logo-invert.png" />
        <img loading="lazy" src="img/Logo-invert.png" alt="FOSC Logo" />
      </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>

  <!-- With the DOM ready, lazyload all pics and swap all icons -->
  <script>
    window.lazyLoadOptions = {
      elements_selector: ".lazy",
    };
  </script>
  <script src="https://code.iconify.design/2/2.2.1/iconify.min.js"></script>
</Layout>