From 5d7495f38ff81970143b6a20a83e3f26c600d5e1 Mon Sep 17 00:00:00 2001
From: Arthur 'Grizzly' Grisel-Davy <grisel-davy@crans.org>
Date: Sat, 26 Sep 2020 11:46:15 +0200
Subject: [PATCH] Add texts ans change layout

---
 aurore_mailall.html | 415 ++++++++++++++++++++++----------------------
 1 file changed, 212 insertions(+), 203 deletions(-)
diff --git a/aurore_mailall.html b/aurore_mailall.html
index b190a51..df805e7 100644
--- a/aurore_mailall.html
+++ b/aurore_mailall.html
@@ -85,61 +85,215 @@
 	</style>
 </head>
 
-
 <body>
-		<table bgcolor="#192744" cellpadding="0" cellspacing="0" class="nl-container" role="presentation" style="table-layout: fixed; vertical-align: top; min-width: 320px; Margin: 0 auto; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #192744; width: 100%;" valign="top" width="100%">
-			<tbody>
-				<tr>
-					<td>
-							<div style="background-color:transparent;">
-								<div class="block-grid" style="Margin: 0 auto; min-width: 320px; max-width: 640px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #5c74b8;">
-									<div style="border-collapse: collapse;display: table;width: 100%;background-color:#5c74b8;background-image:url('https://perso.crans.org/grisel-davy/images_mail/silhouette-fireworks.jpg');background-position:top center;background-repeat:no-repeat">
-												<div class="col num12" style="min-width: 320px; max-width: 640px; display: table-cell; vertical-align: top; width: 640px;">
-													<div style="width:100% !important;">
-														<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:0px; padding-bottom:0px; padding-right: 0px; padding-left: 0px;">
+	<table bgcolor="#192744" cellpadding="0" cellspacing="0" class="nl-container" role="presentation" style="table-layout: fixed; vertical-align: top; min-width: 320px; Margin: 0 auto; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #192744; width: 100%;" valign="top" width="100%">
+		<tbody>
+			<tr>
+				<td>
+					<div style="background-color:transparent;">
+						<div class="block-grid" style="Margin: 0 auto; min-width: 320px; max-width: 640px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #5c74b8;">
+							<div style="border-collapse: collapse;display: table;width: 100%;background-color:#5c74b8;background-image:url('https://perso.crans.org/grisel-davy/images_mail/silhouette-fireworks.jpg');background-position:top center;background-repeat:no-repeat">
+								<div class="col num12" style="min-width: 320px; max-width: 640px; display: table-cell; vertical-align: top; width: 640px;">
+									<div style="width:100% !important;">
+										<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:0px; padding-bottom:0px; padding-right: 0px; padding-left: 0px;">
 
-															<div style="height: 50px; width: 100%;">
-																<span></span>
-															</div>
+											<div style="height: 50px; width: 100%;">
+												<span></span>
+											</div>
 
-															<div class="texte_center" style="font-size:20px;">
-																<p>
-																Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-																tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-																quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-																consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-																cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-																proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-																</p>
-															</div>
+											<div style="height: 50px; width: 100%;">
+												<span></span>
+											</div>
 
-															<div style="height: 50px; width: 100%;">
-																<span></span>
-															</div>
+											<div align="center" class="img-container center autowidth" style="padding-right: 20px;padding-left: 20px;">
+												<img align="center" alt="Alternate text" border="0" class="center autowidth" src="https://perso.crans.org/grisel-davy/images_mail/logo_black.png" style="text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; width: 100%; max-width: 385px; display: block;" title="Alternate text" width="385"/>
+											</div>
 
