index.html

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="viewport" content="height=device-height, initial-scale=1.0" />

    <!-- Styles -->
    <link rel="stylesheet" href="assets/fonts/NeueHaasUnica/stylesheet.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"
    />
    <link rel="stylesheet" href="./style/splide.min.css" />
    <link rel="stylesheet" href="style/index.css" />

    <!-- Metadata -->
    <title>HackademINT</title>
  </head>
  <body>
    <nav
      class="navbar is-fixed-top"
      role="navigation"
      aria-label="main navigation"
    >
      <div class="navbar-brand">
        <a class="navbar-item" href="#">
          <img
            src="assets/img/HackademINT-logo/HackademINT.svg"
            width="112"
            height="28"
          />
          <h3>HackademINT</h3>
        </a>

        <a
          role="button"
          class="navbar-burger"
          aria-label="menu"
          aria-expanded="false"
          data-target="navMenu"
        >
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div id="navMenu" class="navbar-menu">
        <div class="navbar-start">
          <a class="navbar-item" href="#about"> À propos </a>

          <!--<a class="navbar-item"> Formations </a>

          <a class="navbar-item"> Évènements </a>-->

          <a class="navbar-item" href="#partners"> Partenaires </a>

          <!--<a class="navbar-item"> Contact </a>-->
        </div>

        <div class="navbar-end">
          <div class="navbar-item">
            <div class="buttons">
              <a
                class="button is-primary"
                href="https://discord.hackademint.org"
                target="_blank"
              >
                <strong>Discord</strong>
              </a>
            </div>
          </div>
        </div>
      </div>
    </nav>

    <div class="content-wrap">
      <section class="landing">
        <div class="container">
          <div class="main-logo">
            <div class="line top-line">
              <img
                src="assets/img/HackademINT-logo/HackademINT.svg"
                alt="HackademINT Logo"
              />
              <!-- <div class="line-block"></div> -->
            </div>
            <div class="logo-text">
              <h1>HackademINT</h1>
              <h2>Club de cybersécurité à Télécom SudParis</h2>
            </div>
            <div class="line bottom-line">
              <!-- <div class="line-block"></div> -->
            </div>
            <div class="presentation-text">
              <p>
                HackademINT est le club de cybersécurité rattaché à
                l'association MiNET sur le campus de Télécom SudParis et
                co-organisateur du 404 CTF. Rejoignez nos réseaux pour en savoir
                plus sur nos prochaines formations et nos prochains évènements.
              </p>
              <a
                class="button is-primary"
                href="https://discord.hackademint.org"
                target="_blank"
                >Rejoignez-nous</a
              >
            </div>
          </div>
          <div class="splide" role="group" aria-label="Rankings">
            <div class="splide__track">
              <ul class="splide__list">
                <li class="splide__slide">
                  <img src="./assets/img/rankings/HTB.png" alt="HTB" />
                </li>
                <li class="splide__slide">
                  <img src="./assets/img/rankings/MHS.png" alt="MHS" />
                </li>
                <li class="splide__slide">
                  <img src="./assets/img/rankings/META.png" alt="META" />
                </li>
                <li class="splide__slide">
                  <img src="./assets/img/rankings/Orange.png" alt="Orange" />
                </li>
                <li class="splide__slide">
                  <img
                    src="./assets/img/rankings/Cybergrabs.png"
                    alt="Cybergrabs"
                  />
                </li>
                <li class="splide__slide">
                  <img src="./assets/img/rankings/Midnight.png" alt="Orange" />
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      <section class="about" id="about">
        <div class="container">
          <h2>Qui sommes-nous ?</h2>
          <article class="large-article">
            <div class="article-content" id="article-club">
              <h3>Le Club</h3>
              <div class="article-text">
                <p>
                  HackademINT est le club de cybersécurité de l'association
                  MiNET sur le campus de Télécom SudParis. Nos objectifs sont
                  multiples :
                </p>
                <ul>
                  <li><p>- former les étudiants à la cybersécurité,</p></li>
                  <li>
                    <p>
                      - fournir aux étudiants un cadre stimulant pour favoriser
                      l'auto-apprentissage des outils et techniques,
                    </p>
                  </li>
                  <li>
                    <p>
                      - participer à des compétitions nationales et
                      internationales de cybersécurité (CTF),
                    </p>
                  </li>
                  <li>
                    <p>
                      - créer nos propres compétitions internes et à l'échelle
                      nationale.
                    </p>
                  </li>
                </ul>
                <p>
                  Le club compte 10 membres à son bureau et collabore encore
                  étroitement avec ses anciens membres qui forment un important
                  réseau depuis sa création en 2014.
                </p>
              </div>
            </div>
            <div class="article-image">
              <img src="./assets/img/HackademINT-logo/hackademint-spot1-dark.png" alt="HackademINT" />
            </div>

            <div class="article-bottom">
              <div class="card">
                <div class="card-content">
                  <div class="media">
                    <div class="media-content">
                      <p class="title is-5">Hadrien Capizzi</p>
                      <p class="subtitle is-6">@_hdrien - Président</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card">
                <div class="card-content">
                  <div class="media">
                    <div class="media-content">
                      <p class="title is-5">Augustin Perrin</p>
                      <p class="subtitle is-6">@narcisse - Vice-Président</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card">
                <div class="card-content">
                  <div class="media">
                    <div class="media-content">
                      <p class="title is-5">Diane Murzi</p>
                      <p class="subtitle is-6">@Little_Endi4ne - Vice-Présidente</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card">
                <div class="card-content">
                  <div class="media">
                    <div class="media-content">
                      <p class="title is-5">Kenan Tunc</p>
                      <p class="subtitle is-6">@asumamusa - Vice-Président</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card">
                <div class="card-content">
                  <div class="media">
                    <div class="media-content">
                      <p class="title is-5">Evan Cocain</p>
                      <p class="subtitle is-6">@whiplash - Trésorier</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card">
                <div class="card-content">
                  <div class="media">
                    <div class="media-content">
                      <p class="title is-5">Rayane Boukrara</p>
                      <p class="subtitle is-6">
                        @Sherpearce - Secrétaire & Co-responsable Entreprise
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card">
                <div class="card-content">
                  <div class="media">
                    <div class="media-content">
                      <p class="title is-5">Maël Hostettler</p>
                      <p class="subtitle is-6">
                        @GMO_Goat - Responsable Formations
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card">
                <div class="card-content">
                  <div class="media">
                    <div class="media-content">
                      <p class="title is-5">Raphael Fabre</p>
                      <p class="subtitle is-6">
                        @harbinger - Responsable GATE®
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card">
                <div class="card-content">
                  <div class="media">
                    <div class="media-content">
                      <p class="title is-5">Grégoire Frémion</p>
                      <p class="subtitle is-6">
                        @acmo0 - Responsable Infrastructure
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card">
                <div class="card-content">
                  <div class="media">
                    <div class="media-content">
                      <p class="title is-5">Wassim Chekroud</p>
                      <p class="subtitle is-6">
                        @ceriseuh - Responsable Communication
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card">
                <div class="card-content">
                  <div class="media">
                    <div class="media-content">
                      <p class="title is-5">Guillaume Specque</p>
                      <p class="subtitle is-6">
                        @lorengayst - Responsable Slay
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card">
                <div class="card-content">
                  <div class="media">
                    <div class="media-content">
                      <p class="title is-5">Fargues Thomas</p>
                      <p class="subtitle is-6">
                        @ElPouleto - Co-Responsable Entreprise
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card">
                <div class="card-content">
                  <div class="media">
                    <div class="media-content">
                      <p class="title is-5">Matéo Daval</p>
                      <p class="subtitle is-6">
                        @crevette2923 - Bureau
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card">
                <div class="card-content">
                  <div class="media">
                    <div class="media-content">
                      <p class="title is-5">Yoann Bonora</p>
                      <p class="subtitle is-6">
                        @yovalow - Membre
                      </p>
                    </div>
                  </div>
                </div>
              </div>


            </div>
          </article>
          <article class="large-article">
            <div class="article-content" id="article-gate">
              <h3>Le GATE<span class="registered">®</span></h3>
              <div class="article-text">
                <p>
                  Le projet GATE® est un module de première année à Télécom
                  SudParis dans le cadre duquel des groupes d'étudiants
                  développent des compétences transversales au travers d'un
                  projet qui leur tient à coeur, en équipe et en autonomie.
                </p>
                <p>
                  Le GATE® HackademINT est constitué de 10 étudiants dont
                  l'objectif principal est l'auto-formation en cybersécurité, la
                  participation à de nombreuses compétitions nationales et
                  internationales, la création d'un évènement de sensibilisation
                  à l'OSINT sur le campus et la promotion des bonnes pratiques
                  d'hygiène numérique aux autres étudiants. Ce projet fournit un
                  cadre unique et stimulant qui favorise la formation express
                  des étudiants qui sont capables, au bout d'un an seulement, de
                  contribuer à la création d'un CTF d'ampleur nationale.
                </p>
              </div>
            </div>
            <div class="article-image">
              <img src="./assets/img/LogoGateNew.png" alt="Logos GATE" />
            </div>
          </article>
        </div>
      </section>
    </div>

    <div class="content-wrap">
      <section class="partners" id="partners">
        <div class="container">
          <article class="large-article">
            <div class="article-content">
              <h2>Nos partenaires</h2>
              <div class="partner-list">
                <div class="partner">
                  <!-- MiNET -->
                  <a href="https://minet.net" target="_blank">
                    <div class="logo-container">
                      <img
                              class="partner-logo"
                              src="assets/img/minet.svg"
                              alt="Logo de Minet"
                      />
                    </div>
                  </a>
                  <h3 class="partner-name">MiNET</h3>
                  <p class="partner-description">
                    MiNET est une association loi de 1901 chargée de la gestion du
                    réseau informatique de la MAISEL de Télécom SudParis & Institut
                    Mines-Télécom Business School depuis 1991.
                    <br />
                    Au travers notamment d'HackademINT et de ses autres clubs, MiNET
                    propose une vie associative technique complète et enrichissante.
                  </p>
                  <a
                          class="button is-primary partner-website"
                          href="https://minet.net"
                          target="_blank"
                  >Site de MiNET</a
                  >
                </div>

                <div class="partner">
                  <!-- TSP -->
                  <a href="https://www.telecom-sudparis.eu/" target="_blank">
                    <div class="logo-container">
                      <img
                              class="partner-logo"
                              src="./assets/img/TSP-large.png"
                              alt="Logo de Télécom SudParis"
                      />
                    </div>
                  </a>
                  <h3 class="partner-name">Télécom SudParis</h3>
                  <p class="partner-description short-description">
                    Télécom SudParis est une grande école publique d'ingénieurs
                    reconnue au meilleur niveau des sciences et technologies du
                    numérique. La qualité de ses formations est basée sur
                    l’excellence scientifique de son corps professoral et une
                    pédagogie mettant l’accent sur les projets d’équipes,
                    l’innovation de rupture et l’entreprenariat.
                  </p>
                  <a
                          class="button is-primary partner-website"
                          href="https://www.telecom-sudparis.eu/"
                          target="_blank"
                  >Site de Télécom SudParis</a
                  >
                </div>

                <div class="partner">
                  <!-- IMT-BS -->
                  <a href="https://www.imt-bs.eu/" target="_blank">
                    <div class="logo-container">
                      <img
                              class="partner-logo"
                              src="assets/img/IMT-BS.svg"
                              alt="Logo d'Institut Mines-Telecom Business school"
                      />
                    </div>
                  </a>
                  <h3 class="partner-name">IMT-BS</h3>
                  <p class="partner-description">
                    Institut Mines-Télécom Business School est la Business School du
                    groupe IMT, le premier groupe d’écoles d’ingénieurs et de
                    management en France.
                    <br />
                    IMT-BS forme des managers et des entrepreneurs innovants et
                    ouverts sur le monde, qui guideront les organisations dans les
                    transitions au cœur de la société de demain : numérique,
                    énergétique et écologique, économique et industrielle.
                  </p>
                  <a
                          class="button is-primary partner-website"
                          href="https://www.imt-bs.eu/"
                          target="_blank"
                  >Site d'IMT-BS</a
                  >
                </div>
              </div>
            </div>
          </article>
        </div>
      </section>
    </div>
    <script src="./script/splide.min.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        var splide = new Splide(".splide", {
          arrows: false,
          type: "loop",
          fixedWidth: "15rem",
          pauseOnFocus: false,
          pauseOnHover: false,
          perMove: 1,
          autoplay: true,
          interval: 1800,
          speed: 1800,
          easing: "linear",
          cover: false,
          drag: false,
          pagination: false,
          gap: "2rem",
        });
        splide.mount();
      });

      document.addEventListener("DOMContentLoaded", () => {
        // Get all "navbar-burger" elements
        const $navbarBurgers = Array.prototype.slice.call(
          document.querySelectorAll(".navbar-burger"),
          0
        );

        // Add a click event on each of them
        $navbarBurgers.forEach((el) => {
          el.addEventListener("click", () => {
            // Get the target from the "data-target" attribute
            const target = el.dataset.target;
            const $target = document.getElementById(target);

            // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
            el.classList.toggle("is-active");
            $target.classList.toggle("is-active");
          });
        });
      });
    </script>
  </body>
</html>