diff --git a/buildquest.html b/buildquest.html
new file mode 100644
index 0000000000000000000000000000000000000000..0120f7fb312fadcdd4ae2535f6c413cb34666b0a
--- /dev/null
+++ b/buildquest.html
@@ -0,0 +1,125 @@
+<!-- BuildQuest -->
+<!-- Date de création: 11 juin 2020 -->
+<!-- Auteur: Rétro -->
+
+<!DOCTYPE html>
+<html lang="fr">
+
+<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">
+
+ <title>BuildQuest | Comic</title>
+
+ <!-- Bootstrap core CSS -->
+ <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+
+ <!-- Style CSS du gabarit -->
+ <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">
+
+</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>
+ <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"><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
+ </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="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>
+ </li>
+
+ </ul>
+ </div>
+ </div>
+ </nav>
+
+ <!-- En-tête de page -->
+ <header id="en-tête-page">
+ <h1 class="section-heading text-center">
+ <img src="ressources/logo_comic.png" alt="Logo Comic">
+ BuildQuest
+ </h1>
+ </header>
+
+ <!-- Contenu -->
+ <section id="section-texte-gauche" class="section-impaire">
+ <div class="container-fluid text-left">
+ <h3 class="section-heading">Texte aligné à gauche</h3>
+ <div class="row justify-content-left">
+ <div class="col">
+ <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-paire">
+ <div class="container-fluid text-center">
+ <div class="row justify-content-center">
+ <div id="fish">
+ <img src="ressources/brochet.jpeg" alt="Fish">
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Bas-de-page -->
+ <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>© Comic 2020</p>
+ </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>
diff --git a/chronologie.html b/chronologie.html
new file mode 100644
index 0000000000000000000000000000000000000000..977bb69df415bf00dfddf5aa6726144909720e43
--- /dev/null
+++ b/chronologie.html
@@ -0,0 +1,137 @@
+<!-- Historique du Comic. Notre longévité est un point important. -->
+<!-- Date de création: 10 juin 2020 -->
+<!-- Auteur: Rétro -->
+
+<!DOCTYPE html>
+<html lang="fr">
+
+<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">
+
+ <title>Chronologie | Comic</title>
+
+ <!-- Bootstrap core CSS -->
+ <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+
+ <!-- Style CSS du gabarit -->
+ <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">
+
+</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>
+ <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"><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 active"><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
+ </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="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>
+ </li>
+
+ </ul>
+ </div>
+ </div>
+ </nav>
+
+ <!-- En-tête de page -->
+ <header id="en-tête-page">
+ <h1 class="section-heading text-center">
+ <img src="ressources/logo_comic.png" alt="Logo Comic">
+ Chronologie
+ </h1>
+ </header>
+
+ <!-- Contenu -->
+ <section id="section-texte-centrée" class="section-impaire">
+ <div class="container-fluid text-center">
+ <h3 class="section-heading">2020</h3>
+ <div class="row justify-content-center">
+ <div class="col">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis harum rem excepturi eius.</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section id="section-texte-centrée" class="section-paire">
+ <div class="container-fluid text-center">
+ <h3 class="section-heading">2019</h3>
+ <div class="row justify-content-center">
+ <div class="col">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis harum rem excepturi eius.</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section id="section-texte-centrée" class="section-impaire">
+ <div class="container-fluid text-center">
+ <h3 class="section-heading">[Année de fondation du Comic]</h3>
+ <div class="row justify-content-center">
+ <div class="col">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis harum rem excepturi eius.</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Bas-de-page -->
+ <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>© Comic 2020</p>
+ </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>
diff --git a/contact.html b/contact.html
new file mode 100644
index 0000000000000000000000000000000000000000..f13ebb39051fcf91cf17231d41077038f9c7bb1e
--- /dev/null
+++ b/contact.html
@@ -0,0 +1,145 @@
+<!-- Moyens pour le public de nous contacter -->
+<!-- Date de création: 10 juin 2020 -->
+<!-- Auteur: Rétro -->
+
+<!DOCTYPE html>
+<html lang="fr">
+
+<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">
+
+ <title>Contact | Comic</title>
+
+ <!-- Bootstrap core CSS -->
+ <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+
+ <!-- Style CSS du gabarit -->
+ <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">
+
+</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>
+ <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"><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 active"><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
+ </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="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>
+ </li>
+
+ </ul>
+ </div>
+ </div>
+ </nav>
+
+ <!-- En-tête de page -->
+ <header id="en-tête-page">
+ <h1 class="section-heading text-center">
+ <img src="ressources/logo_comic.png" alt="Logo Comic">
+ Contact
+ </h1>
+ </header>
+
+ <!-- Contenu -->
+ <section id="contact" class="section-impaire">
+ <div class="container-fluid text-left">
+ <h3 class="section-heading"><i class="fa fa-envelope"></i> Courriel</h3>
+ <div class="row justify-content-left">
+ <div class="col">
+ <p>Vous pouvez nous écrire à <a class="lien-cliquable" href="mailto:comic@nova.polymtl.ca">comic@nova.polymtl.ca</a>.</p>
+ </div>
+ </div>
+
+ <h3 class="section-heading"><i class="fab fa-facebook-square"></i> Facebook</h3>
+ <div class="row justify-content-left">
+ <div class="col">
+ <p>Nous répondons aux messages envoyés via <a class="lien-cliquable" href="https://www.facebook.com/lecomicpolymtl/">notre page</a>.</p>
+ </div>
+ </div>
+
+ <h3 class="section-heading"><i class="fa fa-laugh"></i> En personne</h3>
+ <div class="row justify-content-left">
+ <div class="col">
+ <!-- TODO: Écrire Le Polyscope avec leur police spéciale -->
+ <p>Notre local est au C215.02, jumelé avec <a class="lien-cliquable" href="https://www.polyscope.qc.ca/">Le Polyscope</a>.</p>
+ </div>
+ </div>
+
+ <h3 class="section-heading"><i class="fab fa-discord"></i> Discord - Polybash</h3>
+ <div class="row justify-content-left">
+ <div class="col">
+ <p>Pour toute question sur le <a class="lien-cliquable" href="polybash.html">Polybash</a>, ou encore pour trouver des coéquipiers!
+ <!-- TODO: Remplacer le lien d'invitation par le widget discord du serveur:
+ https://blog.discord.com/add-the-discord-widget-to-your-site-d45ffcd718c6 -->
+ <br>
+ <br>
+ <div id="widget-discord">
+ <iframe src="https://discordapp.com/widget?id=540605292631556136&theme=dark" width="100%" height="250" allowtransparency="true" frameborder="0"></iframe>
+ </div>
+ </p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Bas-de-page -->
+ <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>© Comic 2020</p>
+ </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>
diff --git a/css/comic.css b/css/comic.css
index 275c800fdd3b6fda4ba5adf3132981df136207c8..ba73d7d3c66ad95a4e7cff8b78fbdf7e4d1ba3b1 100644
--- a/css/comic.css
+++ b/css/comic.css
@@ -25,6 +25,225 @@
align-content: left;
}
+.dropdown-item:active {
+ background-color: gray;
+}
+
.icone-evenement {
width: 18px;
+}
+
+/* En-tête de page */
+#en-tête-page {
+ background-color: #F3F3F3;
+}
+
+#en-tête-page img {
+ height: 50px;
+}
+
+/* Sections */
+section {
+ font-family: "Arial";
+ padding-top: 2rem; /* Peut rétrécir cet espace si ça plus le
+ padding du section-heading crée trop d'espace
+ vide au haut des section */
+ padding-bottom: 2rem;
+ padding-left: 30px;
+ padding-right: 30px;
+}
+
+.section-paire {
+ background-color: #eeeeee;
+}
+
+.section-impaire {
+ background-color: white;
+}
+
+.section-heading {
+ margin: 0;
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+
+#en-tête {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+}
+
+/* Sections vidéos */
+.section-vidéo .container-fluid {
+ padding: 0;
+}
+
+.section-vidéo .row {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ padding-left: 2rem;
+ padding-right: 2rem;
+
+ margin: auto;
+}
+
+.section-vidéo video {
+ width: 100%;
+ /* Sans cette ligne, ça plante sur Safari 13.1.1
+ source: https://stackoverflow.com/questions/16079275/
+ html5-video-dimensions-in-safari-ios
+ [Réponse de Joel Karunungan] */
+ height: 100%;
+}
+
+.légende {
+ font-style: italic;
+ margin: 5px;
+}
+
+/* Grilles de portraits */
+.section-portraits {
+ padding-left: -20px;
+ padding-right: -20px;
+}
+
+.portrait {
+ width: 150px;
+ /* TODO: arrondir les coins */
+}
+
+.card {
+ margin: 10px;
+ max-width: 700px;
+ /* Ça devrait être assez large pour faire rentrer
+ n'importe quel couple "Pseudo | MonRôle" */
+ width: 450px; */
+}
+
+.card .portrait {
+ margin: 10px;
+}
+
+.card .portrait img {
+ width: 150px;
+ height: 150px;
+ border-radius: 50%; /* photos dans un cercle */
+}
+
+.card .card-body {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ padding-left: 10px;
+ padding-right: 10px;
+}
+
+.card-title .pseudo {
+ font-weight: bold;
+}
+
+.card-title .rôle {
+ color: grey;
+}
+
+/* Encadrés */
+.boite {
+ padding: 10px;
+}
+
+.encadré {
+ border: 1px #ccc solid;
+ padding-top: 50px;
+ padding-bottom: 50px;
+ padding-left: 20px;
+ padding-right: 20px;
+ align-content: center;
+}
+
+.encadré:hover {
+ background-color: lightgrey;
+}
+
+.encadré a {
+ color: black;
+ text-decoration: none;
+}
+
+.encadré div {
+ padding-left: 10px;
+ padding-right: 10px;
+}
+
+.encadré img {
+ max-width: 200px;
+ width: 100%;
+ padding-bottom: 1rem;
+}
+
+/* Bas-de-page */
+footer {
+ background-color: #202020;
+}
+footer p {
+ color: white;
+}
+
+a.lien-cliquable {
+ text-decoration: none;
+}
+
+.réseau-social {
+ font-size: 30px;
+ padding-left: 3px;
+ padding-right: 3px;
+}
+
+/* Insérer ci-dessous le CSS spécifique à une page */
+
+/* Spécifique à index.html (Accueil) */
+#grand-logo {
+ width: 250px;
+}
+
+#a-propos {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+}
+
+#services .section-heading {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+}
+
+/* Spécifique à gabarit.html */
+#fish {
+ max-width: 600px;
+}
+
+#fish img {
+ width: 100%;
+}
+
+#exemple-carrousel {
+ max-width: 700px;
+}
+
+#exemple-arbre-tournoi {
+ max-width: 700px;
+}
+
+/* Spécifique à contact.html */
+#contact .section-heading {
+ font-size: 2rem;
+}
+
+#contact .fa,.fab {
+ width: 30px;
+}
+
+#contact #widget-discord {
+ max-width: 450px;
+}
+
+/* Spécifique à réparons-poly.html */
+.btn-success a {
+ color: white;
}
\ No newline at end of file
diff --git a/gabarit.html b/gabarit.html
new file mode 100644
index 0000000000000000000000000000000000000000..326276ec2c7b778676498783218af3ca9357cf81
--- /dev/null
+++ b/gabarit.html
@@ -0,0 +1,353 @@
+<!-- Gabarit d'une page HTML du site du comic -->
+<!-- Date de création: 7 juin 2020 -->
+<!-- Auteur: Rétro -->
+
+<!-- L'objectif de ce fichier est de fournir une base à la création de nouvelles page sur le site du Comic.
+
+Éléments récurrents qui doivent être présents et identiques sur toutes les pages:
+ - Navbar
+ - Bas-de-page
+
+Échantillon d'éléments de documents usuels:
+ - En-tête de page (devrait être sur presque toutes les pages)
+ - Section avec titre et texte hiérarchisé
+ - Portraits ronds avec descriptifs
+ - Photo légendée
+ - Vidéo HTML5 légendée
+ - Carrousel de photos
+ - Tournoi https://brackethq.com
+ - Tournoi https://https://challonge.com/fr
+
+Quasiment tout les éléments sont tirés de la doc Bootstrap!
+https://getbootstrap.com/docs/4.5/getting-started/introduction/
+ -->
+
+
+
+<!-- Gabarit d'une page HTML du site du comic -->
+<!-- Date de création: [jour] [mois] [année] -->
+<!-- Auteur: [Pseudo] -->
+
+<!-- La conception du site est très largement pompée sur
+https://infos.step.polymtl.ca/, merci à eux pour leur consentement
+implicite. -->
+
+
+<!DOCTYPE html>
+<html lang="fr">
+
+<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">
+
+ <title>[Nom de la page] | Comic</title>
+
+ <!-- Bootstrap core CSS -->
+ <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+
+ <!-- Style CSS du gabarit -->
+ <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">
+
+</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>
+ <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
+ </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="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>
+ </li>
+
+ </ul>
+ </div>
+ </div>
+ </nav>
+
+ <!-- En-tête de page -->
+ <header id="en-tête-page">
+ <h1 class="section-heading text-center">
+ <img src="ressources/logo_comic.png" alt="Logo Comic">
+ [Nom de la page]
+ </h1>
+ </header>
+
+ <!-- Contenu -->
+ <section id="section-texte-gauche" class="section-impaire">
+ <div class="container-fluid text-left">
+ <h3 class="section-heading">Texte aligné à gauche</h3>
+ <div class="row justify-content-left">
+ <div class="col">
+ <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 id="section-texte-centrée" class="section-paire">
+ <div class="container-fluid text-center">
+ <h3 class="section-heading">Texte centré</h3>
+ <div class="row justify-content-center">
+ <div class="col">
+ <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 id="section-texte-droite" class="section-impaire">
+ <div class="container-fluid text-right">
+ <h3 class="section-heading">Texte aligné à droite</h3>
+ <div class="row justify-content-right">
+ <div class="col">
+ <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">
+ <h3 class="section-heading">Vidéo</h3>
+ <div class="row justify-content-center" style="max-width: 800px;">
+ <video controls>
+ <source src="ressources/preÌsentation-pinep-2018-2019.mp4" type="video/mp4">
+ </video>
+ <hr>
+ <p class="légende">Légende</p>
+ </div>
+ </div>
+ </section>
+
+ <section class="section-impaire">
+ <div class="container-fluid text-center">
+ <div class="row justify-content-center">
+ <div id="fish">
+ <img src="ressources/brochet.jpeg" alt="Fish">
+ <p class="légende">Hommage à notre ancien <s>dictateur</s>directeur bien-aimé</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Portraits -->
+ <section class="section-portraits section-paire">
+ <h3 class="section-heading text-center">Grille de portraits</h3>
+ <div class="container-fluid text-left">
+ <div class="row row-cols-2 row-cols-sm-auto justify-content-center">
+ <div class="card mb-3">
+ <div class="row no-gutters">
+ <div class="portrait col-md-auto">
+ <img src="ressources/logo-comic-2-lignes.jpeg" class="card-img" alt="Membre">
+ </div>
+ <div class="col-md">
+ <div class="card-body">
+ <h5 class="card-title"><span class="pseudo">Pseudo</span><span class="rôle"> | VP MonRôle</span></h5>
+ <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat tempora, pariatur perferendis maxime itaque eius sit. Hic dolorum numquam, dolores quia sequi. Sit ab eligendi recusandae modi nulla atque ducimus?</p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="card mb-3">
+ <div class="row no-gutters">
+ <div class="portrait col-md-auto">
+ <img src="ressources/logo-comic-2-lignes.jpeg" class="card-img" alt="Membre">
+ </div>
+ <div class="col-md">
+ <div class="card-body">
+ <h5 class="card-title"><span class="pseudo">Pseudo</span><span class="rôle"> | VP MonRôle</span></h5>
+ <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat tempora, pariatur perferendis maxime itaque eius sit. Hic dolorum numquam, dolores quia sequi. Sit ab eligendi recusandae modi nulla atque ducimus?</p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="card mb-3">
+ <div class="row no-gutters">
+ <div class="portrait col-md-auto">
+ <img src="ressources/logo-comic-2-lignes.jpeg" class="card-img" alt="Membre">
+ </div>
+ <div class="col-md">
+ <div class="card-body">
+ <h5 class="card-title"><span class="pseudo">Pseudo</span><span class="rôle"> | VP MonRôle</span></h5>
+ <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat tempora, pariatur perferendis maxime itaque eius sit. Hic dolorum numquam, dolores quia sequi. Sit ab eligendi recusandae modi nulla atque ducimus?</p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="card mb-3">
+ <div class="row no-gutters">
+ <div class="portrait col-md-auto">
+ <img src="ressources/logo-comic-2-lignes.jpeg" class="card-img" alt="Membre">
+ </div>
+ <div class="col-md">
+ <div class="card-body">
+ <h5 class="card-title"><span class="pseudo">Pseudo</span><span class="rôle"> | VP MonRôle</span></h5>
+ <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat tempora, pariatur perferendis maxime itaque eius sit. Hic dolorum numquam, dolores quia sequi. Sit ab eligendi recusandae modi nulla atque ducimus?</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Encadrés -->
+ <section id="section section-impaire">
+ <div class="container-fluid text-center">
+ <h3 class="section-heading">Encadrés</h3>
+ <div class="row justify-content-center">
+ <div class="boite col-md-4">
+ <div class="encadré">
+ <a href="#">
+ <img src="ressources/reÌparons-poly.png" alt="Logo Réparons-Poly"><br>
+ <div>
+ Texte explicatif. Court texte explicatif remplissage de la ligne temporaire. Encore plus de remplissage on dirait un journal télévisé.
+ </div>
+ </a>
+ </div>
+ </div>
+ <div class="boite col-md-4">
+ <div class="encadré">
+ <a href="#">
+ <img src="ressources/reÌparons-poly.png" alt="Logo Réparons-Poly"><br>
+ <div>
+ Texte explicatif. Court texte explicatif remplissage de la ligne temporaire. Encore plus de remplissage on dirait un journal télévisé.
+ </div>
+ </a>
+ </div>
+ </div>
+ <div class="boite col-md-4">
+ <div class="encadré">
+ <a href="#">
+ <img src="ressources/reÌparons-poly.png" alt="Logo Réparons-Poly"><br>
+ <div>
+ Texte explicatif. Court texte explicatif remplissage de la ligne temporaire. Encore plus de remplissage on dirait un journal télévisé.
+ </div>
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- /.row -->
+ </section>
+
+ <!-- Carrousel -->
+ <section class="section-paire">
+ <div id="exemple-carrousel" class="container-fluid text-center">
+ <div class="row justify-content-center">
+ <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+ <ol class="carousel-indicators">
+ <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+ <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+ <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+ </ol>
+ <div class="carousel-inner">
+ <div class="carousel-item active">
+ <img src="ressources/espadon.jpeg" class="d-block w-100" alt="Brochet">
+ </div>
+ <div class="carousel-item">
+ <img src="ressources/daurade.jpeg" class="d-block w-100" alt="Daurade">
+ </div>
+ <div class="carousel-item">
+ <img src="ressources/brochet-2.jpeg" class="d-block w-100" alt="Espadon">
+ </div>
+ </div>
+ <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+ <span class="sr-only">Previous</span>
+ </a>
+ <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ <span class="sr-only">Next</span>
+ </a>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Tournoi -->
+ <section class="section-impaire">
+ <div id="exemple-arbre-tournoi" class="container-fluid text-center">
+ <h3 class="section-heading">Tournoi</h3>
+ <div class="row justify-content-center">
+ <!-- NOTE: Pour l'esthétique, il peut être recommendable de réduire le
+ champ "height" généré par bracketHQ. Pour cet exemple il a généré "550",
+ ce qui est pas mal trop haut pour le petit arbre qu'il contient. -->
+ <iframe src="https://brackethq.com/b/6cpe/embed/" width="100%" height="400" frameborder="0"></iframe>
+ </div>
+ </div>
+ </section>
+
+ <!-- Tournoi -->
+ <section class="section-paire">
+ <div id="exemple-arbre-tournoi" class="container-fluid text-center">
+ <h3 class="section-heading">Tournoi</h3>
+ <div class="row justify-content-center">
+ <iframe src="https://challonge.com/fr/jkbqlixa/module" width="100%" height="300" frameborder="0" scrolling="auto" allowtransparency="true"></iframe>
+ </div>
+ </div>
+ </section>
+
+ <!-- Bas-de-page -->
+ <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>© Comic 2020</p>
+ </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>
diff --git a/index.html b/index.html
index 08725b24b263e896384107d32ba117bc17c1fcf2..1402566d0d120555a236a903af44eaf7ae5a0a14 100644
--- a/index.html
+++ b/index.html
@@ -51,19 +51,20 @@ implicite. -->
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
- <li class="nav-item active"><a class="nav-link" href="#">Accueil<span class="sr-only">(current)</span></a></li>
- <li class="nav-item"><a class="nav-link" href="#">Le Comité</a></li>
- <li class="nav-item"><a class="nav-link" href="#">Chronologie</a></li>
- <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
+ <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
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
- <a class="dropdown-item" href="#"><i class="fa fa-trophy icone-evenement"></i> Polybash</a>
- <a class="dropdown-item" href="#"><i class="fa fa-hammer icone-evenement"></i> BuildQuest</a>
- <a class="dropdown-item" href="#"><i class="fa fa-wrench icone-evenement"></i> Réparons-Poly</a>
+ <a class="dropdown-item" href="polybash.html"><i class="fa fa-trophy icone-evenement"></i> Polybash</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>
</li>
@@ -72,96 +73,90 @@ implicite. -->
</div>
</nav>
- <!-- Header -->
- <header class="bg-primary py-5 mb-5">
- <div class="container h-100">
- <div class="row h-100 align-items-center">
- <div class="col-lg-12">
- <h1 class="display-4 text-white mt-5 mb-2">Business Name or Tagline</h1>
- <p class="lead mb-5 text-white-50">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non possimus ab labore provident mollitia. Id assumenda voluptate earum corporis facere quibusdam quisquam iste ipsa cumque unde nisi, totam quas ipsam.</p>
- </div>
- </div>
- </div>
+ <!-- Image en fond avec le logo Comic-inside en gros -->
+ <header id="en-tête" class="bg-primary">
+ <!-- TODO: Rajouter une image en fond -->
+ <!-- TODO: Rendre le logo plus beau -->
+ <h1 class="section-heading text-center">
+ <img src="ressources/logo_comic.png" alt="Logo Comic" id="grand-logo">
+ </h1>
</header>
<!-- Contenu -->
- <div class="container">
-
- <div class="row">
- <div class="col-md-8 mb-5">
- <h2>What We Do</h2>
- <hr>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A deserunt neque tempore recusandae animi soluta quasi? Asperiores rem dolore eaque vel, porro, soluta unde debitis aliquam laboriosam. Repellat explicabo, maiores!</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis optio neque consectetur consequatur magni in nisi, natus beatae quidem quam odit commodi ducimus totam eum, alias, adipisci nesciunt voluptate. Voluptatum.</p>
- <a class="btn btn-primary btn-lg" href="#">Call to Action »</a>
+ <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 class="col-md-4 mb-5">
- <h2>Contact Us</h2>
- <hr>
- <address>
- <strong>Start Bootstrap</strong>
- <br>3481 Melrose Place
- <br>Beverly Hills, CA 90210
- <br>
- </address>
- <address>
- <abbr title="Phone">P:</abbr>
- (123) 456-7890
- <br>
- <abbr title="Email">E:</abbr>
- <a href="mailto:#">name@example.com</a>
- </address>
+ </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;">
+ <video controls>
+ <source src="ressources/preÌsentation-pinep-2018-2019.mp4" type="video/mp4">
+ </video>
</div>
</div>
- <!-- /.row -->
-
- <div class="row">
- <div class="col-md-4 mb-5">
- <div class="card h-100">
- <img class="card-img-top" src="http://placehold.it/300x200" alt="">
- <div class="card-body">
- <h4 class="card-title">Card title</h4>
- <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque sequi doloribus.</p>
- </div>
- <div class="card-footer">
- <a href="#" class="btn btn-primary">Find Out More!</a>
+ </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">
+ <div class="boite col-md-4">
+ <div class="encadré">
+ <a href="#">
+ <img src="ressources/reÌparons-poly.png" alt="Logo Réparons-Poly"><br>
+ <div>
+ Texte explicatif. Court texte explicatif remplissage de la ligne temporaire. Encore plus de remplissage on dirait un journal télévisé.
+ </div>
+ </a>
</div>
</div>
- </div>
- <div class="col-md-4 mb-5">
- <div class="card h-100">
- <img class="card-img-top" src="http://placehold.it/300x200" alt="">
- <div class="card-body">
- <h4 class="card-title">Card title</h4>
- <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque sequi doloribus totam ut praesentium aut.</p>
- </div>
- <div class="card-footer">
- <a href="#" class="btn btn-primary">Find Out More!</a>
+ <div class="boite col-md-4">
+ <div class="encadré">
+ <a href="#">
+ <img src="ressources/reÌparons-poly.png" alt="Logo Réparons-Poly"><br>
+ <div>
+ Texte explicatif. Court texte explicatif remplissage de la ligne temporaire. Encore plus de remplissage on dirait un journal télévisé.
+ </div>
+ </a>
</div>
</div>
- </div>
- <div class="col-md-4 mb-5">
- <div class="card h-100">
- <img class="card-img-top" src="http://placehold.it/300x200" alt="">
- <div class="card-body">
- <h4 class="card-title">Card title</h4>
- <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
- </div>
- <div class="card-footer">
- <a href="#" class="btn btn-primary">Find Out More!</a>
+ <div class="boite col-md-4">
+ <div class="encadré">
+ <a href="#">
+ <img src="ressources/reÌparons-poly.png" alt="Logo Réparons-Poly"><br>
+ <div>
+ Texte explicatif. Court texte explicatif remplissage de la ligne temporaire. Encore plus de remplissage on dirait un journal télévisé.
+ </div>
+ </a>
</div>
</div>
</div>
</div>
<!-- /.row -->
-
- </div>
- <!-- /.container -->
-
- <!-- Footer -->
- <footer class="py-5 bg-dark">
- <div class="container">
- <p class="m-0 text-center text-white">© Comic 2020</p>
+ </section>
+
+ <!-- Bas-de-page -->
+ <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>© Comic 2020</p>
</div>
<!-- /.container -->
</footer>
diff --git "a/le-comit\303\251.html" "b/le-comit\303\251.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a5be550bcf16af91d7ad75658891a7e02f98d642
--- /dev/null
+++ "b/le-comit\303\251.html"
@@ -0,0 +1,167 @@
+<!-- Liste des membres du comité -->
+<!-- Date de création: 10 juin 2020 -->
+<!-- Auteur: Rétro -->
+
+<!DOCTYPE html>
+<html lang="fr">
+
+<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">
+
+ <title>Le Comité | Comic</title>
+
+ <!-- Bootstrap core CSS -->
+ <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+
+ <!-- Style CSS du gabarit -->
+ <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">
+
+</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>
+ <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"><a class="nav-link text-nowrap" href="index.html">Accueil<span class="sr-only">(current)</span></a></li>
+ <li class="nav-item active"><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
+ </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="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>
+ </li>
+
+ </ul>
+ </div>
+ </div>
+ </nav>
+
+ <!-- En-tête de page -->
+ <header id="en-tête-page">
+ <h1 class="section-heading text-center">
+ <img src="ressources/logo_comic.png" alt="Logo Comic">
+ Le Comité
+ </h1>
+ </header>
+
+ <!-- Portraits -->
+ <section class="section-portraits section-impaire">
+ <h3 class="section-heading text-center">Grille de portraits</h3>
+ <div class="container-fluid text-left">
+ <div class="row row-cols-2 row-cols-sm-auto justify-content-center">
+ <div class="card mb-3">
+ <div class="row no-gutters">
+ <div class="portrait col-md-auto">
+ <img src="ressources/logo-comic-2-lignes.jpeg" class="card-img" alt="Membre">
+ </div>
+ <div class="col-md">
+ <div class="card-body">
+ <h5 class="card-title"><span class="pseudo">Pseudo</span><span class="rôle"> | VP MonRôle</span></h5>
+ <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat tempora, pariatur perferendis maxime itaque eius sit. Hic dolorum numquam, dolores quia sequi. Sit ab eligendi recusandae modi nulla atque ducimus?</p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="card mb-3">
+ <div class="row no-gutters">
+ <div class="portrait col-md-auto">
+ <img src="ressources/logo-comic-2-lignes.jpeg" class="card-img" alt="Membre">
+ </div>
+ <div class="col-md">
+ <div class="card-body">
+ <h5 class="card-title"><span class="pseudo">Pseudo</span><span class="rôle"> | VP MonRôle</span></h5>
+ <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat tempora, pariatur perferendis maxime itaque eius sit. Hic dolorum numquam, dolores quia sequi. Sit ab eligendi recusandae modi nulla atque ducimus?</p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="card mb-3">
+ <div class="row no-gutters">
+ <div class="portrait col-md-auto">
+ <img src="ressources/logo-comic-2-lignes.jpeg" class="card-img" alt="Membre">
+ </div>
+ <div class="col-md">
+ <div class="card-body">
+ <h5 class="card-title"><span class="pseudo">Pseudo</span><span class="rôle"> | VP MonRôle</span></h5>
+ <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat tempora, pariatur perferendis maxime itaque eius sit. Hic dolorum numquam, dolores quia sequi. Sit ab eligendi recusandae modi nulla atque ducimus?</p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="card mb-3">
+ <div class="row no-gutters">
+ <div class="portrait col-md-auto">
+ <img src="ressources/logo-comic-2-lignes.jpeg" class="card-img" alt="Membre">
+ </div>
+ <div class="col-md">
+ <div class="card-body">
+ <h5 class="card-title"><span class="pseudo">Pseudo</span><span class="rôle"> | VP MonRôle</span></h5>
+ <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat tempora, pariatur perferendis maxime itaque eius sit. Hic dolorum numquam, dolores quia sequi. Sit ab eligendi recusandae modi nulla atque ducimus?</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Bas-de-page -->
+ <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>© Comic 2020</p>
+ </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>
diff --git a/polybash.html b/polybash.html
new file mode 100644
index 0000000000000000000000000000000000000000..b7ae0f74f84bb812e45a16f4a80ec4d69213950d
--- /dev/null
+++ b/polybash.html
@@ -0,0 +1,172 @@
+<!-- Polybash -->
+<!-- Date de création: 11 juin 2020 -->
+<!-- Auteur: Rétro -->
+
+<!DOCTYPE html>
+<html lang="fr">
+
+<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">
+
+ <title>Polybash | Comic</title>
+
+ <!-- Bootstrap core CSS -->
+ <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+
+ <!-- Style CSS du gabarit -->
+ <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">
+
+</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>
+ <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"><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
+ </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="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>
+ </li>
+
+ </ul>
+ </div>
+ </div>
+ </nav>
+
+ <!-- En-tête de page -->
+ <header id="en-tête-page">
+ <h1 class="section-heading text-center">
+ <img src="ressources/logo_comic.png" alt="Logo Comic">
+ Polybash
+ </h1>
+ </header>
+
+ <!-- Contenu -->
+ <section id="section-texte-gauche" class="section-impaire">
+ <div class="container-fluid text-left">
+ <h3 class="section-heading">Texte aligné à gauche</h3>
+ <div class="row justify-content-left">
+ <div class="col">
+ <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>
+
+ <!-- Carrousel -->
+ <section class="section-paire">
+ <div id="exemple-carrousel" class="container-fluid text-center">
+ <div class="row justify-content-center">
+ <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+ <ol class="carousel-indicators">
+ <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+ <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+ <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+ </ol>
+ <div class="carousel-inner">
+ <div class="carousel-item active">
+ <img src="ressources/espadon.jpeg" class="d-block w-100" alt="Brochet">
+ </div>
+ <div class="carousel-item">
+ <img src="ressources/daurade.jpeg" class="d-block w-100" alt="Daurade">
+ </div>
+ <div class="carousel-item">
+ <img src="ressources/brochet-2.jpeg" class="d-block w-100" alt="Espadon">
+ </div>
+ </div>
+ <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+ <span class="sr-only">Previous</span>
+ </a>
+ <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ <span class="sr-only">Next</span>
+ </a>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Tournoi -->
+ <section class="section-impaire">
+ <div id="exemple-arbre-tournoi" class="container-fluid text-center">
+ <h3 class="section-heading">Tournoi</h3>
+ <div class="row justify-content-center">
+ <!-- NOTE: Pour l'esthétique, il peut être recommendable de réduire le
+ champ "height" généré par bracketHQ. Pour cet exemple il a généré "550",
+ ce qui est pas mal trop haut pour le petit arbre qu'il contient. -->
+ <iframe src="https://brackethq.com/b/6cpe/embed/" width="100%" height="400" frameborder="0"></iframe>
+ </div>
+ </div>
+ </section>
+
+ <!-- Tournoi -->
+ <section class="section-paire">
+ <div id="exemple-arbre-tournoi" class="container-fluid text-center">
+ <h3 class="section-heading">Tournoi</h3>
+ <div class="row justify-content-center">
+ <iframe src="https://challonge.com/fr/jkbqlixa/module" width="100%" height="300" frameborder="0" scrolling="auto" allowtransparency="true"></iframe>
+ </div>
+ </div>
+ </section>
+
+ <!-- Bas-de-page -->
+ <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>© Comic 2020</p>
+ </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>
diff --git a/ressources/brochet-2.jpeg b/ressources/brochet-2.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..3c5dea79214fe6480167e85dd14a9d2b10f95310
Binary files /dev/null and b/ressources/brochet-2.jpeg differ
diff --git a/ressources/brochet.jpeg b/ressources/brochet.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..6e4ced788983bc45dfcffbf861b7bf3d970ab3a2
Binary files /dev/null and b/ressources/brochet.jpeg differ
diff --git a/ressources/daurade.jpeg b/ressources/daurade.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..16473193247351e735bef1faca65a9b397681801
Binary files /dev/null and b/ressources/daurade.jpeg differ
diff --git a/ressources/espadon.jpeg b/ressources/espadon.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..4d8aed7c406f769c686322ab36958e6b0d0eeb3c
Binary files /dev/null and b/ressources/espadon.jpeg differ
diff --git a/ressources/logo-comic-2-lignes.jpeg b/ressources/logo-comic-2-lignes.jpeg
new file mode 100755
index 0000000000000000000000000000000000000000..322fe513d093919095c5e28e0272beac2d41b6b6
Binary files /dev/null and b/ressources/logo-comic-2-lignes.jpeg differ
diff --git "a/ressources/pr\303\251sentation-pinep-2018-2019.mp4" "b/ressources/pr\303\251sentation-pinep-2018-2019.mp4"
new file mode 100755
index 0000000000000000000000000000000000000000..4402dde76c0dfa4f0e97ef857fd5393e584cdba9
Binary files /dev/null and "b/ressources/pr\303\251sentation-pinep-2018-2019.mp4" differ
diff --git "a/ressources/r\303\251parons-poly.png" "b/ressources/r\303\251parons-poly.png"
new file mode 100644
index 0000000000000000000000000000000000000000..bb6553ec07b7a106d5d94bfa2ba28ba0f5fdf469
Binary files /dev/null and "b/ressources/r\303\251parons-poly.png" differ
diff --git "a/r\303\251parons-poly.html" "b/r\303\251parons-poly.html"
new file mode 100644
index 0000000000000000000000000000000000000000..38a0f7177b930b46c7f40798ea7edd583801d1d0
--- /dev/null
+++ "b/r\303\251parons-poly.html"
@@ -0,0 +1,130 @@
+<!-- BuildQuest -->
+<!-- Date de création: 11 juin 2020 -->
+<!-- Auteur: Rétro -->
+
+<!DOCTYPE html>
+<html lang="fr">
+
+<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">
+
+ <title>Réparons-Poly | Comic</title>
+
+ <!-- Bootstrap core CSS -->
+ <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+
+ <!-- Style CSS du gabarit -->
+ <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">
+
+</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>
+ <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"><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
+ </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="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>
+ </li>
+
+ </ul>
+ </div>
+ </div>
+ </nav>
+
+ <!-- En-tête de page -->
+ <header id="en-tête-page">
+ <h1 class="section-heading text-center">
+ <img src="ressources/logo_comic.png" alt="Logo Comic">
+ Réparons-Poly
+ </h1>
+ </header>
+
+ <!-- Contenu -->
+ <section id="section-texte-gauche" class="section-impaire">
+ <div class="container-fluid text-left">
+ <h3 class="section-heading">Texte aligné à gauche</h3>
+ <div class="row justify-content-left">
+ <div class="col">
+ <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 class="row justify-content-left">
+ <div class="col">
+ <button type="button" class="btn btn-primary btn-lg btn-success"><a class="lien-cliquable" href="http://reparonspoly.polyfab.polymtl.ca/login.php">Inscriptions en ligne â</a></button>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section class="section-paire">
+ <div class="container-fluid text-center">
+ <div class="row justify-content-center">
+ <div id="fish">
+ <img src="ressources/brochet.jpeg" alt="Fish">
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Bas-de-page -->
+ <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>© Comic 2020</p>
+ </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>
diff --git a/s-impliquer.html b/s-impliquer.html
new file mode 100644
index 0000000000000000000000000000000000000000..d3b9dbf1911dcce177078cf7f4a3403ef450ccc9
--- /dev/null
+++ b/s-impliquer.html
@@ -0,0 +1,126 @@
+<!-- Message de recrutement -->
+<!-- Date de création: 10 juin 2020 -->
+<!-- Auteur: Rétro -->
+
+<!DOCTYPE html>
+<html lang="fr">
+
+<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">
+
+ <title>S'impliquer | Comic</title>
+
+ <!-- Bootstrap core CSS -->
+ <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+
+ <!-- Style CSS du gabarit -->
+ <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">
+
+</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>
+ <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"><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 active"><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
+ </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="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>
+ </li>
+
+ </ul>
+ </div>
+ </div>
+ </nav>
+
+ <!-- En-tête de page -->
+ <header id="en-tête-page">
+ <h1 class="section-heading text-center">
+ <img src="ressources/logo_comic.png" alt="Logo Comic">
+ S'impliquer
+ </h1>
+ </header>
+
+ <!-- Contenu -->
+ <section id="section-texte-gauche" class="section-impaire">
+ <div class="container-fluid text-left">
+ <h3 class="section-heading">Texte aligné à gauche</h3>
+ <div class="row justify-content-left">
+ <div class="col">
+ <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-paire">
+ <div class="container-fluid text-center">
+ <div class="row justify-content-center">
+ <div id="fish">
+ <img src="ressources/brochet.jpeg" alt="Fish">
+ <p class="légende">Hommage à notre ancien <s>dictateur</s>directeur bien-aimé</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Bas-de-page -->
+ <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>© Comic 2020</p>
+ </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>