-															<div align="center" class="img-container center autowidth" style="padding-right: 20px;padding-left: 20px;">
-																<img align="center" alt="Alternate text" border="0" class="center autowidth" src="https://perso.crans.org/grisel-davy/images_mail/logo_black.png" style="text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; width: 100%; max-width: 385px; display: block;" title="Alternate text" width="385"/>
-																</div>
-															</div>
-															<div style="height: 400px; width: 100%;">
-																<span></span>
-															</div>
-														</div>
-													</div>
+
+										</div>
+										<div style="height: 400px; width: 100%;">
+											<span></span>
+										</div>
+										<div class="texte_center">
+												<p style="font-size:18px;font-weight: bold;">
+													Avec Aurore nous vous proposons de nombreux services. Tellement de services que vous ne les conaissez surement pas tous. Tous ces services sont hébergés sur nos serveurs et utilisent des outils libres pour garantire l'intégritée de vos données. Ces services vous sont accessibles à vie, même aprés que votre adhésion expire. 
+												</p>
+											</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div style="background-color:transparent;">
+						<div class="block-grid" style="Margin: 0 auto; min-width: 320px; max-width: 640px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #5c74b8;">
+							<div style="border-collapse: collapse;display: table;width: 100%;background-color:#5c74b8;">
+								<div class="col num12" style="min-width: 320px; max-width: 640px; display: table-cell; vertical-align: top; width: 640px;">
+									<div style="width:100% !important;">
+										<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;">
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div style="background-color:transparent;">
+						<div class="block-grid two-up" style="Margin: 0 auto; min-width: 320px; max-width: 640px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #5c74b8;">
+							<div style="border-collapse: collapse;display: table;width: 100%;background-color:#5c74b8;">
+								<div class="col num6" style="min-width: 320px; max-width: 320px; display: table-cell; vertical-align: top; width: 320px;">
+									<div style="width:100% !important;">
+										<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:10px; padding-bottom:10px; padding-right: 0px; padding-left: 0px;">
+											<div align="center" class="img-container center autowidth" style="padding-right: 0px;padding-left: 0px;">
+												<img align="center" alt="I'm an image" border="0" class="center autowidth" src="https://perso.crans.org/grisel-davy/images_mail/jitsi.png" style="text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; width: 90%; max-width: 320px; display: block;" title="I'm an image" width="320"/>
+											</div>
+											<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.2;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
+												<div style="line-height: 1.2; font-size: 12px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; color: #555555; mso-line-height-alt: 14px;">
+													<p style="font-size: 15px; line-height: 1.2; text-align: center; word-break: break-word; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 18px; margin: 0;">
+														<span style="color: #ffffff; font-size: 15px;">
+															Organiser une visio-conférence pour travailler ou communiquer avec d'autres n'a jamais été aussi facile, grâce à jitsi. Aurore met à ta disposition ce service de visio-conf, accessible à l'adresse <a href="https://jitsi.auro.re">https://jitsi.auro.re</a> 
+														</span>
+													</br>
+													</br>
+														<span>
+															En particulier, pas besoin d'être adhérent à l'association pour l'utiliser et en profiter. 
+														</span>
+													</p>
 												</div>
 											</div>
 										</div>
-										<div style="background-color:transparent;">
-											<div class="block-grid" style="Margin: 0 auto; min-width: 320px; max-width: 640px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #5c74b8;">
-												<div style="border-collapse: collapse;display: table;width: 100%;background-color:#5c74b8;">
-															<div class="col num12" style="min-width: 320px; max-width: 640px; display: table-cell; vertical-align: top; width: 640px;">
-																<div style="width:100% !important;">
-																	<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;">
+									</div>
+								</div>
 
