init

403.php

@@ -0,0 +1,7 @@
+<?php
+    $language = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
+    echo($language);
+    $accept = ['fr', 'en'];
+    $language = in_array($language, $accept) ? $language : 'fr';
+    header("location:/pages/{$language}/err/403.html");
+?>

404.php

@@ -0,0 +1,7 @@
+<?php
+    $language = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
+    echo($language);
+    $accept = ['fr', 'en'];
+    $language = in_array($language, $accept) ? $language : 'fr';
+    header("location:/pages/{$language}/err/404.html");
+?>

500.php

@@ -0,0 +1,7 @@
+<?php
+    $language = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
+    echo($language);
+    $accept = ['fr', 'en'];
+    $language = in_array($language, $accept) ? $language : 'fr';
+    header("location:/pages/{$language}/err/500.html");
+?>

README.md

@@ -1,3 +1,3 @@
-# TeleQom.org
+# teleqom.org
 
-TeleQom.org website (https://teleqom.org)
+TeleQom's Official Website https://teleqom.org

config/PRIVATE/.htaccess.example

@@ -0,0 +1,30 @@
+ErrorDocument 400 /err.php
+ErrorDocument 401 /err.php
+ErrorDocument 402 /err.php
+ErrorDocument 403 /403.php
+ErrorDocument 404 /404.php
+ErrorDocument 405 /err.php
+ErrorDocument 406 /err.php
+ErrorDocument 407 /err.php
+ErrorDocument 408 /err.php
+ErrorDocument 409 /err.php
+ErrorDocument 410 /err.php
+ErrorDocument 411 /err.php
+ErrorDocument 412 /err.php
+ErrorDocument 413 /err.php
+ErrorDocument 414 /err.php
+ErrorDocument 415 /err.php
+ErrorDocument 416 /err.php
+ErrorDocument 417 /err.php
+ErrorDocument 422 /err.php
+ErrorDocument 423 /err.php
+ErrorDocument 424 /err.php
+ErrorDocument 500 /500.php
+ErrorDocument 501 /err.php
+ErrorDocument 502 /err.php
+ErrorDocument 503 /err.php
+ErrorDocument 504 /err.php
+ErrorDocument 505 /err.php
+ErrorDocument 506 /err.php
+ErrorDocument 507 /err.php
+ErrorDocument 510 /err.php

config/PRIVATE/DB.php.example

@@ -0,0 +1,3 @@
+<?php
+    $pdo=new PDO("mysql:host=ADRESS_TO_HOST;dbname=DATABASE_NAME", "DATABASE_USER", "DATABASE_USER_PASSWORD");
+?>

config/PRIVATE/NEWSLETTER.php.example

@@ -0,0 +1,6 @@
+<?php
+
+$_ENV['newsletter_url_fr'] ='';
+$_ENV['newsletter_url_en'] ='';
+
+?>

css/pages/confirmation.css

@@ -0,0 +1,4 @@
+@import "/css/utils/base.css";
+@import "/css/utils/buttons.css";
+@import "/css/sections/nav.css";
+@import "/css/sections/message.css";

css/pages/development.css

@@ -0,0 +1,9 @@
+@import "/css/utils/base.css";
+@import "/css/utils/buttons.css";
+@import "/css/utils/forms.css";
+@import "/css/sections/nav.css";
+@import "/css/sections/intro.css";
+@import "/css/sections/products.css";
+@import "/css/sections/call-to-action.css";
+@import "/css/sections/footer.css";
+

css/pages/errors.css

@@ -0,0 +1,4 @@
+@import "/css/utils/base.css";
+@import "/css/utils/buttons.css";
+@import "/css/sections/nav.css";
+@import "/css/sections/message.css";

css/pages/index.css

@@ -0,0 +1,11 @@
+@import "/css/utils/base.css";
+@import "/css/utils/buttons.css";
+@import "/css/utils/forms.css";
+
+@import "/css/sections/nav.css";
+@import "/css/sections/welcome.css";
+@import "/css/sections/about.css";
+@import "/css/sections/services.css";
+@import "/css/sections/projects.css";
+@import "/css/sections/contact.css";
+@import "/css/sections/footer.css";

css/pages/installation.css

@@ -0,0 +1,9 @@
+@import "/css/utils/base.css";
+@import "/css/utils/buttons.css";
+@import "/css/utils/forms.css";
+@import "/css/sections/nav.css";
+@import "/css/sections/intro.css";
+@import "/css/sections/products.css";
+@import "/css/sections/call-to-action.css";
+@import "/css/sections/footer.css";
+

css/pages/repairs.css

@@ -0,0 +1,9 @@
+@import "/css/utils/base.css";
+@import "/css/utils/buttons.css";
+@import "/css/utils/forms.css";
+@import "/css/sections/nav.css";
+@import "/css/sections/intro.css";
+@import "/css/sections/products.css";
+@import "/css/sections/call-to-action.css";
+@import "/css/sections/footer.css";
+

css/sections/about.css

@@ -0,0 +1,25 @@
+.about {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.about h2 {
+  margin-bottom: 5rem;
+}
+
+.about div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 2rem;
+  text-align: center;
+  max-width: 80%;
+}
+
+.about h3 {
+  margin-bottom: 2rem;
+  text-decoration: 0.2rem solid var(--item-color-1) underline;  
+}

css/sections/call-to-action.css

@@ -0,0 +1,12 @@
+#call-to-action {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+    justify-content: center;
+	text-align: center;
+    background-color: var(--background-color-2);
+}
+
+#call-to-action .description {
+    margin:2rem;
+}

