diff --git a/contact.html b/contact.html
new file mode 100644
index 0000000000000000000000000000000000000000..2ba6742873e678c783959329d1d6f5bf5c10aa24
--- /dev/null
+++ b/contact.html
@@ -0,0 +1,136 @@
+<!-- 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="#"><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>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>
+
+ <h3 class="section-heading"><i class="fab fa-discord"></i> Discord</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>
+
+ <h3 class="section-heading"><i class="fab fa-facebook-square"></i> Facebook</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>
+
+ <h3 class="section-heading"><i class="fa fa-laugh"></i> En personne</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>
+
+ <!-- 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 id="courriel" 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 8f63dcfac18148b2518928141449cbe11ec6b9a2..f6db9ab350b8235fd78f48a5503dfba3c7d6e52b 100644
--- a/css/comic.css
+++ b/css/comic.css
@@ -228,4 +228,13 @@ footer p {
#exemple-arbre-tournoi {
max-width: 700px;
+}
+
+/* Spécifique à contact.html */
+#contact .section-heading {
+ font-size: 2rem;
+}
+
+#contact .fa,.fab {
+ width: 30px;
}
\ No newline at end of file