-										<div class="texte_center">
-											<p>
-											Aurore, ça vous donne internet, mais pas que! L'association propose différents services pour vous accompagner dans vos projet. Ces services utilisent des solutions libres et gratuites et sont hebergés sur nos serveurs pour garantire l'intégritée de vos données.
-											</p>
+
+								<div class="col num6" style="min-width: 320px; max-width: 320px; display: table-cell; vertical-align: center; width: 320px;">
+									<div style="width:100% !important;">
+										<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:10px; padding-bottom:10px; padding-right: 0px; padding-left: 0px;">
+											<div align="center" class="img-container center autowidth" style="padding-right: 0px;padding-left: 0px;">
+												<img align="center" alt="I'm an image" border="0" class="center autowidth" src="https://perso.crans.org/grisel-davy/images_mail/nextcloud.png" style="text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; width: 90%; max-width: 320px; display: block;" title="I'm an image" width="320"/>
+											</div>
+											<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.2;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
+												<div style="line-height: 1.2; font-size: 12px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; color: #555555; mso-line-height-alt: 14px;">
+													<p style="font-size: 15px; line-height: 1.2; text-align: center; word-break: break-word; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 18px; margin: 0;">
+														<span style="color: #ffffff; font-size: 15px;">
+															Aurore met à ta disposition gratuitement 30Go de stockage, et ce à vie ! (tu pourras continuer à l'utiliser une fois que tu ne seras plus adhérents à l'association). Une solution simple et sécurisée pour stocker vidéos, photos, documents volumineux et fichiers personnels. Nous utilisons la plateforme nextcloud, qui te permets d'accéder, charger et visualiser tes documents via un navigateurs Web, ou une application client pc, mac os, ios et android.
+														</span>
+													</br>
+													</br>
+														<span>
+															Pour l'utiliser, rendez-vous sur <a href="https://nextcloud.auro.re">https://nextcloud.auro.re</a>
+														</span>
+													</p>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div class="block-grid two-up" style="Margin: 0 auto; min-width: 320px; max-width: 640px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #5c74b8;">
+							<div style="border-collapse: collapse;display: table;width: 100%;background-color:#5c74b8;">
+								<div class="col num6" style="min-width: 320px; max-width: 320px; display: table-cell; vertical-align: center; width: 320px;">
+									<div style="width:100% !important;">
+										<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:10px; padding-bottom:10px; padding-right: 0px; padding-left: 0px;">
+											<div align="center" class="img-container center autowidth" style="padding-right: 0px;padding-left: 0px;">
+												<img align="center" alt="I'm an image" border="0" class="center autowidth" src="https://perso.crans.org/grisel-davy/images_mail/phabricator.png" style="text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; width: 90%; max-width: 320px; display: block;" title="I'm an image" width="320"/>
+											</div>
+											<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.2;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
+												<div style="line-height: 1.2; font-size: 12px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; color: #555555; mso-line-height-alt: 14px;">
+													<p style="font-size: 15px; line-height: 1.2; text-align: center; word-break: break-word; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 18px; margin: 0;"><span style="color: #ffffff; font-size: 15px;">Phabricator est un outil de suivi de projet sur le principe de Kaban. Il permet la gestion de projets complexe via la création et l'assignation de tache. C'est un outil très complet qui convient pour tout les projets du plus simple au plus ambitieux</span></p>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+
+
+								<div class="col num6" style="min-width: 320px; max-width: 320px; display: table-cell; vertical-align: top; width: 320px;">
+									<div style="width:100% !important;">
+										<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:10px; padding-bottom:10px; padding-right: 0px; padding-left: 0px;">
+											<div align="center" class="img-container center autowidth" style="padding-right: 0px;padding-left: 0px;">
+												<img align="center" alt="I'm an image" border="0" class="center autowidth" src="https://perso.crans.org/grisel-davy/images_mail/privatebin.png" style="text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; width: 90%; max-width: 320px; display: block;" title="I'm an image" width="320"/>
+											</div>
+											<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.2;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
+												<div style="line-height: 1.2; font-size: 12px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; color: #555555; mso-line-height-alt: 14px;">
+													<p style="font-size: 15px; line-height: 1.2; text-align: center; word-break: break-word; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 18px; margin: 0;"><span style="color: #ffffff; font-size: 15px;">PrivateBin est un outils de partage de texte simple et sécurisé. Le contenu partagé n'est jamais connu du serveur et peut être partagé facilement via des liens qui peuvent avoir des délais d'expiration. Simple au possible mais très utile.</span></p>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div class="block-grid two-up" style="Margin: 0 auto; min-width: 320px; max-width: 640px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #5c74b8;">
+							<div style="border-collapse: collapse;display: table;width: 100%;background-color:#5c74b8;">
+								<div class="col num6" style="min-width: 320px; max-width: 320px; display: table-cell; vertical-align: top; width: 320px;">
+									<div style="width:100% !important;">
+										<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:10px; padding-bottom:10px; padding-right: 0px; padding-left: 0px;">
+											<div align="center" class="img-container center autowidth" style="padding-right: 0px;padding-left: 0px;">
+												<img align="center" alt="I'm an image" border="0" class="center autowidth" src="https://perso.crans.org/grisel-davy/images_mail/matrix.png" style="text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; width: 90%; max-width: 320px; display: block;" title="I'm an image" width="320"/>
+											</div>
+											<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.2;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
+												<div style="line-height: 1.2; font-size: 12px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; color: #555555; mso-line-height-alt: 14px;">
+													<p style="font-size: 15px; line-height: 1.2; text-align: center; word-break: break-word; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 18px; margin: 0;"><span style="color: #ffffff; font-size: 15px;">Matrix est un outil de communication instantanée analogue à IRC ou Discord qui permet la création de canaux de discussion ainsi que des appels audio ou vidéo.</span></p>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+
+
+								<div class="col num6" style="min-width: 320px; max-width: 320px; display: table-cell; vertical-align: top; width: 320px;">
+									<div style="width:100% !important;">
+										<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:10px; padding-bottom:10px; padding-right: 0px; padding-left: 0px;">
+											<div align="center" class="img-container center autowidth" style="padding-right: 0px;padding-left: 0px;">
+												<img align="center" alt="I'm an image" border="0" class="center autowidth" src="https://perso.crans.org/grisel-davy/images_mail/etherpad.png" style="text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; width: 90%; max-width: 320px; display: block;" title="I'm an image" width="320"/>
+											</div>
+											<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.2;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
+												<div style="line-height: 1.2; font-size: 12px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; color: #555555; mso-line-height-alt: 14px;">
+													<p style="font-size: 15px; line-height: 1.2; text-align: center; word-break: break-word; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 18px; margin: 0;"><span style="color: #ffffff; font-size: 15px;">
+													Etherpad permet l'édition collaborative de document texte simple. Les pads sont des feuilles de text très rapide à créer et à partager.</span>
+												</p>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="block-grid two-up" style="Margin: 0 auto; min-width: 320px; max-width: 640px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #5c74b8;">
+						<div style="border-collapse: collapse;display: table;width: 100%;background-color:#5c74b8;">
+							<div class="col num6" style="min-width: 320px; max-width: 320px; display: table-cell; vertical-align: top; width: 320px;">
+								<div style="width:100% !important;">
+									<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:10px; padding-bottom:10px; padding-right: 0px; padding-left: 0px;">
+										<div align="center" class="img-container center autowidth" style="padding-right: 0px;padding-left: 0px;">
+											<img align="center" alt="I'm an image" border="0" class="center autowidth" src="https://perso.crans.org/grisel-davy/images_mail/codimd.png" style="text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; width: 90%; max-width: 320px; display: block;" title="I'm an image" width="320"/>
+										</div>
+										<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.2;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
+											<div style="line-height: 1.2; font-size: 12px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; color: #555555; mso-line-height-alt: 14px;">
+												<p style="font-size: 15px; line-height: 1.2; text-align: center; word-break: break-word; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 18px; margin: 0;"><span style="color: #ffffff; font-size: 15px;">CodiMd est un second outil d'édition de document collaboratif en ligne qui permet l'utilisation de texte plus riche. Les documents utilisés par CodiMd sont écrit en Markdown, un langage très proche du langage usuel et qui permet une mise en forme simple mais variée du texte.</span></p>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+
+
+							<div class="col num6" style="min-width: 320px; max-width: 320px; display: table-cell; vertical-align: top; width: 320px;">
+								<div style="width:100% !important;">
+									<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:10px; padding-bottom:10px; padding-right: 0px; padding-left: 0px;">
+										<div align="center" class="img-container center autowidth" style="padding-right: 0px;padding-left: 0px;">
+											<img align="center" alt="I'm an image" border="0" class="center autowidth" src="https://perso.crans.org/grisel-davy/images_mail/gitea.png" style="text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; width: 90%; max-width: 320px; display: block;" title="I'm an image" width="320"/>
+										</div>
+										<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.2;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
+											<div style="line-height: 1.2; font-size: 12px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; color: #555555; mso-line-height-alt: 14px;">
+												<p style="font-size: 15px; line-height: 1.2; text-align: center; word-break: break-word; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 18px; margin: 0;">
+													<span style="color: #ffffff; font-size: 15px;">
+														Vous conaissez Github, vous préférez Gitlab, vous allez adorer Gitea! Aurore te permet d'haberger tes projets sur notre instance Gitea. Plus simple et léger que Gitlab, Gitea n'en est pas moins puissant et agréable à utiliser. Tu peut également y retrouver les projets de l'associations et y participer à l'adresse <a href="https://gitea.auro.re">https://gitea.auro.re</a>
+													</span>
+												</p>
 										</div>
 									</div>
 								</div>