css/sections/contact.css

@@ -0,0 +1,53 @@
+#contact {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--background-color-2);
+}
+
+#contact h2 {
+    margin-bottom: 5rem;
+}
+
+#contact-form {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 80%;
+}
+
+#contact input[type=text], #contact input[type=email] {
+    width: 100%;
+    max-width: 25rem;
+}
+
+#contact textarea {
+    width: 100%;
+}
+
+.contact-radio-container {
+    display: flex;
+    flex-direction: row;
+}
+
+.contact-radio-item {
+    display: flex;
+    flex-direction: column;
+    margin:1rem;
+}
+
+#contact label {
+    margin-bottom:0.5rem;
+}
+
+#contact h4 {
+    margin-top:2rem;
+}
+
+@media only screen and (max-width: 500px) {
+    #contact-form {
+        width: 90%;
+    }
+  }

css/sections/footer.css

@@ -0,0 +1,71 @@
+
+footer {
+    padding: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+}
+
+footer h5 {
+    font-size: 1rem;
+}
+
+footer .newsletter {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+footer .newsletter p {
+    font-size: 0.8rem;
+}
+
+footer .newsletter form {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+footer input[type=email] {
+    background-color: var(--background-color-2);
+    width: 100%;
+}
+
+footer .newsletter .btn {
+    font-size: 1rem;
+}
+
+footer .wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 2rem;
+}
+
+footer img {
+    margin:0.5rem;
+    height: 2rem;
+    border-radius: 0.5rem;
+}
+
+.footer-language-div a {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+@media only screen and (max-width: 900px) {
+
+    footer .section-container{
+        flex-direction: column;
+    }
+
+    footer .newsletter p {
+        margin: 0.5rem;
+    }
+    
+}

css/sections/intro.css

@@ -0,0 +1,26 @@
+#intro {
+    margin-top: var(--nav-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+}
+
+#intro h2 {
+    max-width: 80%;
+    margin-bottom: 5rem;
+}
+
+#intro p {
+    max-width: 80%;
+    margin-bottom: 1rem;
+}
+
+@media only screen and (max-width: 500px) {
+    
+    #intro p {
+        max-width: 90%;
+    }
+    
+}

css/sections/message.css

@@ -0,0 +1,27 @@
+#message {
+    margin:2rem auto;
+    max-width: 900px;
+}
+
+#message .wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    padding: 2rem;
+}
+
+#message h2 {
+    margin: 2rem;
+}
+
+#message h4 {
+    margin: 1rem;
+}
+
+#message .btn {
+    margin: 2rem;
+}
+
+

css/sections/nav.css

