From 0208b10c0b1a58c2b7aeb1ffec1b823658fab125 Mon Sep 17 00:00:00 2001
From: "vincent.md" <vincent.md@teleqom.org>
Date: Sun, 23 Apr 2023 15:29:19 -0400
Subject: [PATCH] touch ups

---
 css/sections/about.css               |  3 +-
 css/utils/base.css                   | 54 +++++++++++++++++++-----
 pages/en/index.html                  | 63 +++++++++++++++-------------
 pages/en/services/development.html   | 54 ++++++++++++------------
 pages/fr/index.html                  | 54 ++++++++++++------------
 pages/fr/services/developpement.html | 52 +++++++++++------------
 6 files changed, 159 insertions(+), 121 deletions(-)

diff --git a/css/sections/about.css b/css/sections/about.css
index 54a04cf..550cf2d 100644
--- a/css/sections/about.css
+++ b/css/sections/about.css
@@ -20,6 +20,5 @@
 }
 
 .about h3 {
-  margin-bottom: 2rem;
-  text-decoration: 0.2rem solid var(--item-color-1) underline;  
+  margin-bottom: 1.5rem;
 }
\ No newline at end of file
diff --git a/css/utils/base.css b/css/utils/base.css
index b9a8b85..293ebad 100644
--- a/css/utils/base.css
+++ b/css/utils/base.css
@@ -1,7 +1,7 @@
 /* FONTS IMPORT */
 
 @font-face {
-    font-family: Ubuntu;
+    font-family: Pitagon;
     /* src: url("/media/fonts/Ubuntu-Bold.ttf"); */
     src: url("/media/fonts/PitagonSansText-SemiBold.ttf");
     /* src: url("/media/fonts/Arista2.0-light.ttf"); */
@@ -16,7 +16,7 @@
     box-sizing: border-box;
     border: none;
     text-decoration: none;
-    font-family: Ubuntu, sans-serif;
+    font-family: Pitagon, sans-serif;
     scroll-behavior: smooth;
 }
 
@@ -41,7 +41,7 @@
 
 
     /* Item Colors */
-    --item-color-1: #5791FF;
+    --item-color-1: #689af8;
     --item-color-2: #3c64ad;
     --item-color-3: #333947;
 
@@ -103,8 +103,8 @@ h5 {
 }
 
 p {
-    line-height: 1.7rem;
-    font-size: 1.2rem;
+    line-height: 1.5rem;
+    font-size: 1.1rem;
 }
 
 /* SECTIONS */
