Skip to content
Snippets Groups Projects
index.html 7.62 KiB
Newer Older
<!-- HTML du site du comic -->
<!-- Date de création: 2 juin 2020 -->
<!-- Auteur: Rétro -->

<!-- La conception du site est très largement pompée sur
https://infos.step.polymtl.ca/, merci à eux pour leur consentement
implicite. -->

Yann Roberge's avatar
Yann Roberge committed
<!DOCTYPE html>
<html lang="fr">
Yann Roberge's avatar
Yann Roberge committed

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Comité de Micro-informatique de Polytechnique Montréal">
  <meta name="author" content="Comic">
Yann Roberge's avatar
Yann Roberge committed

  <title>Comic</title>
Yann Roberge's avatar
Yann Roberge committed

  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Style CSS du gabarit -->
Yann Roberge's avatar
Yann Roberge committed
  <link href="css/business-frontpage.css" rel="stylesheet">

  <!-- Style CSS du gabarit -->
  <link href="css/comic.css" rel="stylesheet">

  <!-- Icône -->
  <link rel="icon" type="image/png" sizes="96x96" href="ressources/icone-96x96.png">
  <link rel="manifest" href="ressources/manifest.json">
  <meta name="theme-color" content="#ffffff">

  <!-- Icônes des événements -->
  <link href="fontawesome-5.13.0/css/all.css" rel="stylesheet">

Yann Roberge's avatar
Yann Roberge committed
</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-expand-sm navbar-dark fixed-top">
    <div class="container nav-container">
      <a class="navbar-brand" href="index.html">
        <img src="ressources/logo_comic_blanc.png" alt="Logo" id="logoNavbar">
      </a>
Yann Roberge's avatar
Yann Roberge committed
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav">

          <li class="nav-item active"><a class="nav-link text-nowrap" href="index.html">Accueil<span class="sr-only">(current)</span></a></li>
          <li class="nav-item"><a class="nav-link text-nowrap" href="le-comité.html">Le Comité</a></li>
          <li class="nav-item"><a class="nav-link text-nowrap" href="chronologie.html">Chronologie</a></li>
          <li class="nav-item"><a class="nav-link text-nowrap" href="s-impliquer.html">S'impliquer</a></li>
          <li class="nav-item"><a class="nav-link text-nowrap" href="contact.html">Contact</a></li>

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Services
Yann Roberge's avatar
Yann Roberge committed
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="polybash.html"><i class="fa fa-trophy icone-evenement"></i> Polybash</a>
              <a class="dropdown-item" href="saltcup.html"><img id="icone-saltcup" class="icone-evenement" src="ressources/saliere-noire.svg" alt=""> Saltcup</a>
              <a class="dropdown-item" href="buildquest.html"><i class="fa fa-hammer icone-evenement"></i> BuildQuest</a>
              <a class="dropdown-item" href="réparons-poly.html"><i class="fa fa-wrench icone-evenement"></i> Réparons-Poly</a>
            </div>
Yann Roberge's avatar
Yann Roberge committed
          </li>
Yann Roberge's avatar
Yann Roberge committed
        </ul>
      </div>
    </div>
  </nav>

  <!-- Image en fond avec le logo Comic-inside en gros -->
  <header class="text-center">
      <img class="image-fond" src="ressources/image-bash-2012-avec-logo.png" alt="Photo Polybash 2012">
Yann Roberge's avatar
Yann Roberge committed
  </header>

  <!-- Contenu -->
  <section id="a-propos">
    <div class="container-fluid text-center">
      <h3 class="section-heading">QU'EST-CE QUE LE COMIC?</h3>
      <div class="row justify-content-center">
        <div class="col-8">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis harum rem excepturi eius. Officia itaque ducimus dolore nisi eum necessitatibus quae, quam repudiandae, temporibus debitis quia quibusdam, enim dolorem optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere ad, et, ratione corporis doloribus perferendis soluta error alias natus eligendi rerum iure illo, quisquam, earum aperiam sapiente odio recusandae? Quo.</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section-vidéo section-paire">
    <div class="container-fluid text-center">
      <div class="row justify-content-center" style="max-width: 800px;">
          <source src="ressources/presentation-pinep-2018-2019.mp4" type="video/mp4">
        </video>
      </div>
    </div>
  </section>
  <section id="services">
    <!-- TODO: Ajouter des imagettes et des texte descriptifs de nos différents services -->
    <div class="container-fluid text-center">
      <h3 class="section-heading">SERVICES</h3>
      <div class="row justify-content-center">
            <a href="polybash.html">
              <img id="logo-polybash" src="ressources/polybash.png" alt="Logo Polybash"><br>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi esse rem ipsum quisquam, sapiente molestias, cupiditate nihil
Yann Roberge's avatar
Yann Roberge committed
          </div>
        </div>
            <a href="saltcup.html">
              <img src="ressources/saltcup.png" alt="Logo Saltcup"><br>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi esse rem ipsum quisquam, sapiente molestias, cupiditate nihil
            <a href="buildquest.html">
              <img id="logo-buildquest" src="ressources/buildquest.png" alt="Logo BuildQuest"><br>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi esse rem ipsum quisquam, sapiente molestias, cupiditate nihil
Yann Roberge's avatar
Yann Roberge committed
          </div>
        </div>
            <a href="réparons-poly.html">
              <img id="logo-reparons-poly" src="ressources/reparons-poly.png" alt="Logo Réparons-Poly"><br>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi esse rem ipsum quisquam, sapiente molestias, cupiditate nihil
Yann Roberge's avatar
Yann Roberge committed
          </div>
        </div>
      </div>
    </div>
    <!-- /.row -->
  <footer class="py-5">
    <div class="container text-center">
      <h5><b><p>COMIC</p></b></h5>
      <p>Local C215.02 (Pavillon Principal)
        <br>École Polytechnique de Montréal
        <br><a class="lien-cliquable" href="mailto:comic@nova.polymtl.ca">comic@nova.polymtl.ca</a>
        <br><a class="réseau-social" href="https://www.facebook.com/lecomicpolymtl/"><i class="fab fa-facebook-square"></i></a>
        <a class="réseau-social" href="https://m.me/lecomicpolymtl"><i class="fab fa-facebook-messenger"></i></a>
        <!-- NOTE: Le lien d'invitation vers le Discord du Polybash est lié
        au compte personnel de Rétro. Créer un nouveau lien d'invitation --à date d'expiration illimitée-- quand ce sera approprié. -->
        <a class="réseau-social" href="https://discord.gg/EqHDKYK"><i class="fab fa-discord"></i></a></p>
      <p>&copy; Comic 2020</p>
Yann Roberge's avatar
Yann Roberge committed
    </div>
    <!-- /.container -->
  </footer>

  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

</body>

</html>