@@ -0,0 +1,168 @@
+nav {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  background-color: var(--background-color-1);
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: var(--nav-height);
+  left: 50%;
+  transform: translatex(-50%);
+  max-width: var(--max-display-size);
+  box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
+}
+
+.logo {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+nav img {
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+nav ul {
+  position: absolute;
+  left: 50%;
+  transform: translatex(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+nav ul li {
+  display: inline-block;
+}
+
+nav ul li a:hover {
+  background-color: var(--item-color-1);
+}
+
+#mobile-navbar-btn {
+  display: none;
+}
+
+#navbar-action-btn {
+  margin-right: 1rem;
+}
+
+#mobile-nav-action-btn a,
+#navbar-action-btn a {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+#mobile-nav-action-btn img,
+#navbar-action-btn img {
+  height: 3.5rem;
+  width: 3.5rem;
+}
+
+#mobile-nav-action-btn {
+  display: none;
+}
+
+#navbar-menu-btn {
+  display: none;
+}
+
+#menu-btn-close,
+#menu-btn-open {
+  display: none;
+  cursor: pointer;
+}
+
+#menu-btn-close img,
+#menu-btn-open img {
+  width: 2.8rem;
+  height: 2.8rem;
+}
+
+#qonsole-btn {
+  display: none;
+}
+
+
+@media only screen and (max-width: 1200px) {
+  .logo {
+    position: absolute;
+    left: 50%;
+    transform: translatex(-50%);
+  }
+
+  #nav-list {
+    width: 100%;
+    height: calc(100vh - var(--nav-height));
+    flex-direction: column;
+    justify-content: space-evenly;
+    transition: all 0.5s;
+    left: -100%;
+    top: var(--nav-height);
+    background: rgb(17, 26, 39, 0.8);
+    transform: none;
+  }
+
+  #nav-list li {
+    margin: 0.5rem 0;
+  }
+
+  #nav-list li a {
+    font-size: 2rem;
+  }
+
+  #mobile-nav-action-btn {
+    display: unset;
+  }
+
+  #navbar-action-btn {
+    display: none;
+  }
+
+  #menu-btn-open {
+    display: block;
+  }
+
+  #menu-btn-close {
+    display: none;
+  }
+
+  #navbar-menu-btn:checked~#nav-list {
+    left: 0;
+  }
+
+  #navbar-menu-btn:checked~#menu-btn-close {
+    display: block;
+  }
+
+  #navbar-menu-btn:checked~#menu-btn-open {
+    display: none;
+  }
+
+  .mobile-nav-action-btn {
+    display: inline-block;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .logo img {
+    height: 3rem;
+    width: 3rem;
+    margin-right: 0.5rem;
+  }
+
+  .logo h2 {
+    font-size: 2rem;
+  }
+}
+
+@media only screen and (max-width: 375px) {
+  
+}

css/sections/products.css