@@ -115,14 +115,48 @@ section {
 
 /* CUSTOM */
 
-span {
-    color: var(--text-color-2);
+span.in-blk {
+    display: inline-block;
+}
+
+span.color-1 {
+    color: var(--item-color-1);
 }
 
 h1 .q {
-    height: 3rem;
-    width: 3rem;
-    margin: 0 0.1rem;
+    height: 3rem !important;
+    width: 3rem !important;
+    margin: 0 0.1rem -0.1rem 0.1rem !important;
+}
+
+h2 .q {
+    height: 2.5rem !important;
+    width: 2.5rem !important;
+    margin: 0 0.1rem -0.1rem 0.1rem !important;
+}
+
+h3 .q {
+    height: 2rem !important;
+    width: 2rem !important;
+    margin: 0 0.1rem -0.1rem 0.1rem !important;
+}
+
+h4 .q {
+    height: 1.5rem !important;
+    width: 1.5rem !important;
+    margin: 0 0.1rem -0.1rem 0.1rem !important;
+}
+
+h5 .q {
+    height: 1.3rem !important;
+    width: 1.3rem !important;
+    margin: 0 0.1rem -0.1rem 0.1rem !important;
+}
+
+p .q {
+    height: 1.2rem !important;
+    width: 1.2rem !important;
+    margin: 0 0.1rem -0.075rem 0.1rem !important;
 }
 
 .link {
diff --git a/pages/en/index.html b/pages/en/index.html
index 37048e5..d05c4c5 100644
--- a/pages/en/index.html
+++ b/pages/en/index.html
@@ -41,11 +41,10 @@
   </header>
   <section id="welcome">
     <h1>
-      <!-- The Tele<span>Q</span>om Project -->
-      Tele<img class="q" src="/media/images/Q.png" alt="Q">om Project
+      <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span> Project
     </h1>
     <h4>
-      Telecommunications with <span>Québec</span>'s values
+      Telecommunications with <span class="color-1">Québec</span>'s values
     </h4>
     <a href="#about" id="scroll-down">
       <img src="/media/images/down.png" alt="Icone defilement">
@@ -55,16 +54,16 @@
     <h2>About Us</h2>
     <div>
       <h3>
-        What is Tele<span>Q</span>om?
+        What is <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om?</span>
       </h3>
       <p>
-        The Tele<span>Q</span>om Project, a Québec non-profit, is an ideal. We are attempting to restore ethics and
+        The <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span> Project, a Québec non-profit, is an ideal. We are attempting to restore ethics and
         morals within the applications all of us use on a daily basis. From your favorite social platform, online
         shopping, email or even messaging, almost all of them contain spying software. Robots read your emails and
         your messages, some even listen to you talk. In our opinion, this is unacceptable and should be illegal but
         you accepted these terms before using those applications and devices and that is why the law is powerless at
         the moment. Since we don't have viable alternatives, we follow these technology giants with bad intentions. It
-        is in response to this severe lack of humanity that Tele<span>Q</span>om was born.
+        is in response to this severe lack of humanity that <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span> was born.
       </p>
     </div>
     <div>
@@ -72,7 +71,7 @@
         Libre Software
       </h3>
       <p>
-        Tele<span>Q</span>om embraces a philosophy that has been around for quite some
+        <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span> embraces a philosophy that has been around for quite some
         time, we use only Libre/Free Software. To make it simple, a program is much like a food recipe. Libre
         Software grants the public access to it's source code (the recipe, that we call our <a
           href="https://qode.teleqom.org" target="_blank" rel="noreferrer noopener" class="link">Qode</a>) to audit
@@ -94,7 +93,7 @@
         elections, and this is only the beginning. <a href="https://en.wikipedia.org/wiki/Pegasus_(spyware)"
           target="_blank" rel="noreferrer noopener" class="link">Pegasus</a> gives unlimited access to those willing
         to pay to the complete virtual life of anyone with the help of flaws in software. It is now urgent to get rid
-        of those chains, and that is where Tele<span>Q</span>om comes in.
+        of those chains, and that is where <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span> comes in.
       </p>
     </div>
     <div>
@@ -104,9 +103,11 @@
       <p>
         It's not pretty when you take a closer look at how these big corporations use us. But instead of admitting
         defeat, we chose to remedy this situation with whatever freedom we still have left. We will start by securing
-        our telecommunications (email, social, messaging, videoconference and telephone). Then, <span>Q</span>ommerce
+        our telecommunications (email, social, messaging, videoconference and telephone). Then, 
+        <span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ommerce</span>
         will help fund the infrastructure and development of our projects. Finally, a voting application, called
-        Politi<span>Q</span> that will give the power back to the people. Keep in mind, Tele<span>Q</span>om does not
+        <span class="in-blk">Politi<img class="q" src="/media/images/Q.png" alt="Q"></span>
+         that will give the power back to the people. Keep in mind, Tele<span>Q</span>om does not
         sell your data and is a non-profit, so donations are necessary to its survival. We do what we can to offer our
         projects for free, but it is not easy. All profits generated by the following services are invested in the
         development of our projects!
@@ -142,7 +143,7 @@
           Tele<span>Q</span>om, we like to play around with techonology a lot. Could be your wi-fi network, your browser
           is
           out-of-date, you can't update apps on your phone, anything IT really. Just reach out to us, we might be able
-          to help you! :)</p>
+          to help you!</p>
         <a class="btn btn-1" href="#contact">Contact</a>
       </div>
     </div>
@@ -168,12 +169,13 @@
 
   <section class="projects" id="projects">
       <h2>Our Projets</h2>
-      <p class="overview">The following projects are or will be available from your <span>Q</span>onsole. Come
-        back later to see if the Status of your favorite project changed!</p>
+      <p class="overview">The following projects are or will be available from your
+        <span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">onsole</span>.
+        Come back later to see if the Status of your favorite project changed!</p>
       <div class="wrapper">
         <div class="project">
           <img src="/media/images/qonsole.png" alt="Qonsole Logo">
-          <h4><span>Q</span>onsole</h4>
+          <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">onsole</span></h4>
           <p class="description">The main dashboard where you can access all of your applications. The
             <span>Q</span>onsole is in charge of displaying all your apps in the same location, in a uniform and simple
             way.
@@ -182,21 +184,22 @@
         </div>
         <div class="project">
           <img src="/media/images/disq.png" alt="DisQ Logo">
-          <h4>Dis<span>Q</span></h4>
+          <h4><span class="in-blk">Dis<img class="q" src="/media/images/Q.png" alt="Q"></span></h4>
           <p class="description">This is where you store all your data, it's your personal hard drive but
             hosted on an external server. All accessible only by you, the server can not see your data.</p>
           <p class="status dev">In Development</p>
         </div>
         <div class="project">
           <img src="/media/images/interqom.png" alt="InterQom Logo">
-          <h4>Inter<span>Q</span>om</h4>
-          <p class="description">Inter<span>Q</span>om is the sane alternative to other social networks.
+          <h4><span class="in-blk">Inter<img class="q" src="/media/images/Q.png" alt="Q">om</span></h4>
+          <p class="description"><span class="in-blk">Inter<img class="q" src="/media/images/Q.png" alt="Q">om</span>
+             is the sane alternative to other social networks.
             Your conversations are entirely private and even we don't have access to your data.</p>
           <p class="status hold">On Hold</p>
         </div>
         <div class="project">
           <img src="/media/images/qommerce.png" alt="Qommerce Logo">
-          <h4><span>Q</span>ommerce</h4>
+          <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ommerce</span></h4>
           <p class="description">The center of exchange and online commerce. Local businesses and
             individuals can share the fruit of their labour. We will accept cryptocurrencies as well as regular Canadian
             money.</p>
@@ -204,43 +207,45 @@
         </div>
         <div class="project">
           <img src="/media/images/qonvo.png" alt="Qonvo Logo">
-          <h4><span>Q</span>onvo</h4>
+          <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">onvo</span></h4>
           <p class="description">Instant messaging is the easiest way we have to communicate with one
             another. This project includes audio and video calls, all encrypted from you to your recipients.</p>
           <p class="status hold">On Hold</p>
         </div>
         <div class="project">
           <img src="/media/images/qourrier.png" alt="Qourrier Logo">
-          <h4><span>Q</span>ourrier</h4>
-          <p class="description">The portal to access your emails, from your <span>Q</span>onsole. Emails
+          <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ourier</span></h4>
+          <p class="description">The portal to access your emails, from your <span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">onsole</span>. Emails
             between users are fully encrypted and we support most providers.</p>
           <p class="status hold">On Hold</p>
         </div>
         <div class="project">
           <img src="/media/images/politiq.png" alt="PolitiQ Logo">
-          <h4>Politi<span>Q</span></h4>
-          <p class="description">Tele<span>Q</span>om is a round table where all Quebecers are invited. Your
+          <h4><span class="in-blk">Politi<img class="q" src="/media/images/Q.png" alt="Q"></span></h4>
+          <p class="description"><span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span>
+             is a round table where all Quebecers are invited. Your
             opinion will finally be heard in the government. The real democracy at your fingertips!</p>
           <p class="status hold">On Hold</p>
         </div>
         <div class="project">
           <img src="/media/images/qontact.png" alt="Qontact Logo">
-          <h4><span>Q</span>ontact</h4>
+          <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ontact</span></h4>
           <p class="description">The good old address book. Here you store your contact information, email,
             phone, <span>Q</span>onvo or Inter<span>Q</span>om identifier, and more.</p>
           <p class="status hold">On Hold</p>
         </div>
         <div class="project">
           <img src="/media/images/qalendrier.png" alt="Qalendrier Logo">
-          <h4><span>Q</span>alendrier</h4>
+          <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">alender</span></h4>
           <p class="description">We all need a calendar. Here you can manage your personal or professional
-            life, schedule an appointment with another user and even see your future events on Inter<span>Q</span>om.
+            life, schedule an appointment with another user and even see your future events on 
+            <span class="in-blk">Inter<img class="q" src="/media/images/Q.png" alt="Q">om</span>.
           </p>
           <p class="status hold">On Hold</p>
         </div>
         <div class="project">
           <img src="/media/images/qable.png" alt="Qable Logo">
-          <h4><span>Q</span>able</h4>
+          <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">able</span></h4>
           <p class="description">The audio and video content delivery platform, which uses <a
               href="https://en.wikipedia.org/wiki/BitTorrent" target="_blank" rel="noreferrer noopener"
               class="link">Torrent</a> technology to lighten the load on the servers and therefore the resulting costs.
@@ -249,9 +254,9 @@
         </div>
         <div class="project">
           <img src="/media/images/qi.png" alt="Qi Logo">
-          <h4><span>Q</span>i</h4>
+          <h4><span class="in-blk">i<img class="q" src="/media/images/Q.png" alt="Q"></span></h4>
           <p class="description">
-            Tutorials for everyone! Each page contains the other I<span>Q</span> necessary or recommended to understand the subject at hand.
+            Tutorials for everyone! Each page contains the other <span class="in-blk">i<img class="q" src="/media/images/Q.png" alt="Q"></span> necessary or recommended to understand the subject at hand.
             You will be able to widen your scope of the world, all in private naturally!
           </p>
           <p class="status hold">On Hold</p>
diff --git a/pages/en/services/development.html b/pages/en/services/development.html
index 6fe9934..72bf0ad 100644
--- a/pages/en/services/development.html
+++ b/pages/en/services/development.html
@@ -46,7 +46,7 @@
     <section id="intro">
             <h2>Development Services</h2>
             <p>
-              We offer various development services that could help you start or improve your project. At Tele<span>Q</span>om,
+              We offer various development services that could help you start or improve your project. At <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span>,
               we prefer a more humane approach. Whenever you are ready, contact us and we will offer you the best option according to your needs. 
               Oh and don't forget, all profits generated are invested in our multiple Libre Software Projects! By choosing us, you help yourself and the community :)
             </p>
@@ -66,13 +66,13 @@
             <div class="includes">
               <h5>Package</h5>
               <div class="includes-items">
-                <p>Tele<span>Q</span>om Template<br>- OR -<br>Your Bootstrap 5 Template</p>
+                <p><span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span> Template<br>- OR -<br>Your Bootstrap 5 Template</p>
                 <p>Developer: <span class="green">3 Hours</span></p>
               </div>
             </div>
             <hr>
             <div class="includes">
-              <h5><span>Q</span>ube Micro</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span> Micro</h5>
               <div class="includes-items">
               <p>1GB</p>
               <p>5 Emails</p>
@@ -81,9 +81,9 @@
             </div>
             <hr>
             <div class="qontribution">
-              <h5><span>Q</span>ontribution</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ontribution</span></h5>
               <p>Package: <span class="green">100$</span></p>
-              <p>Hosting (<span>Q</span>ube): <span class="green">60$ / Year</span></p>
+              <p>Hosting (<span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span>): <span class="green">60$ / Year</span></p>
             </div>
           </div>
           <div class="product">
@@ -95,7 +95,7 @@
             <div class="includes">
               <h5>Package</h5>
               <div class="includes-items">
-              <p>Tele<span>Q</span>om Template<br>- OR -<br>Your Bootstrap 5 Template</p>
+              <p><span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span> Template<br>- OR -<br>Your Bootstrap 5 Template</p>
               <p>Developer: <span class="green">5 Hours</span></p>
               <p>Newsletter</p>
               <p>Contact Form</p>
@@ -103,7 +103,7 @@
             </div>
             <hr>
             <div class="includes">
-              <h5><span>Q</span>ube Mini</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span> Mini</h5>
               <div class="includes-items">
               <p>5GB</p>
               <p>25 Emails</p>
@@ -114,9 +114,9 @@
             </div>
             <hr>
             <div class="qontribution">
-              <h5><span>Q</span>ontribution</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ontribution</span></h5>
               <p>Package: <span class="green">250$</span></p>
-              <p>Hosting (<span>Q</span>ube): <span class="green">150$ / Year</span></p>
+              <p>Hosting (<span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span>): <span class="green">150$ / Year</span></p>
             </div>
           </div>
           <div class="product">
@@ -132,7 +132,7 @@
             </div>
             <hr>
             <div class="qontribution">
-              <h5><span>Q</span>ontribution</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ontribution</span></h5>
               <p>Developer: <span class="green">50$ / Hour</span></p>
             </div>
           </div>
@@ -150,7 +150,7 @@
           <div class="product bg">
             <div>
                 <h4>OpenCart</h4>
-                <p class="description">Simple OpenCart shop, perfect for beginners and small businesses. Tele<span>Q</span>om's Bouti<span>Q</span> is an OpenCart instance</p>
+                <p class="description">Simple OpenCart shop, perfect for beginners and small businesses. <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span>'s <span class="in-blk">Bouti<img class="q" src="/media/images/Q.png" alt="Q"></span> is an OpenCart instance</p>
             </div>
             <hr>
             <div class="includes">
@@ -160,7 +160,7 @@
             </div>
             <hr>
             <div class="includes">
-              <h5><span>Q</span>ube Mini</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span> Mini</h5>
               <div class="includes-items">
                 <p>5GB</p>
                 <p>25 Emails</p>
@@ -171,9 +171,9 @@
             </div>
             <hr>
             <div class="qontribution">
-              <h5><span>Q</span>ontribution</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ontribution</span></h5>
               <p>Package: <span class="green">150$</span></p>
-              <p>Hosting (<span>Q</span>ube): <span class="green">150$ / Year</span></p>
+              <p>Hosting (<span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span>): <span class="green">150$ / Year</span></p>
             </div>
           </div>
           <div class="product bg-2">
@@ -189,7 +189,7 @@
             </div>
             <hr>
             <div class="includes">
-              <h5><span>Q</span>ube Mini</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span> Mini</h5>
               <div class="includes-items">
                 <p>5GB</p>
                 <p>25 Emails</p>
@@ -200,9 +200,9 @@
             </div>
             <hr>
             <div class="qontribution">
-              <h5><span>Q</span>ontribution</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ontribution</span></h5>
               <p>Package: <span class="green">200$</span></p>
-              <p>Hosting (<span>Q</span>ube): <span class="green">150$ / Year</span></p>
+              <p>Hosting (<span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span>): <span class="green">150$ / Year</span></p>
             </div>
           </div>
         </div>
@@ -225,7 +225,7 @@
             </div>
             <hr>
             <div class="includes">
-              <h5><span>Q</span>ube Mini</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span> Mini</h5>
               <div class="includes-items">
                 <p>5GB</p>
                 <p>25 Emails</p>
@@ -236,9 +236,9 @@
             </div>
             <hr>
             <div class="qontribution">
-              <h5><span>Q</span>ontribution</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ontribution</span></h5>
               <p>Package: <span class="green">50$</span></p>
-              <p>Hosting (<span>Q</span>ube): <span class="green">150$ / Year</span></p>
+              <p>Hosting (<span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span>): <span class="green">150$ / Year</span></p>
             </div>
           </div>
           <div class="product">
@@ -248,7 +248,7 @@
             </div>
             <hr>
             <div class="includes">
-              <h5><span>Q</span>ube Mini</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span> Mini</h5>
               <div class="includes-items">
                 <p>5GB</p>
                 <p>25 Emails</p>
@@ -259,9 +259,9 @@
             </div>
             <hr>
             <div class="qontribution">
-              <h5><span>Q</span>ontribution</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ontribution</span></h5>
               <p>Package: <span class="green">50$</span></p>
-              <p>Hosting (<span>Q</span>ube): <span class="green">150$ / Year</span></p>
+              <p>Hosting (<span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span>): <span class="green">150$ / Year</span></p>
             </div>
           </div>
           <div class="product">
@@ -271,7 +271,7 @@
             </div>
             <hr>
             <div class="includes">
-              <h5><span>Q</span>ube Mini</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span> Mini</h5>
               <div class="includes-items">
                 <p>5GB</p>
                 <p>25 Emails</p>
@@ -282,9 +282,9 @@
             </div>
             <hr>
             <div class="qontribution">
-              <h5><span>Q</span>ontribution</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ontribution</span></h5>
               <p>Package: <span class="green">50$</span></p>
-              <p>Hosting (<span>Q</span>ube): <span class="green">150$ / Year</span></p>
+              <p>Hosting (<span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span>): <span class="green">150$ / Year</span></p>
             </div>
           </div>
         </div>
@@ -330,7 +330,7 @@
     <section id="call-to-action">
       <h2>Ready?</h2>
       <p class="description">
-        Find some information confusing or ready to take the next steps? Time to contact us! Don't worry, we can help you make the ethical decision :)
+        Find some information confusing or ready to take the next steps? Time to contact us! Don't worry, we can help you make the ethical decision!
       </p>
       <a class="btn btn-1" href="/pages/en/index.html#contact">Contact</a>
     </section>
diff --git a/pages/fr/index.html b/pages/fr/index.html
index 22ba5bd..01e6ef5 100644
--- a/pages/fr/index.html
+++ b/pages/fr/index.html
@@ -41,10 +41,10 @@
   </header>
   <section id="welcome">
     <h1 class="welcome-title">
-      Projet Tele<img class="q" src="/media/images/Q.png" alt="Q">om
+      Projet <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span>
     </h1>
     <h4 class="welcome-text">
-      La Télécommunication aux Valeurs <span>Québécoises</span>
+      La Télécommunication aux valeurs <span class="color-1">Québécoises</span>
     </h4>
     <a href="#apropos" id="scroll-down">
       <img src="/media/images/down.png" alt="Icone defilement">
@@ -54,17 +54,17 @@
     <h2>À Propos</h2>
     <div>
       <h3>
-        Tele<span>Q</span>om, c'est quoi?
+        <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span>, c'est quoi?
       </h3>
       <p>
-        Projet Tele<span>Q</span>om, organisme à but non-lucratif Québécois, est un idéal. Nous cherchons à
+        Projet <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span>, organisme à but non-lucratif Québécois, est un idéal. Nous cherchons à
         restaurer les valeurs éthiques et morales dans les applications que nous utilisons tous quotidiennement. Que
         ce soit votre plateforme sociale, de commerce en ligne, de courriel ou même de messagerie, tous ou presque
         contiennent aujourd'hui des logiciels espions. Des robots lisent vos courriels et vos messages, et ils vous
         écoutent même parler. C'est à notre avis inacceptable voir illégal mais vous avez accepté ces termes à la mise
         en marche de vos appareils et services, c'est pourquoi la loi est impuissante actuellement. Faute
         d'alternative, nous suivons tous ces géants des technologies aux mauvaises intentions. C'est en réponse à ces
-        graves manquements d'humanité que Tele<span>Q</span>om est né.
+        graves manquements d'humanité que <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span> est né.
       </p>
     </div>
     <div>
@@ -72,10 +72,10 @@
         Logiciels Libres
       </h3>
       <p>
-        Chez Tele<span>Q</span>om, nos projets embrassent une philosophie qui existe déjà
+        Chez <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span>, nos projets embrassent une philosophie qui existe déjà
         depuis longtemps, ils sont constitués uniquement de Logiciels Libres. De façon simple, un programme est un peu
         comme une recette de cuisine. Un Logiciel Libre donne un accès complet au code source (la recette, que nous
-        appelons chez Tele<span>Q</span>om notre <a href="https://qode.teleqom.org" target="_blank"
+        appelons notre <a href="https://qode.teleqom.org" target="_blank"
           rel="noreferrer noopener" class="link">Qode</a>) et la permission de l'auditer pour découvrir des failles de
         sécurité, le modifier ou l'améliorer avec la seule condition de rendre également publique ce qui a été
         amélioré. Les logiciels de type propriétaire par contre, c'est tout à fait le contraire. Ils dissimulent le
@@ -97,7 +97,7 @@
         États-Unis, et ce n'est que le début. <a href="https://fr.wikipedia.org/wiki/Pegasus_(logiciel_espion)"
           target="_blank" rel="noreferrer noopener" class="link">Pegasus</a> donne accès aux plus fortunés à la vie
         virtuelle complète de n'importe qui, à l'aide de failles de sécurité dans les logiciels. Il est donc impératif
-        de se débarasser de ses chaînes, et c'est ici que Tele<span>Q</span>om entre en ligne de compte.
+        de se débarasser de ses chaînes, et c'est ici que <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span> entre en ligne de compte.
       </p>
     </div>
     <div>
@@ -181,15 +181,15 @@
   <section class="projects" id="projets">
       <h2>Nos Projets</h2>
       <p class="overview">Les projets suivants sont ou seront disponibles à partir de votre
-        <span>Q</span>onsole. Repassez voir plus tard si le Statut de votre projet préféré a
+        <span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">onsole</span>. Repassez voir plus tard si le Statut de votre projet préféré a
         changé!
       </p>
       <div class="wrapper">
         <div class="project">
           <img src="/media/images/qonsole.png" alt="Qonsole Logo">
-          <h4><span>Q</span>onsole</h4>
+          <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">onsole</span></h4>
           <p class="description">
-            Le tableau de bord principal d'où vous accédez à toutes vos applications. La <span>Q</span>onsole est en
+            Le tableau de bord principal d'où vous accédez à toutes vos applications. La <span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">onsole</span> est en
             charge de vous afficher le tout en un même endroit, de façon uniforme et simple.
           </p>
           <p>
@@ -198,7 +198,7 @@
         </div>
         <div class="project">
           <img src="/media/images/disq.png" alt="DisQ Logo">
-          <h4>Dis<span>Q</span></h4>
+          <h4><span class="in-blk">Dis<img class="q" src="/media/images/Q.png" alt="Q"></span></h4>
           <p class="description">
             C'est ici que vous storez toutes vos données, c'est votre disque dur personnel mais hébergé sur un serveur
             externe. Le tout accessible seulement par vous, le serveur ne peut voir vos données.
@@ -209,16 +209,16 @@
         </div>
         <div class="project">
           <img src="/media/images/interqom.png" alt="InterQom Logo">
-          <h4>Inter<span>Q</span>om</h4>
+          <h4><span class="in-blk">Inter<img class="q" src="/media/images/Q.png" alt="Q">om</span></h4>
           <p class="description">
-            Inter<span>Q</span>om est le remplacement sain aux alternatives de réseaux sociaux. Vos conversations sont
+            <span class="in-blk">Inter<img class="q" src="/media/images/Q.png" alt="Q">om</span> est le remplacement sain aux alternatives de réseaux sociaux. Vos conversations sont
             entièrement privées et même nous n'avons pas accès à vos données.
           </p>
           <p class="status hold">En Attente</p>
         </div>
         <div class="project">
           <img src="/media/images/qommerce.png" alt="Qommerce Logo">
-          <h4><span>Q</span>ommerce</h4>
+          <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ommerce</span></h4>
           <p class="description">
             La centrale de l'échange et du commerce en ligne. Commerces locaux et particuliers s'y retrouvent pour
             partager le fruit de leur labeur. Acceptant la cryptomonnaie ainsi que l'argent Canadien.
@@ -227,7 +227,7 @@
         </div>
         <div class="project">
           <img src="/media/images/qonvo.png" alt="Qonvo Logo">
-          <h4><span>Q</span>onvo</h4>
+          <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">onvo</span></h4>
           <p class="description">
             La messagerie instantanée est la façon la plus simple de communiquer avec nos compatriotes. Ce projet
             inclus les appels audio et vidéo, le tout chiffré de vous à vos destinataires.
@@ -236,43 +236,43 @@
         </div>
         <div class="project">
           <img src="/media/images/qourrier.png" alt="Qourrier Logo">
-          <h4><span>Q</span>ourrier</h4>
+          <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ourrier</span></h4>
           <p class="description">
-            Le portail d'accès à vos courriels, à partir de votre <span>Q</span>onsole. Les courriels entre
+            Le portail d'accès à vos courriels, à partir de votre <span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">onsole</span>. Les courriels entre
             utilisateurs sont entièrement chiffrés et nous supportons la plupart des fournisseurs.
           </p>
           <p class="status hold">En Attente</p>
         </div>
         <div class="project">
           <img src="/media/images/politiq.png" alt="PolitiQ Logo">
-          <h4>Politi<span>Q</span></h4>
+          <h4><span class="in-blk">Politi<img class="q" src="/media/images/Q.png" alt="Q"></span></h4>
           <p class="description">
-            Tele<span>Q</span>om est une table ronde où tous les Québécois sont invités, votre opinion sera enfin
+            <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span> est une table ronde où tous les Québécois sont invités, votre opinion sera enfin
             entendue auprès du gouvernement. La réelle démocratie à portée de clavier!
           </p>
           <p class="status hold">En Attente</p>
         </div>
         <div class="project">
           <img src="/media/images/qontact.png" alt="Qontact Logo">
-          <h4><span>Q</span>ontact</h4>
+          <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ontact</span></h4>
           <p class="description">
             Le bon vieux carnet d'adresse. Ici vous storez vos informations de contact, courriel, téléphone,
-            identifiants de <span>Q</span>onvo ou Inter<span>Q</span>om, et plus encore.
+            identifiants de <span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">onvo</span> ou <span class="in-blk">Inter<img class="q" src="/media/images/Q.png" alt="Q">om</span>, et plus encore.
           </p>
           <p class="status hold">En Attente</p>
         </div>
         <div class="project">
           <img src="/media/images/qalendrier.png" alt="Qalendrier Logo">
-          <h4><span>Q</span>alendrier</h4>
+          <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">alendrier</span></h4>
           <p class="description">
             On a tous besoin d'un calendrier. Ici vous pouvez gérer votre vie personnelle ou professionnelle, céduler
-            un rendez-vous avec un autre utilisateur et même voir vos événements sur Inter<span>Q</span>om.
+            un rendez-vous avec un autre utilisateur et même voir vos événements sur <span class="in-blk">Inter<img class="q" src="/media/images/Q.png" alt="Q">om</span>.
           </p>
           <p class="status hold">En Attente</p>
         </div>
         <div class="project">
           <img src="/media/images/qable.png" alt="Qable Logo">
-          <h4><span>Q</span>able</h4>
+          <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">able</span></h4>
           <p class="description">
             Une plateforme de diffusion de contenu audio ou vidéo, qui utilise la technologie de <a
               href="https://fr.wikipedia.org/wiki/BitTorrent" target="_blank" rel="noreferrer noopener"
@@ -283,9 +283,9 @@
         </div>
         <div class="project">
           <img src="/media/images/qi.png" alt="Qi Logo">
-          <h4><span>Q</span>i</h4>
+          <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">i</span></h4>
           <p class="description">
-            Des tutoriels pour tous! Chaque page contient les <span>Q</span>i oblgatoires et recommandés pour comprendre le sujet.
+            Des tutoriels pour tous! Chaque page contient les <span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">i</span> oblgatoires et recommandés pour comprendre le sujet.
             Il vous sera possible d'élargir votre perception du monde, le tout en privé naturellement!
           </p>
           <p class="status hold">En Attente</p>
diff --git a/pages/fr/services/developpement.html b/pages/fr/services/developpement.html
index c5ca7f5..1772164 100644
--- a/pages/fr/services/developpement.html
+++ b/pages/fr/services/developpement.html
@@ -47,7 +47,7 @@
             <h2>Services de Développement</h2>
             <p>
               Nous offrons plusieurs services de développement qui pourraient vous aider à démarrer ou améliorer votre projet.
-              Chez Tele<span>Q</span>om,
+              Chez <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span>,
               nous préférons une approche plus humaine. Lorsque vous vous sentirez prêt, contactez-nous et nous vous
               offrirons la meilleure option selon vos besoins.
               Oh et n'oubliez pas, tous les profits générés sont investis dans nos projets de Logiciels Libres! En nous
@@ -69,13 +69,13 @@
             <div class="includes">
               <h5>Ensemble</h5>
               <div class="includes-items">
-                <p>Modèle Tele<span>Q</span>om<br>- OU -<br>Votre Modèle Bootstrap 5</p>
+                <p>Modèle <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span><br>- OU -<br>Votre Modèle Bootstrap 5</p>
                 <p>Développeur: <span class="green">3 Heures</span></p>
               </div>
             </div>
             <hr>
             <div class="includes">
-              <h5><span>Q</span>ube Micro</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span> Micro</h5>
               <div class="includes-items">
               <p>1GB</p>
               <p>5 Courriels</p>
@@ -84,9 +84,9 @@
             </div>
             <hr>
             <div class="qontribution">
-              <h5><span>Q</span>ontribution</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ontribution</span></h5>
               <p>Ensemble: <span class="green">100$</span></p>
-              <p>Hébergement (<span>Q</span>ube): <span class="green">60$ / An</span></p>
+              <p>Hébergement (<span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span>): <span class="green">60$ / An</span></p>
             </div>
           </div>
           <div class="product">
@@ -98,7 +98,7 @@
             <div class="includes">
               <h5>Ensemble</h5>
               <div class="includes-items">
-              <p>Modèle Tele<span>Q</span>om<br>- OU -<br>Votre Modèle Bootstrap 5</p>
+              <p>Modèle <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span><br>- OU -<br>Votre Modèle Bootstrap 5</p>
               <p>Développeur: <span class="green">5 Heures</span></p>
               <p>Infolettre</p>
               <p>Formulaire Contact</p>
@@ -106,7 +106,7 @@
             </div>
             <hr>
             <div class="includes">
-              <h5><span>Q</span>ube Mini</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span> Mini</h5>
               <div class="includes-items">
               <p>5GB</p>
               <p>25 Courriels</p>
@@ -117,9 +117,9 @@
             </div>
             <hr>
             <div class="qontribution">
-              <h5><span>Q</span>ontribution</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ontribution</span></h5>
               <p>Ensemble: <span class="green">250$</span></p>
-              <p>Hébergement (<span>Q</span>ube): <span class="green">150$ / An</span></p>
+              <p>Hébergement (<span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span>): <span class="green">150$ / An</span></p>
             </div>
           </div>
           <div class="product">
@@ -135,7 +135,7 @@
             </div>
             <hr>
             <div class="qontribution">
-              <h5><span>Q</span>ontribution</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ontribution</span></h5>
               <p>Développeur: <span class="green">50$ / Heure</span></p>
             </div>
           </div>
@@ -156,7 +156,7 @@
                 <h4>OpenCart</h4>
                 <p class="description">
                   Commerce OpenCart simple, excellent pour tout type de commerce.
-                  La Bouti<span>Q</span> Tele<span>Q</span>om est une instance OpenCart
+                  La <span class="in-blk">Bouti<img class="q" src="/media/images/Q.png" alt="Q"></span> <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span> est une instance OpenCart
                 </p>
             </div>
             <hr>
@@ -167,7 +167,7 @@
             </div>
             <hr>
             <div class="includes">
-              <h5><span>Q</span>ube Mini</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span> Mini</h5>
               <div class="includes-items">
                 <p>5GB</p>
                 <p>25 Courriels</p>
@@ -178,9 +178,9 @@
             </div>
             <hr>
             <div class="qontribution">
-              <h5><span>Q</span>ontribution</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ontribution</span></h5>
               <p>Ensemble: <span class="green">150$</span></p>
-              <p>Hébergement (<span>Q</span>ube): <span class="green">150$ / An</span></p>
+              <p>Hébergement (<span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span>): <span class="green">150$ / An</span></p>
             </div>
           </div>
           <div class="product bg-2">
@@ -196,7 +196,7 @@
             </div>
             <hr>
             <div class="includes">
-              <h5><span>Q</span>ube Mini</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span> Mini</h5>
               <div class="includes-items">
                 <p>5GB</p>
                 <p>25 Courriels</p>
@@ -207,9 +207,9 @@
             </div>
             <hr>
             <div class="qontribution">
-              <h5><span>Q</span>ontribution</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ontribution</span></h5>
               <p>Ensemble: <span class="green">200$</span></p>
-              <p>Hébergement (<span>Q</span>ube): <span class="green">150$ / An</span></p>
+              <p>Hébergement (<span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span>): <span class="green">150$ / An</span></p>
             </div>
           </div>
         </div>
@@ -238,7 +238,7 @@
             </div>
             <hr>
             <div class="includes">
-              <h5><span>Q</span>ube Mini</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span> Mini</h5>
               <div class="includes-items">
                 <p>5GB</p>
                 <p>25 Courriels</p>
@@ -249,9 +249,9 @@
             </div>
             <hr>
             <div class="qontribution">
-              <h5><span>Q</span>ontribution</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ontribution</span></h5>
               <p>Ensemble: <span class="green">50$</span></p>
-              <p>Hébergement (<span>Q</span>ube): <span class="green">150$ / An</span></p>
+              <p>Hébergement (<span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span>): <span class="green">150$ / An</span></p>
             </div>
           </div>
           <div class="product">
@@ -261,7 +261,7 @@
             </div>
             <hr>
             <div class="includes">
-              <h5><span>Q</span>ube Mini</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span> Mini</h5>
               <div class="includes-items">
                 <p>5GB</p>
                 <p>25 Courriels</p>
@@ -272,9 +272,9 @@
             </div>
             <hr>
             <div class="qontribution">
-              <h5><span>Q</span>ontribution</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ontribution</span></h5>
               <p>Ensemble: <span class="green">50$</span></p>
-              <p>Hébergement (<span>Q</span>ube): <span class="green">150$ / An</span></p>
+              <p>Hébergement (<span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span>): <span class="green">150$ / An</span></p>
             </div>
           </div>
           <div class="product">
@@ -284,7 +284,7 @@
             </div>
             <hr>
             <div class="includes">
-              <h5><span>Q</span>ube Mini</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span> Mini</h5>
               <div class="includes-items">
                 <p>5GB</p>
                 <p>25 Courriels</p>
@@ -295,9 +295,9 @@
             </div>
             <hr>
             <div class="qontribution">
-              <h5><span>Q</span>ontribution</h5>
+              <h5><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ontribution</span></h5>
               <p>Ensemble: <span class="green">50$</span></p>
-              <p>Hébergement (<span>Q</span>ube): <span class="green">150$ / An</span></p>
+              <p>Hébergement (<span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ube</span>): <span class="green">150$ / An</span></p>
             </div>
           </div>
         </div>