@@ -147,161 +301,16 @@
 						</div>
 					</div>
 				</div>
-
-<div style="background-color:transparent;">
-<div class="block-grid two-up" style="Margin: 0 auto; min-width: 320px; max-width: 640px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #5c74b8;">
-	<div style="border-collapse: collapse;display: table;width: 100%;background-color:#5c74b8;">
-		<div class="col num6" style="min-width: 320px; max-width: 320px; display: table-cell; vertical-align: top; width: 320px;">
-			<div style="width:100% !important;">
-				<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:10px; padding-bottom:10px; padding-right: 0px; padding-left: 0px;">
-					<div align="center" class="img-container center autowidth" style="padding-right: 0px;padding-left: 0px;">
-						<img align="center" alt="I'm an image" border="0" class="center autowidth" src="https://perso.crans.org/grisel-davy/images_mail/jitsi.png" style="text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; width: 90%; max-width: 320px; display: block;" title="I'm an image" width="320"/>
-					</div>
-						<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.2;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
-							<div style="line-height: 1.2; font-size: 12px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; color: #555555; mso-line-height-alt: 14px;">
-								<p style="font-size: 15px; line-height: 1.2; text-align: center; word-break: break-word; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 18px; margin: 0;"><span style="color: #ffffff; font-size: 15px;">Jitsi est un service de visioconférence, VoIP et messagerie instantanée. Jitsi permet de réaliser des réunion à plusieur via un navigateur et sans besoin de créer un compte pour les invités.</span></p>
-							</div>
-						</div>
-					</div>
-				</div>
 			</div>
 
 