@@ -0,0 +1,164 @@
+.products {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    background: var(--background-color-2);
+}
+
+.products.alt {
+    background-color: var(--background-color-1);
+}
+
+.products .explanation {
+    margin-bottom: 5rem;
+    max-width: 80%;
+}
+
+.products h2 {
+    margin-bottom: 5rem;
+}
+
+.products .wrapper {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    flex-flow: row wrap;
+}
+
+.product {
+    text-align: center;
+    flex-direction: column;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 30rem;
+    padding: 2rem;
+    margin: 2rem;
+    border-radius: 1rem;
+    box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
+    background-color: var(--background-color-1);
+}
+
+.product.alt {
+    background-color: var(--item-color-2);
+}
+
+.product .img-container {
+    height: 8rem;
+    width: 8rem;
+    margin: 2rem;
+}
+
+.product img {
+    height: 8rem;
+    width: 8rem;
+}
+
+.product h4 {
+    display: inline-block;
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+    background-color: var(--text-color-1);
+    color: var(--item-color-1);
+    box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
+}
+
+.product .description {
+    margin: 1rem;
+}
+
+hr {
+    border: 0.2rem dotted var(--item-color-1);
+    border-radius: 0.5rem;
+    width: 100%;
+}
+
+.product h5 {
+    margin-bottom: 1rem;
+}
+
+.product .includes {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    padding: 1rem;
+}
+
+.product .includes .includes-items {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+
+
+.product .includes p {
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+    margin: 0.5rem;
+    display: inline-block;
+    border-radius: 0.3rem;
+    box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
+    background: var(--background-color-2);
+}
+
+.product .includes p.alt {
+    background-color: var(--background-color-2);
+}
+
+.product .qontribution {
+    padding: 1rem;
+}
+
+.product .btn {
+    margin: 2rem 1rem 1rem 1rem;
+}
+
+span.green {
+    color: var(--background-color-success-1);
+}
+
+.products.alt {
+    background-color: var(--background-color-1);
+}
+
+.products.alt .product {
+    background-color: var(--background-color-2);
+}
+
+.products.alt .includes-items p{
+    background-color: var(--background-color-1);
+}
+
+.product .includes-items p.green {
+    background-color: var(--background-color-success-1);
+}
+
+.product .includes-items p.yellow {
+    background-color: var(--background-color-warning-1);
+}
+
+.product .includes-items p.red {
+    background-color: var(--background-color-danger-1);
+}
+
+.product .includes-items p.blue {
+    background-color: var(--item-color-1);
+}
+
+
+@media only screen and (max-width: 500px) {
+
+    .product {
+        margin: 1.5rem 0.5rem;
+        padding: 2rem 1rem;
+    }
+    
+    .products .explanation {
+        max-width: 90%;
+    }
+    
+}

css/sections/projects.css

@@ -0,0 +1,72 @@
+
+.projects {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.projects h2 {
+    margin-bottom: 5rem;
+}
+
+.projects .overview {
+    padding: 0 2rem;
+}
+
+.projects .wrapper {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    flex-flow: row wrap;
+    margin: 2.5rem 0;
+}
+
+.projects .project {
+    display: flex;
+    text-align: center;
+    flex-direction: column;
+    align-items: center;
+    max-width: 25rem;
+    padding: 2rem;
+    margin: 1.5rem;
+    border-radius: 1rem;
+    box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
+    background-color: var(--background-color-2);
+}
+
+.projects .project img {
+    width: 8rem;
+    height: 8rem;
+}
+
+.projects .project h4 {
+    margin: 1.3rem;
+}
+
+.projects .project .description {
+    margin: 1rem 0;
+}
+
+.project p.status {
+    margin: 1rem;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
+}
+
+.project p.status.hold {
+    background-color: var(--background-color-danger-2);
+}
+
+.project p.status.dev {
+    background-color: var(--background-color-warning-2);
+}
+
+.project p.status.test {
+    background-color: var(--background-color-warning-1);
+}
+
+.project p.status.prod {
+    background-color: var(--background-color-success-1);
+}

css/sections/services.css

@@ -0,0 +1,66 @@
+.services {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--background-color-2);
+}
+
+.services h2 {
+  margin-bottom: 5rem;
+}
+
+.services .service {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  max-width: 70%;
+  padding: 2rem;
+  margin: 2rem 0;
+  border-radius: 1rem;
+  background: var(--background-color-1);
+  box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
+}
+
+.services .service img {
+  width: 5rem;
+  height: 5rem;
+  margin: 1rem;
+}
+
+.services .service .service-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.services .service .service-content p {
+  margin: 2rem;
+}
+
+.services .service h3 {
+  margin-bottom: 1rem;
+}
+
+@media only screen and (max-width: 1200px) {
+  .services .service {
+    flex-direction: column;
+    text-align: center;
+    padding: 2rem 0.5rem;
+    max-width: 80%;
+  }
+
+  .services .service .service-content {
+    padding: 0.5rem;
+  }
+
+}
+
+@media only screen and (max-width: 500px) {
+  .services .service {
+    max-width: 90%;
+  }
+
+}

css/sections/welcome.css

@@ -0,0 +1,54 @@
+#welcome {
+  margin-top: var(--nav-height);
+  padding: 0;
+  background: url("/media/images/welcome-background-1080p.jpg") center;
+  background-size: cover;
+  height: calc(100vh - var(--nav-height));
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+#welcome-logo {
+  height: 15rem;
+  width: 15rem;
+}
+
+#welcome h1 {
+  margin-right: 20%;
+  padding: 2rem;
+}
+
+#welcome h4 {
+  margin: 0 0 0 20%;
+}
+
+#scroll-down {
+  position: absolute;
+  bottom: 2rem;
+  width: 3rem;
+  height: 2rem;
+}
+
+#scroll-down img {
+  width: 3rem;
+}
+
+@media only screen and (max-width: 1280px) {
+  #welcome .container {
+      background: url("/media/images/welcome-background-720p.jpg") center;
+  }
+  #welcome h4 {
+      margin: 2rem;
+  }
+  #welcome h1 {
+      margin: 0;
+  }
+}
+@media only screen and (max-width: 500px) {
+  #welcome .container {
+      background: url("/media/images/welcome-background-mobile.jpg") center;
+  }
+}

css/utils/base.css

@@ -0,0 +1,123 @@
+/* FONTS IMPORT */
+
+@font-face {
+    font-family: Ubuntu;
+    src: url("/media/fonts/Ubuntu-Bold.ttf");
+    font-display: swap;
+}
+
+/* RESET */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    border: none;
+    text-decoration: none;
+    font-family: Ubuntu, sans-serif;
+    scroll-behavior: smooth;
+}
+
+:root {
+
+    /* Display Sizes */
+    --mobile-size: 500px;
+    --tablet-size: 900px;
+    --desktop-size: 1920px;
+    --max-display-size: 1920px;
+
+    /* Background Colors */
+    --background-color-1: #171a21;
+    --background-color-2: #1e222b;
+    --background-color-3: #333947;
+    --background-color-success-1: #1dad24;
+    --background-color-success-2: #16851c;
+    --background-color-warning-1: #a4a700;
+    --background-color-warning-2: #898b00;
+    --background-color-danger-1: #c90c0c;
+    --background-color-danger-2: #960b0b;
+
+
+    /* Item Colors */
+    --item-color-1: #5791FF;
+    --item-color-2: #3c64ad;
+    --item-color-3: #333947;
+
+    /* Text Colors */
+    --text-color-1: #eee;
+    --text-color-2: var(--item-color-1);
+
+    /* btn Color */
+    --btn-color-1: #5791FF;
+    --btn-color-1-hover: #3c64ad;
+    --btn-color-2: unset;
+    --btn-color-2-hover: #5791FF;
+    --btn-disabled: #3d414b;
+
+
+    /* Boxes */
+    --box-shadow: #0c0e11;
+    --border-radius: 0.5rem;
+
+    /* Custom */
+    --nav-height: 5rem;
+}
+
+html {
+    color: var(--text-color-1);
+    background-color: var(--background-color-1);
+    scroll-padding-top: var(--nav-height);
+}
+
+body {
+    max-width: var(--max-display-size);
+    margin: 0 auto;
+    text-align: center;
+}
+
+a {
+    color: var(--text-color-1);
+    text-decoration: none;
+}
+
+h1 {
+    font-size: 3rem;
+}
+
+h2 {
+    font-size: 2.5rem;
+}
+
+h3 {
+    font-size: 2rem;
+}
+
+h4 {
+    font-size: 1.5rem;
+}
+
+h5 {
+    font-size: 1.3rem;
+}
+
+p {
+    line-height: 1.7rem;
+}
+
+/* SECTIONS */
+
+section {
+    padding: 5rem 0 5rem 0;
+}
+
+
+/* CUSTOM */
+
+span {
+    color: var(--text-color-2);
+}
+
+.link {
+    text-decoration: underline;
+    color: var(--text-color-2);
+}

css/utils/buttons.css