-			<div class="col num6" style="min-width: 320px; max-width: 320px; display: table-cell; vertical-align: top; width: 320px;">
-				<div style="width:100% !important;">
-					<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:10px; padding-bottom:10px; padding-right: 0px; padding-left: 0px;">
-						<div align="center" class="img-container center autowidth" style="padding-right: 0px;padding-left: 0px;">
-							<img align="center" alt="I'm an image" border="0" class="center autowidth" src="https://perso.crans.org/grisel-davy/images_mail/nextcloud.png" style="text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; width: 90%; max-width: 320px; display: block;" title="I'm an image" width="320"/>
-						</div>
-						<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.2;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
-							<div style="line-height: 1.2; font-size: 12px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; color: #555555; mso-line-height-alt: 14px;">
-								<p style="font-size: 15px; line-height: 1.2; text-align: center; word-break: break-word; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 18px; margin: 0;"><span style="color: #ffffff; font-size: 15px;">Nextcloud est principalement un service de stockage en ligne (le nuage d'Aurore). Aurore propose à tout ses adhérents 30G de stockage sur ses serveurs. En plus du stockage, nextcloud sert aussi de serveur de syncronisation de calendrier, d'activité et de contacts.</span></p>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<div class="block-grid two-up" style="Margin: 0 auto; min-width: 320px; max-width: 640px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #5c74b8;">
-	<div style="border-collapse: collapse;display: table;width: 100%;background-color:#5c74b8;">
-		<div class="col num6" style="min-width: 320px; max-width: 320px; display: table-cell; vertical-align: top; width: 320px;">
-			<div style="width:100% !important;">
-				<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:10px; padding-bottom:10px; padding-right: 0px; padding-left: 0px;">
-					<div align="center" class="img-container center autowidth" style="padding-right: 0px;padding-left: 0px;">
-						<img align="center" alt="I'm an image" border="0" class="center autowidth" src="https://perso.crans.org/grisel-davy/images_mail/phabricator.png" style="text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; width: 90%; max-width: 320px; display: block;" title="I'm an image" width="320"/>
-					</div>
-						<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.2;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
-							<div style="line-height: 1.2; font-size: 12px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; color: #555555; mso-line-height-alt: 14px;">
-								<p style="font-size: 15px; line-height: 1.2; text-align: center; word-break: break-word; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 18px; margin: 0;"><span style="color: #ffffff; font-size: 15px;">Phabricator est un outil de suivi de projet sur le principe de Kaban. Il permet la gestion de projets complexe via la création et l'assignation de tache. C'est un outil très complet qui convient pour tout les projets du plus simple au plus ambitieux</span></p>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-
-
-			<div class="col num6" style="min-width: 320px; max-width: 320px; display: table-cell; vertical-align: top; width: 320px;">
-				<div style="width:100% !important;">
-					<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:10px; padding-bottom:10px; padding-right: 0px; padding-left: 0px;">
-						<div align="center" class="img-container center autowidth" style="padding-right: 0px;padding-left: 0px;">
-							<img align="center" alt="I'm an image" border="0" class="center autowidth" src="https://perso.crans.org/grisel-davy/images_mail/privatebin.png" style="text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; width: 90%; max-width: 320px; display: block;" title="I'm an image" width="320"/>
-						</div>
-						<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.2;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
-							<div style="line-height: 1.2; font-size: 12px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; color: #555555; mso-line-height-alt: 14px;">
-								<p style="font-size: 15px; line-height: 1.2; text-align: center; word-break: break-word; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 18px; margin: 0;"><span style="color: #ffffff; font-size: 15px;">PrivateBin est un outils de partage de texte simple et sécurisé. Le contenu partagé n'est jamais connu du serveur et peut être partagé facilement via des liens qui peuvent avoir des délais d'expiration. Simple au possible mais très utile.</span></p>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<div class="block-grid two-up" style="Margin: 0 auto; min-width: 320px; max-width: 640px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #5c74b8;">
-	<div style="border-collapse: collapse;display: table;width: 100%;background-color:#5c74b8;">
-		<div class="col num6" style="min-width: 320px; max-width: 320px; display: table-cell; vertical-align: top; width: 320px;">
-			<div style="width:100% !important;">
-				<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:10px; padding-bottom:10px; padding-right: 0px; padding-left: 0px;">
-					<div align="center" class="img-container center autowidth" style="padding-right: 0px;padding-left: 0px;">
-						<img align="center" alt="I'm an image" border="0" class="center autowidth" src="https://perso.crans.org/grisel-davy/images_mail/matrix.png" style="text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; width: 90%; max-width: 320px; display: block;" title="I'm an image" width="320"/>
-					</div>
-						<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.2;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
-							<div style="line-height: 1.2; font-size: 12px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; color: #555555; mso-line-height-alt: 14px;">
-								<p style="font-size: 15px; line-height: 1.2; text-align: center; word-break: break-word; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 18px; margin: 0;"><span style="color: #ffffff; font-size: 15px;">Matrix est un outil de communication instantanée analogue à IRC ou Discord qui permet la création de canaux de discussion ainsi que des appels audio ou vidéo.</span></p>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-
-
-			<div class="col num6" style="min-width: 320px; max-width: 320px; display: table-cell; vertical-align: top; width: 320px;">
-				<div style="width:100% !important;">
-					<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:10px; padding-bottom:10px; padding-right: 0px; padding-left: 0px;">
-						<div align="center" class="img-container center autowidth" style="padding-right: 0px;padding-left: 0px;">
-							<img align="center" alt="I'm an image" border="0" class="center autowidth" src="https://perso.crans.org/grisel-davy/images_mail/etherpad.png" style="text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; width: 90%; max-width: 320px; display: block;" title="I'm an image" width="320"/>
-						</div>
-						<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.2;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
-							<div style="line-height: 1.2; font-size: 12px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; color: #555555; mso-line-height-alt: 14px;">
-								<p style="font-size: 15px; line-height: 1.2; text-align: center; word-break: break-word; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 18px; margin: 0;"><span style="color: #ffffff; font-size: 15px;">
-									Etherpad permet l'édition collaborative de document texte simple. Les pads sont des feuilles de text très rapide à créer et à partager.</span>
-								</p>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<div class="block-grid two-up" style="Margin: 0 auto; min-width: 320px; max-width: 640px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #5c74b8;">
-	<div style="border-collapse: collapse;display: table;width: 100%;background-color:#5c74b8;">
-		<div class="col num6" style="min-width: 320px; max-width: 320px; display: table-cell; vertical-align: top; width: 320px;">
-			<div style="width:100% !important;">
-				<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:10px; padding-bottom:10px; padding-right: 0px; padding-left: 0px;">
-					<div align="center" class="img-container center autowidth" style="padding-right: 0px;padding-left: 0px;">
-						<img align="center" alt="I'm an image" border="0" class="center autowidth" src="https://perso.crans.org/grisel-davy/images_mail/codimd.png" style="text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; width: 90%; max-width: 320px; display: block;" title="I'm an image" width="320"/>
-					</div>
-						<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.2;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
-							<div style="line-height: 1.2; font-size: 12px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; color: #555555; mso-line-height-alt: 14px;">
-								<p style="font-size: 15px; line-height: 1.2; text-align: center; word-break: break-word; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 18px; margin: 0;"><span style="color: #ffffff; font-size: 15px;">CodiMd est un second outil d'édition de document collaboratif en ligne qui permet l'utilisation de texte plus riche. Les documents utilisés par CodiMd sont écrit en Markdown, un langage très proche du langage usuel et qui permet une mise en forme simple mais variée du texte.</span></p>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-
-
-			<div class="col num6" style="min-width: 320px; max-width: 320px; display: table-cell; vertical-align: top; width: 320px;">
-				<div style="width:100% !important;">
-					<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:10px; padding-bottom:10px; padding-right: 0px; padding-left: 0px;">
-						<div align="center" class="img-container center autowidth" style="padding-right: 0px;padding-left: 0px;">
-							<img align="center" alt="I'm an image" border="0" class="center autowidth" src="https://perso.crans.org/grisel-davy/images_mail/gitea.png" style="text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; width: 90%; max-width: 320px; display: block;" title="I'm an image" width="320"/>
-						</div>
-						<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.2;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
-							<div style="line-height: 1.2; font-size: 12px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; color: #555555; mso-line-height-alt: 14px;">
-								<p style="font-size: 15px; line-height: 1.2; text-align: center; word-break: break-word; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 18px; margin: 0;"><span style="color: #ffffff; font-size: 15px;">
-									Vous conaissez Githb, vous préférez Gitlab, vous allez adorer Gitea. Cet outil permet la gestion et la visualisation de dépots Gits hébergés sur nos serveurs. Plus simple et léger que Gitlab, Gitea n'en est pas moins puissant et agréable à utiliser.</span>
-								</p>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
-
-
-<div style="background-color:transparent;">
-	<div class="block-grid" style="Margin: 0 auto; min-width: 320px; max-width: 640px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #151d33;">
-		<div style="border-collapse: collapse;display: table;width: 100%;background-color:#151d33;">
-					<div class="col num12" style="min-width: 320px; max-width: 640px; display: table-cell; vertical-align: top; width: 640px;">
-						<div style="width:100% !important;">
-							<!--[if (!mso)&(!IE)]><!-->
-							<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:25px; padding-bottom:40px; padding-right: 0px; padding-left: 0px;">
+			<div style="background-color:transparent;">
+				<div class="block-grid" style="Margin: 0 auto; min-width: 320px; max-width: 640px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #151d33;">
+					<div style="border-collapse: collapse;display: table;width: 100%;background-color:#151d33;">
+						<div class="col num12" style="min-width: 320px; max-width: 640px; display: table-cell; vertical-align: top; width: 640px;">
+							<div style="width:100% !important;">
+								<!--[if (!mso)&(!IE)]><!-->
+								<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:25px; padding-bottom:40px; padding-right: 0px; padding-left: 0px;">
 									<div style="color:#555555;font-family:'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;line-height:1.2;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
 										<div style="line-height: 1.2; font-size: 12px; font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace; color: #555555; mso-line-height-alt: 14px;">
 											<p style="font-size: 20px; line-height: 1.2; word-break: break-word; text-align: center; font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace; mso-line-height-alt: 24px; margin: 0;"><span style="font-size: 20px; color: #ffffff;">Pour en savoir plus ou nous poser toutes vos questions, rejoignez nous sur<br/></span></p>
@@ -327,12 +336,12 @@
 											</tr>
 										</tbody>
 									</table>
-										<div style="color:#555555;font-family:'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;line-height:1.2;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
-											<div style="line-height: 1.2; font-size: 12px; font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace; color: #555555; mso-line-height-alt: 14px;">
-												<p style="font-size: 14px; line-height: 1.2; word-break: break-word; text-align: center; font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace; mso-line-height-alt: 17px; margin: 0;"><span style="color: #999999;">© 2020 Aurore | Beefree template.</span></p>
-											</div>
-										</div>
+
+
+									<div class="texte_center">
+										<p>© 2020 Aurore | Beefree template.</p>
 									</div>
+									
 								</div>
 							</div>
 						</div>