@@ -0,0 +1,64 @@
+.btn {
+    color: var(--text-color-1);
+    cursor: pointer;
+    font-size: 1.3rem;
+    padding: 0.6rem 0.7rem;
+    border-radius: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    transition: all 0.2s linear 0s;
+    box-shadow: 0.1rem 0.1rem 0.3rem 0.1rem var(--box-shadow);
+    margin: 0.5rem;
+}
+
+.btn-1 {
+    color: var(--text-color-1);
+    background-color: var(--btn-color-1);
+}
+
+.btn-1:hover {
+    background-color: var(--btn-color-1-hover);
+}
+
+.btn-2 {
+    color: var(--text-color-1);
+    background-color: var(--btn-color-2);
+    box-shadow: none;
+}
+
+.btn-2:hover {
+    background-color: var(--item-color-1);
+    box-shadow: 0.1rem 0.1rem 0.3rem 0.1rem var(--box-shadow);
+}
+
+.btn-success {
+    background-color: #1dad24;
+}
+
+.btn-success:hover {
+    background-color: #16851c;
+}
+
+.btn-warning {
+    background-color: #a4a700;
+}
+
+.btn-warning:hover {
+    background-color: #898b00;
+}
+
+.btn-danger {
+    background-color: #c90c0c;
+}
+
+.btn-danger:hover {
+    background-color: #960b0b;
+}
+
+.btn:disabled {
+    background-color: var(--background-color-3);
+    box-shadow: none;
+}
+

css/utils/forms.css

@@ -0,0 +1,19 @@
+input[type=text],input[type=email],textarea {
+    padding: 0.5rem;
+    margin: 1rem;
+    border-radius: 0.5rem;
+    border: none;
+    background-color: var(--background-color-1);
+    color: var(--text-color-1);
+    font-size: 1.2rem;
+    outline-color: var(--item-color-1);
+    box-shadow: 0.05rem 0.05rem 0.1rem 0.05rem var(--box-shadow);
+}
+
+input:focus {
+    outline-color: var(--item-color-1);
+}
+
+.catch {
+    display: none;
+}

err.php

@@ -0,0 +1,7 @@
+<?php
+    $language = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
+    echo($language);
+    $accept = ['fr', 'en'];
+    $language = in_array($language, $accept) ? $language : 'fr';
+    header("location:/pages/{$language}/err/general.html");
+?>

index.php

@@ -0,0 +1,7 @@
+<?php
+    $language = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
+    echo($language);
+    $accept = ['fr', 'en'];
+    $language = in_array($language, $accept) ? $language : 'fr';
+    header("location:/pages/{$language}/index.html");
+?>

pages/en/confirmation.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en-CA">
+<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='robots' content='noindex,follow' />
+    <title>Success! | Confirmation Page</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/css/pages/confirmation.css"/>
+</head>
+<header>
+    <nav>
+        <input type="checkbox" id="navbar-menu-btn" />
+        <label for="navbar-menu-btn" id="menu-btn-open">
+          <img src="/media/images/menu.png" alt="Menu Icon">
+        </label>
+        <label for="navbar-menu-btn" id="menu-btn-close">
+          <img src="/media/images/close.png" alt="Menu Icon">
+        </label>
+        <a href="/pages/en/index.html" class="logo">
+          <img src="/media/images/logo.svg" alt="TeleQom Logo">
+          <h2>
+            Tele<span>Q</span>om
+          </h2>
+        </a>
+        <ul id="nav-list">
+          <li><a class="btn btn-2" href="/pages/en/index.html">Home</a></li>
+        </ul>
+      </nav>
+</header>
+<body>
+    <!-- Bypass FOUC on firefox -->
+    <script>0</script>
+    <section id="message">
+        <div class="wrapper">
+            <h2>It's done!</h2>
+            <h4>Your request was transmitted successfully</h4>
+            <h4>You may close this page or go back to the home page</h4>
+            <a href="/pages/en/index.html" class="btn btn-1">Back to Home Page</a>
+        </div>
+    </section>
+</body>
+</html>

pages/en/err/403.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en-CA">
+
+<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='robots' content='noindex,follow' />
+    <title>Oups (403) | Forbidden Error Page</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/css/pages/errors.css" />
+</head>
+<header>
+    <nav>
+        <input type="checkbox" id="navbar-menu-btn" />
+        <label for="navbar-menu-btn" id="menu-btn-open">
+            <img src="/media/images/menu.png" alt="Menu Icon">
+        </label>
+        <label for="navbar-menu-btn" id="menu-btn-close">
+            <img src="/media/images/close.png" alt="Menu Icon">
+        </label>
+        <a href="/pages/en/index.html" class="logo">
+            <img src="/media/images/logo.svg" alt="TeleQom Logo">
+            <h2>
+                Tele<span>Q</span>om
+            </h2>
+        </a>
+        <ul id="nav-list">
+            <li><a class="btn btn-2" href="/pages/en/index.html">Home</a></li>
+        </ul>
+    </nav>
+</header>
+
+<body>
+    <!-- Bypass FOUC on firefox -->
+    <script>0</script>
+    <section id="message">
+        <div class="wrapper">
+            <h2>Oups (403)</h2>
+            <h4>
+                A
+                <a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes" target="_blank"
+                    rel="noreferrer noopener" class="link">403</a>
+                error means that this section is not available to the web server
+            </h4>
+            <h4>You may close this page or go back to the home page</h4>
+            <a href="/pages/en/index.html" class="btn btn-1">Back to Home Page</a>
+        </div>
+    </section>
+</body>
+
+</html>

pages/en/err/404.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en-CA">
+
+<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='robots' content='noindex,follow' />
+    <title>Oups (404) | Page Not Found Error</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/css/pages/errors.css" />
+</head>
+<header>
+    <nav>
+        <input type="checkbox" id="navbar-menu-btn" />
+        <label for="navbar-menu-btn" id="menu-btn-open">
+            <img src="/media/images/menu.png" alt="Menu Icon">
+        </label>
+        <label for="navbar-menu-btn" id="menu-btn-close">
+            <img src="/media/images/close.png" alt="Menu Icon">
+        </label>
+        <a href="/pages/en/index.html" class="logo">
+            <img src="/media/images/logo.svg" alt="TeleQom Logo">
+            <h2>
+                Tele<span>Q</span>om
+            </h2>
+        </a>
+        <ul id="nav-list">
+            <li><a class="btn btn-2" href="/pages/en/index.html">Home</a></li>
+        </ul>
+    </nav>
+</header>
+
+<body>
+    <!-- Bypass FOUC on firefox -->
+    <script>0</script>
+    <section id="message">
+        <div class="wrapper">
+            <h2>Oups (404)</h2>
+            <h4>
+                A
+                <a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes" target="_blank"
+                    rel="noreferrer noopener" class="link">404</a>
+                error means that our server could not find the page you were looking for
+            </h4>
+            <h4>You may close this page or go back to the home page</h4>
+            <a href="/pages/en/index.html" class="btn btn-1">Back to Home Page</a>
+        </div>
+    </section>
+</body>
+
+</html>

pages/en/err/500.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en-CA">
+
+<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='robots' content='noindex,follow' />
+    <title>Oups (500) | Internal Server Error</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/css/pages/errors.css" />
+</head>
+<header>
+    <nav>
+        <input type="checkbox" id="navbar-menu-btn" />
+        <label for="navbar-menu-btn" id="menu-btn-open">
+            <img src="/media/images/menu.png" alt="Menu Icon">
+        </label>
+        <label for="navbar-menu-btn" id="menu-btn-close">
+            <img src="/media/images/close.png" alt="Menu Icon">
+        </label>
+        <a href="/pages/en/index.html" class="logo">
+            <img src="/media/images/logo.svg" alt="TeleQom Logo">
+            <h2>
+                Tele<span>Q</span>om
+            </h2>
+        </a>
+        <ul id="nav-list">
+            <li><a class="btn btn-2" href="/pages/en/index.html">Home</a></li>
+        </ul>
+    </nav>
+</header>
+
+<body>
+    <!-- Bypass FOUC on firefox -->
+    <script>0</script>
+    <section id="message">
+        <div class="wrapper">
+            <h2>Oups (500)</h2>
+            <h4>
+                A
+                <a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes" target="_blank"
+                    rel="noreferrer noopener" class="link">500</a>
+                error means that our server encountered an internal error. We apologize for the inconvenience. This
+                server may be undergoing maintenance. If the problem persists<br />
+                <a href="/pages/en/index.html#contact" class="link">Contact Us</a>
+            </h4>
+            <h4>You may close this page or go back to the home page</h4>
+            <a href="/pages/en/index.html" class="btn btn-1">Back to Home Page</a>
+        </div>
+    </section>
+</body>
+
+</html>

pages/en/err/contact.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en-CA">
+
+<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='robots' content='noindex,follow' />
+    <title>Oups | Contact Form Error</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/css/pages/errors.css" />
+</head>
+<header>
+    <nav>
+        <input type="checkbox" id="navbar-menu-btn" />
+        <label for="navbar-menu-btn" id="menu-btn-open">
+            <img src="/media/images/menu.png" alt="Menu Icon">
+        </label>
+        <label for="navbar-menu-btn" id="menu-btn-close">
+            <img src="/media/images/close.png" alt="Menu Icon">
+        </label>
+        <a href="/pages/en/index.html" class="logo">
+            <img src="/media/images/logo.svg" alt="TeleQom Logo">
+            <h2>
+                Tele<span>Q</span>om
+            </h2>
+        </a>
+        <ul id="nav-list">
+            <li><a class="btn btn-2" href="/pages/en/index.html">Home</a></li>
+        </ul>
+    </nav>
+</header>
+
+<body>
+    <!-- Bypass FOUC on firefox -->
+    <script>0</script>
+    <section id="message">
+        <div class="wrapper">
+            <h2>Oups</h2>
+            <h4>An error occured while sending your message, please try again later. We apologize for the inconvenience.</h4>
+            <h4>If the problem persists, call us at <br/> 1 (833) PRJ-TL<span>Q</span>M</h4>
+            <h4>You may close this page or go back to the home page</h4>
+            <a href="/pages/en/index.html" class="btn btn-1">Back to Home Page</a>
+        </div>
+    </section>
+</body>
+
+</html>

pages/en/err/general.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en-CA">
+
+<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='robots' content='noindex,follow' />
+    <title>Oups | Unexpected Error Occured</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/css/pages/errors.css" />
+</head>
+<header>
+    <nav>
+        <input type="checkbox" id="navbar-menu-btn" />
+        <label for="navbar-menu-btn" id="menu-btn-open">
+            <img src="/media/images/menu.png" alt="Menu Icon">
+        </label>
+        <label for="navbar-menu-btn" id="menu-btn-close">
+            <img src="/media/images/close.png" alt="Menu Icon">
+        </label>
+        <a href="/pages/en/index.html" class="logo">
+            <img src="/media/images/logo.svg" alt="TeleQom Logo">
+            <h2>
+                Tele<span>Q</span>om
+            </h2>
+        </a>
+        <ul id="nav-list">
+            <li><a class="btn btn-2" href="/pages/en/index.html">Home</a></li>
+        </ul>
+    </nav>
+</header>
+
+<body>
+    <!-- Bypass FOUC on firefox -->
+    <script>0</script>
+    <section id="message">
+        <div class="wrapper">
+            <h2>Oups</h2>
+            <h4>
+                An unexpected error occurred... Please try again later. We apologize for the inconvenience. This server
+                may be undergoing maintenance. If the problem persists<br />
+                <a href="/pages/en/index.html#contact" class="link">Contact Us</a>
+            </h4>
+            <h4>You may close this page or go back to the home page</h4>
+            <a href="/pages/en/index.html" class="btn btn-1">Back to Home Page</a>
+        </div>
+    </section>
+</body>
+
+</html>

pages/en/index.html

@@ -0,0 +1,292 @@
+<!DOCTYPE html>
+<html lang="en-CA">
+
+<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" />
+  <title>The TeleQom Project | Home</title>
+  <meta name="description"
+    content="The TeleQom Project is a Québec non-profit that offers paid services to fund its multiple Free/Libre Software projects" />
+  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <link rel="stylesheet" href="/css/pages/index.css" />
+</head>
+
+<body>
+  <!-- FOUC -->
+  <script>0</script>
+  <header>
+    <nav>
+      <input type="checkbox" id="navbar-menu-btn" />
+      <label for="navbar-menu-btn" id="menu-btn-open">
+        <img src=