commit b5136b819adb84514dfa15023a988b37281b8969
Author: julien <julien.deb@netig.net>
Date:   Tue Jan 14 17:57:40 2025 +0100

    first commit

diff --git a/.env b/.env
new file mode 100644
index 0000000..ee666e7
--- /dev/null
+++ b/.env
@@ -0,0 +1,4 @@
+ALLOW_ORIGIN=netig.net
+#DSN=
+RECIPIENT=contact@netig.net
+SENDER=contact@netig.net
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..290dfb7
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,9 @@
+FROM ghcr.io/getzola/zola:v0.19.2 AS zola
+
+COPY ./src /project
+WORKDIR /project
+RUN ["zola", "build"]
+
+FROM ghcr.io/static-web-server/static-web-server:2
+WORKDIR /
+COPY --from=zola /project/public /public
diff --git a/README.md b/README.md
new file mode 100755
index 0000000..f7f4698
--- /dev/null
+++ b/README.md
@@ -0,0 +1 @@
+# netig.net
diff --git a/compose.yml b/compose.yml
new file mode 100644
index 0000000..ad72dbb
--- /dev/null
+++ b/compose.yml
@@ -0,0 +1,27 @@
+services:
+  post-to-email:
+    image: matthiasmullie/post-to-email
+    container_name: p2enetignet_post-to-email
+    networks:
+      - mailserver
+    env_file:
+      - .env
+      - ../passwords/p2enetignet.pass
+    ports:
+      - "127.0.0.1:9007:80"
+    healthcheck:
+      test: 'curl --fail http://localhost:80/?SENDER=test@example.com'
+      interval: 1m
+      timeout: 10s
+      retries: 3
+      start_period: 20s
+    restart: unless-stopped
+  zola:
+    build: .
+    container_name: netignet_zola
+    ports:
+      - "127.0.0.1:8000:80"
+    restart: unless-stopped
+networks:
+  mailserver:
+    external: true
diff --git a/src/config.toml b/src/config.toml
new file mode 100644
index 0000000..1cf89d7
--- /dev/null
+++ b/src/config.toml
@@ -0,0 +1,16 @@
+# The URL the site will be built for
+base_url = "https://netig.net"
+
+# Whether to automatically compile all Sass files in the sass directory
+compile_sass = true
+
+# Whether to build a search index to be used later on by a JavaScript library
+build_search_index = false
+
+[markdown]
+# Whether to do syntax highlighting
+# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
+highlight_code = false
+
+[extra]
+# Put all your custom variables here
diff --git a/src/content/contact.md b/src/content/contact.md
new file mode 100644
index 0000000..fb2fd4b
--- /dev/null
+++ b/src/content/contact.md
@@ -0,0 +1,4 @@
++++
+title = "Contact"
+template = "contact.html"
++++
diff --git a/src/content/legal.md b/src/content/legal.md
new file mode 100644
index 0000000..2f74aa2
--- /dev/null
+++ b/src/content/legal.md
@@ -0,0 +1,47 @@
++++
+title = "Mention légales"
+template = "page.html"
++++
+
+NETig<br>Julien Debrousse<br>Siren : 799 900 907
+
+### Contact
+Il est possible de prendre contact par courriel à : <a href="mailto:contact@netig.net">contact@netig.net</a>.
+        
+### Hébergement des données
+Toutes les données collectées dans le cadre de la mise à disposition des services sont conservées exclusivement sur des serveurs gérés par moi chez HostUp en Suède et Hetzner en Allemagne.
+
+## Conditions Générales d’Utilisation
+### Disponibilité
+Malgré les efforts faits pour assurer la meilleure disponibilité possible, un accès permanent aux services n’est pas garanti. Vous pouvez consulter l’état des services en temps réel depuis un <a href="https://status.netig.net/status/services" target="_blank">outil de surveillance</a> mis à disposition. Vous pouvez aussi vous inscrire à la <a href="https://list.netig.net/subscription/form" target="_blank">liste de diffusion de maintenance</a>, afin d’être informé des interruptions de service.
+
+### Données personnelles
+#### Responsabilité
+Vous êtes responsables des contenus diffusés et êtes tenus de respecter la législation en vigueur. Le non respect des conditions d’utilisation ou des lois en vigueur peut entraîner une suppression de vos données et comptes.
+
+#### Confidentialité
+Les données confiées ne seront en aucun cas divulguées ou utilisée dans un but autre que de fournir les services liés.
+
+#### Conservation
+Les données personnelles sont conservées pour la durée de provision des services. Elles peuvent persister dans les sauvegardes quelques semaines après la clôture des services.
+
+#### Récupération
+Vous pouvez à tout moment récupérer vos données personnelles, soit à l’aide d’une fonctionnalité intégrée à un service ou bien sur demande.
+
+#### Suppression
+Vous pouvez à tout moment supprimer vos données personnelles, soit à l’aide d’une fonctionnalité intégrée à un service ou bien sur demande écrite.
+
+### Services en libre accès
+Ces services sont accessibles à tous afin de proposer une alternative aux produits des GAFAM ou « Géants du web », respectueuse des données de chacun. Les ressources matérielles ne sont pas sans limites donc utilisez les avec bon sens, en cas d’abus et après un premier avertissement votre adresse IP pourra être bannie.
+
+### Hébergement et services
+#### Souscription
+Vous pouvez souscrire à tout moment à une offre pour une durée minimale d’un mois en prenant contact à : <a href="mailto:contact@netig.net">contact@netig.net</a>.
+
+#### Paiement
+Les paiements s’effectuent par virement bancaire. Les hébergements sont facturés mensuellement un mois après la mise à disposition du service.
+
+#### Suspension et Résiliation
+Toute facture impayée de plus de deux mois pourra entraîner une suspension du service concerné. Toute facture impayée de plus de six mois pourra entraîner une suppression définitive des données.
+Si vous souhaitez résilier un service en cours avant échéance, aucun remboursement ne sera fait mais à votre demande le service pourra être désactivé et les données supprimées.
+
diff --git a/src/content/maintenance.md b/src/content/maintenance.md
new file mode 100644
index 0000000..8f5c2d6
--- /dev/null
+++ b/src/content/maintenance.md
@@ -0,0 +1,4 @@
++++
+title = "Maintenance et incidents"
+template = "maintenance.html"
++++
diff --git a/src/content/success.md b/src/content/success.md
new file mode 100644
index 0000000..7b65526
--- /dev/null
+++ b/src/content/success.md
@@ -0,0 +1,4 @@
++++
+title = "Success"
+template = "success.html"
++++
diff --git a/src/sass/css/style.scss b/src/sass/css/style.scss
new file mode 100644
index 0000000..020f7c4
--- /dev/null
+++ b/src/sass/css/style.scss
@@ -0,0 +1,565 @@
+/* Fonts
+	------------------------------------------------------------------------ */
+@font-face {
+    font-family: 'TitilliumWeb';
+    src: url('/fonts/TitilliumWeb-Regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'TitilliumWeb';
+    src: url('/fonts/TitilliumWeb-Bold.woff2') format('woff2');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+/* Reset
+    ------------------------------------------------------------------------ */
+body {
+    margin: 0px;
+}
+
+/* Variables
+    ------------------------------------------------------------------------ */
+
+$color__primary: #00c8be;
+$color__secondary: rgb(15 25 50/var(--tw-bg-opacity, 1));
+$color__ternary: rgb(30 40 85/var(--tw-bg-opacity, 1));
+$color__neutral: #010101;
+$color__white: #fff;
+$cover__home: url(/images/background.webp);
+
+/* Layout
+    ------------------------------------------------------------------------ */
+body,
+html {
+    font-family: TitilliumWeb, sans-serif;
+    font-size: 1.2rem;
+    color: $color__white;
+    scroll-behavior: smooth;
+}
+
+main {
+    min-height: calc(100vh - 142.4px);
+}
+
+article {
+    padding-bottom: 100px;
+}
+
+.anchor {
+    height: 40px;
+}
+
+
+.content {
+    padding: 20px;
+}
+
+/* Lists
+    ------------------------------------------------------------------------ */
+
+li {
+    color: $color__white;
+}
+
+/* Background
+    ------------------------------------------------------------------------ */
+
+body {
+    background: $color__secondary;
+}
+
+/* Links
+    ------------------------------------------------------------------------ */
+
+a {
+    color: $color__primary;
+    text-decoration: none;
+
+    &:hover {
+        color: $color__primary;
+    }
+}
+
+/* Titles
+    ------------------------------------------------------------------------ */
+h1,
+h2,
+h3,
+h4 {
+    font-family: 'TitilliumWeb', sans-serif;
+    font-weight: bold;
+    text-align: left;
+    color: $color__white;
+}
+
+h1 {
+    font-size: 2.8rem;
+    line-height: 2.8rem;
+}
+
+h2 {
+    font-size: 2.6rem;
+    line-height: 2.6rem;
+    margin-bottom: 100px;
+}
+
+h3 {
+    font-size: 2rem;
+    line-height: 2rem;
+}
+
+h4 {
+    font-size: 1.8rem;
+    line-height: 1.8rem;
+}
+
+/* Animations
+    ------------------------------------------------------------------------ */
+
+.from-left {
+    position: relative;
+    animation-name: from-left;
+    animation-duration: 1s;
+}
+
+@keyframes from-left {
+    0% {
+        left: -500px;
+    }
+
+    100% {
+        left: 0;
+    }
+}
+
+.from-right {
+    position: relative;
+    animation-name: from-right;
+    animation-duration: 1s;
+}
+
+@keyframes from-right {
+    0% {
+        right: -500px;
+    }
+
+    100% {
+        right: 0;
+    }
+}
+
+/* Topnav
+    ------------------------------------------------------------------------ */
+
+.topbar {
+    text-align: left;
+    background: $color__ternary;
+    padding-left: 20px;
+
+    a {
+        padding: 20px;
+    }
+}
+
+/* Sidenav
+    ------------------------------------------------------------------------ */
+.menu_icon_sidenav {
+    z-index: 2;
+    width: fit-content;
+    height: auto;
+    background-color: #FC970B;
+    padding: 10px;
+    margin: 10px;
+    cursor: pointer;
+    position: fixed;
+    top: 0;
+    right: 0;
+    box-shadow: 0 0 10px $color__neutral;
+    border-radius: 100%;
+}
+
+.line1,
+.line2,
+.line3 {
+    width: 40px;
+    height: 4px;
+    margin: 10px 8px;
+    background-color: $color__white;
+    border-radius: 50px;
+    transition: 0.2s;
+}
+
+.active {
+    .line1 {
+        transform: translate(0px, 15px) rotate(45deg);
+    }
+
+    .line2 {
+        opacity: 0;
+    }
+
+    .line3 {
+        transform: translate(0px, -15px) rotate(-45deg);
+    }
+}
+
+.sidenav {
+    width: fit-content;
+    background-color: $color__neutral;
+    position: fixed;
+    text-align: center;
+    z-index: 1;
+    right: -500px;
+    pointer-events: none;
+    transition: 0.3s;
+    top: 0;
+    box-shadow: 0 0 10px $color__neutral;
+    overflow: scroll;
+
+    nav {
+        padding-top: 80px;
+        margin-right: 40px;
+
+        ul li {
+            list-style: none;
+            margin-bottom: 20px;
+            transition: 0.2s;
+
+            &:hover {
+                background-color: $color__secondary;
+                border-radius: 50px;
+            }
+
+            a {
+                font-size: 1.2rem;
+                padding: 10px 30px;
+                display: block;
+                text-decoration: none;
+                text-align: center;
+            }
+        }
+    }
+}
+
+.active_sidenav {
+    right: 0px;
+    pointer-events: fill;
+    position: fixed;
+    top: 0;
+    height: 100vh;
+    max-width: 100%;
+}
+
+
+/* Gaps
+    ------------------------------------------------------------------------ */
+
+.gap__20 {
+    height: 20px;
+}
+
+.gap__40 {
+    height: 40px;
+}
+
+.gap__80 {
+    height: 80px;
+}
+
+/* Boxes
+    ------------------------------------------------------------------------ */
+
+.box {
+    display: flex;
+    margin-top: 80px;
+    padding: 20px;
+    padding-bottom: 40px;
+    border: 2px solid $color__white;
+    box-shadow: 0 0 5px rgba(255, 255, 255, .2), 0 4px 4px rgba(0, 0, 0, .08);
+    flex-direction: column;
+    justify-content: space-between;
+
+    img {
+        max-width: 96px;
+        margin-left: auto;
+        margin-right: auto;
+        display: block;
+    }
+
+    &__title {
+        width: fit-content;
+        padding: 10px;
+        margin-top: 0;
+        margin-bottom: 0;
+        background: $color__secondary;
+        border: 0px solid $color__white;
+        translate: 0px -55px;
+        text-align: left;
+    }
+
+    &__link {
+        text-align: center;
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        @media screen and (min-width: 1080px) and (max-resolution: 1x) {
+            &:hover {
+                transform: scale(1.1);
+                transition: all .2s;
+            }
+        }
+    }
+}
+
+/* Logo
+    ------------------------------------------------------------------------ */
+
+.logo {
+    img {
+        width: 100%;
+        max-width: 500px;
+
+        @media screen and (min-width: 1080px) and (max-resolution: 1x) {
+            &:hover {
+                transform: scale(1.02);
+                transition: all .4s;
+            }
+        }
+    }
+}
+
+/* Header
+    ------------------------------------------------------------------------ */
+
+header {
+    position: relative;
+    color: $color__white;
+    text-align: left;
+
+    p {
+        font-size: 1.6rem;
+    }
+}
+
+header::before {
+    content: "";
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    background: $color__ternary;
+    z-index: -1;
+}
+
+
+
+header {
+    h1 {
+        text-align: left;
+        font-size: 4rem;
+    }
+}
+
+/* Services
+    ------------------------------------------------------------------------ */
+
+.article-services {
+    position: relative;
+    color: $color__white;
+    text-align: center;
+}
+
+.article-services::before {
+    content: "";
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    background: $color__secondary;
+    z-index: -1;
+}
+
+/* Footer
+    ------------------------------------------------------------------------ */
+
+footer {
+    background-color: $color__neutral;
+    padding: 40px;
+    box-shadow: 0 0 20px $color__neutral;
+}
+
+.botbar {
+    width: 100%;
+    display: flex;
+    font-size: 1rem;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    text-align: center;
+    color: $color__white;
+
+    p {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+/* About article
+    ------------------------------------------------------------------------ */
+
+.article-about {
+    position: relative;
+    color: $color__white;
+    text-align: center;
+
+    ::before {
+        content: "";
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        bottom: 0px;
+        left: 0px;
+        background: rgb(5 100 115/var(--tw-bg-opacity, 1));
+        z-index: -1;
+    }
+
+    h3 {
+        text-align: center;
+    }
+}
+
+/* hosting article
+    ------------------------------------------------------------------------ */
+
+.article-hosting {
+    position: relative;
+    color: $color__white;
+    text-align: left;
+
+    ::before {
+        content: "";
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        bottom: 0px;
+        left: 0px;
+        background: $color__secondary;
+        z-index: -1;
+    }
+}
+
+/* Contact
+    ------------------------------------------------------------------------ */
+
+.contact-form {
+    margin-right: 20px;
+    font-size: 0.8rem;
+    font-weight: bold;
+
+    input,
+    select,
+    textarea {
+        width: 100%;
+        font-size: 1rem;
+        padding: 10px;
+        border: 0;
+        flex: 1 1 auto;
+        margin: 10px 0;
+    }
+
+    &>* {
+        display: flex;
+        font-family: TitilliumWeb, sans-serif;
+    }
+
+    textarea {
+        min-height: 150px;
+        max-width: 100%;
+        box-shadow: 0 0 10px $color__neutral;
+    }
+}
+
+input:focus,
+textarea:focus {
+    outline: none;
+}
+
+.submit {
+    width: calc(100% + 22px) !important;
+    color: $color__white;
+    background-color: $color__primary;
+
+    &:hover {
+        cursor: pointer;
+    }
+}
+
+svg {
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    height: 64px;
+    width: auto;
+}
+
+/* Success
+    ------------------------------------------------------------------------ */
+
+.success {
+    padding: 20px;
+    background-color: #185833;
+}
+
+
+/* Responsive 1080px
+    ------------------------------------------------------------------------ */
+
+@media screen and (min-width: 1080px) and (max-resolution: 1x) {
+    .col--1-1 {
+        display: grid;
+        gap: 40px;
+        grid-template-columns: 1fr 1fr;
+        align-items: normal;
+    }
+
+    .col--1-2 {
+        display: grid;
+        gap: 40px;
+        grid-template-columns: 1fr 2fr;
+        align-items: normal;
+    }
+
+    .col--1-1-1 {
+        display: grid;
+        gap: 40px;
+        grid-template-columns: 1fr 1fr 1fr;
+        align-items: normal;
+    }
+
+    .col--1-1-2 {
+        display: grid;
+        gap: 40px;
+        grid-template-columns: 1fr 1fr 2fr;
+        align-items: normal;
+    }
+
+}
+
+/* Responsive 1200px
+    ------------------------------------------------------------------------ */
+
+@media screen and (min-width: 1200px) and (max-resolution: 1x) {
+    .content {
+        width: 1200px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
\ No newline at end of file
diff --git a/src/static/fonts/TitilliumWeb-Bold.woff2 b/src/static/fonts/TitilliumWeb-Bold.woff2
new file mode 100644
index 0000000..c34f134
Binary files /dev/null and b/src/static/fonts/TitilliumWeb-Bold.woff2 differ
diff --git a/src/static/fonts/TitilliumWeb-Regular.woff2 b/src/static/fonts/TitilliumWeb-Regular.woff2
new file mode 100644
index 0000000..82b27bc
Binary files /dev/null and b/src/static/fonts/TitilliumWeb-Regular.woff2 differ
diff --git a/src/static/images/calc.svg b/src/static/images/calc.svg
new file mode 100644
index 0000000..778c192
--- /dev/null
+++ b/src/static/images/calc.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#fff" width="800px" height="800px" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
+  <path d="M.75 0c-.41 0-.75.34-.75.75v5.5c0 .41.34.75.75.75h6.5c.41 0 .75-.34.75-.75v-5.5c0-.41-.34-.75-.75-.75h-6.5zm.25 1h1v1h-1v-1zm2 0h4v1h-4v-1zm-2 2h1v1h-1v-1zm2 0h4v1h-4v-1zm-2 2h1v1h-1v-1zm2 0h4v1h-4v-1z"/>
+</svg>
\ No newline at end of file
diff --git a/src/static/images/cloud.svg b/src/static/images/cloud.svg
new file mode 100644
index 0000000..cf3db6a
--- /dev/null
+++ b/src/static/images/cloud.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 13.6493C3 16.6044 5.41766 19 8.4 19L16.5 19C18.9853 19 21 16.9839 21 14.4969C21 12.6503 19.8893 10.9449 18.3 10.25C18.1317 7.32251 15.684 5 12.6893 5C10.3514 5 8.34694 6.48637 7.5 8.5C4.8 8.9375 3 11.2001 3 13.6493Z" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/static/images/clouds.svg b/src/static/images/clouds.svg
new file mode 100644
index 0000000..37a25e8
--- /dev/null
+++ b/src/static/images/clouds.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M5.38846 12.7023C3.98522 12.1237 3 10.7636 3 9.17807C3 7.42863 4.3 5.8125 6.25 5.5C6.86168 4.0617 8.30934 3 9.9978 3C12.1607 3 13.9285 4.65893 14.05 6.75C14.8721 7.10549 15.5169 7.83126 15.8166 8.69914M5.38846 12.7023C4.50928 13.5938 4 14.7867 4 16.0315C4 18.7755 6.28335 21 9.1 21L16.75 21C19.0972 21 21 19.1279 21 16.8185C21 15.1039 19.951 13.5202 18.45 12.875C18.3457 11.0905 17.3135 9.5483 15.8166 8.69914M5.38846 12.7023C6.11557 11.9651 7.0957 11.4339 8.25 11.25C9.04989 9.3802 10.943 8 13.151 8C14.1227 8 15.0333 8.25474 15.8166 8.69914" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/static/images/drop.svg b/src/static/images/drop.svg
new file mode 100644
index 0000000..873e387
--- /dev/null
+++ b/src/static/images/drop.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 21V11M12 11L9 14M12 11L15 14M7 16.8184C4.69636 16.2074 3 14.1246 3 11.6493C3 9.20008 4.8 6.9375 7.5 6.5C8.34694 4.48637 10.3514 3 12.6893 3C15.684 3 18.1317 5.32251 18.3 8.25C19.8893 8.94488 21 10.6503 21 12.4969C21 14.8148 19.25 16.7236 17 16.9725" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/static/images/favicon.webp b/src/static/images/favicon.webp
new file mode 100644
index 0000000..008d47b
Binary files /dev/null and b/src/static/images/favicon.webp differ
diff --git a/src/static/images/git.svg b/src/static/images/git.svg
new file mode 100644
index 0000000..4409b5a
--- /dev/null
+++ b/src/static/images/git.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4142 3.82843C12.6332 3.04738 11.3668 3.04738 10.5858 3.82843L9.91421 4.5L11.482 6.06774C11.6472 6.02356 11.8208 6 12 6C13.1046 6 14 6.89543 14 8C14 8.17916 13.9764 8.35282 13.9323 8.51804L15.982 10.5677C16.1472 10.5236 16.3208 10.5 16.5 10.5C17.6046 10.5 18.5 11.3954 18.5 12.5C18.5 13.6046 17.6046 14.5 16.5 14.5C15.3954 14.5 14.5 13.6046 14.5 12.5C14.5 12.3208 14.5236 12.1472 14.5677 11.982L13 10.4142V15.2676C13.5978 15.6134 14 16.2597 14 17C14 18.1046 13.1046 19 12 19C10.8954 19 10 18.1046 10 17C10 16.2597 10.4022 15.6134 11 15.2676V9.73244C10.4022 9.38663 10 8.74028 10 8C10 7.82084 10.0236 7.64718 10.0677 7.48196L8.5 5.91421L3.82843 10.5858C3.04738 11.3668 3.04738 12.6332 3.82843 13.4142L10.5858 20.1716C11.3668 20.9526 12.6332 20.9526 13.4142 20.1716L20.1716 13.4142C20.9526 12.6332 20.9526 11.3668 20.1716 10.5858L13.4142 3.82843ZM9.17157 2.41421C10.7337 0.852115 13.2663 0.852119 14.8284 2.41422L21.5858 9.17157C23.1479 10.7337 23.1479 13.2663 21.5858 14.8284L14.8284 21.5858C13.2663 23.1479 10.7337 23.1479 9.17157 21.5858L2.41421 14.8284C0.852115 13.2663 0.852119 10.7337 2.41422 9.17157L9.17157 2.41421Z" fill="#fff"/>
+</svg>
\ No newline at end of file
diff --git a/src/static/images/list.svg b/src/static/images/list.svg
new file mode 100644
index 0000000..d4598c6
--- /dev/null
+++ b/src/static/images/list.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" width="800px" height="800px" fill="#000000">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <style type="text/css"> .st0{fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st1{fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;} </style> <polyline class="st0" points="2,16 12,22 22,16 "/> <path class="st0" d="M18,11H6c-2.2,0-4,1.8-4,4v10c0,2.2,1.8,4,4,4h12c2.2,0,4-1.8,4-4V15C22,12.8,20.2,11,18,11z"/> <line class="st0" x1="21.5" y1="13.1" x2="30" y2="8"/> <path class="st0" d="M22,21h4c2.2,0,4-1.8,4-4V7c0-2.2-1.8-4-4-4H14c-2.2,0-4,1.8-4,4v4"/> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/static/images/mail.svg b/src/static/images/mail.svg
new file mode 100644
index 0000000..2e400bf
--- /dev/null
+++ b/src/static/images/mail.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 8L17.4392 9.97822C15.454 11.0811 14.4614 11.6326 13.4102 11.8488C12.4798 12.0401 11.5202 12.0401 10.5898 11.8488C9.53864 11.6326 8.54603 11.0811 6.5608 9.97822L3 8M6.2 19H17.8C18.9201 19 19.4802 19 19.908 18.782C20.2843 18.5903 20.5903 18.2843 20.782 17.908C21 17.4802 21 16.9201 21 15.8V8.2C21 7.0799 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V15.8C3 16.9201 3 17.4802 3.21799 17.908C3.40973 18.2843 3.71569 18.5903 4.09202 18.782C4.51984 19 5.07989 19 6.2 19Z" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/static/images/netmail.webp b/src/static/images/netmail.webp
new file mode 100644
index 0000000..4823258
Binary files /dev/null and b/src/static/images/netmail.webp differ
diff --git a/src/static/images/other.svg b/src/static/images/other.svg
new file mode 100644
index 0000000..c7a5488
--- /dev/null
+++ b/src/static/images/other.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#ffffff" width="800px" height="800px" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <title/> <g> <path d="M48,0A24.0275,24.0275,0,0,0,24,24a6,6,0,0,0,12,0,12,12,0,0,1,24,0c0,5.2031-3.0586,8.3965-8.0859,13.0371C47.2617,41.32,42,46.1719,42,54a6,6,0,0,0,12,0c0-2.4434,2.2969-4.6875,6.0469-8.1445C65.0859,41.2031,72,34.834,72,24A24.0275,24.0275,0,0,0,48,0Z"/> <path d="M48,72A12,12,0,1,0,60,84,12.0119,12.0119,0,0,0,48,72Z"/> </g> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/static/images/pad.svg b/src/static/images/pad.svg
new file mode 100644
index 0000000..c0d79df
--- /dev/null
+++ b/src/static/images/pad.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#fff" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <path d="M27,3H5A1,1,0,0,0,5,5H27a1,1,0,0,0,0-2Z"/>
+    <path d="M27,7H5A1,1,0,0,0,5,9H27a1,1,0,0,0,0-2Z"/>
+    <path d="M27,11H5a1,1,0,0,0,0,2H27a1,1,0,0,0,0-2Z"/>
+    <path d="M27,15H5a1,1,0,0,0,0,2H27a1,1,0,0,0,0-2Z"/>
+    <path d="M27,19H5a1,1,0,0,0,0,2H27a1,1,0,0,0,0-2Z"/>
+    <path d="M27,23H5a1,1,0,0,0,0,2H27a1,1,0,0,0,0-2Z"/>
+    <path d="M27,27H5a1,1,0,0,0,0,2H27a1,1,0,0,0,0-2Z"/>
+</svg>
\ No newline at end of file
diff --git a/src/static/js/sidenav.js b/src/static/js/sidenav.js
new file mode 100644
index 0000000..029bfc7
--- /dev/null
+++ b/src/static/js/sidenav.js
@@ -0,0 +1,14 @@
+let menu_icon_sidenav = document.querySelector(".menu_icon_sidenav");
+let sidenav = document.querySelector(".sidenav");
+
+menu_icon_sidenav.onclick = function () {
+    menu_icon_sidenav.classList.toggle("active");
+    sidenav.classList.toggle("active_sidenav");
+}
+
+document.onclick = function (e) {
+    if (!menu_icon_sidenav.contains(e.target) && !sidenav.contains(e.target)) {
+        menu_icon_sidenav.classList.remove("active");
+        sidenav.classList.remove("active_sidenav");
+    }
+}
diff --git a/src/templates/base.html b/src/templates/base.html
new file mode 100644
index 0000000..8dbbc4c
--- /dev/null
+++ b/src/templates/base.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="robots" content="index, follow">
+    <title>NETig</title>
+    <meta name="description"
+        content="Vous cherchez des services en ligne mais vous ne souhaitez pas confier vos données aux GAFAM ? Vous êtes au bon endroit !">
+    <link rel="canonical" href="https://netig.net/">
+    <link rel="icon" type="image/x-icon" href="{{ get_url(path="images/favicon.webp") }}">
+    <link rel="stylesheet" href="{{ get_url(path="css/style.css") }}">
+</head>
+
+<body>
+    <header class="">
+        <div class="topbar">
+            <a class="" href="https://webmail.netig.net" target="_blank">NETmail</a>
+            <a class="" href="https://cloud.netig.net" target="_blank">NETcloud</a>
+            <a class="" href="https://git.netig.net" target="_blank">NETgit</a>
+
+        </div>
+        <div class="menu_icon_sidenav">
+            <div class="line1"></div>
+            <div class="line2"></div>
+            <div class="line3"></div>
+        </div>
+        <div class="sidenav">
+            <nav>
+                <ul>
+                    <li><a href="/#">Accueil</a></li>
+                    <li><a href="/#services">Services</a></li>
+                    <li><a href="/#about">À propos</a></li>
+                    <li><a href="/#hosting">Hébergement</a></li>
+                    <li><a href="/maintenance">Maintenance et incidents</a></li>
+                    <li><a href="/contact">Contact</a></li>
+                </ul>
+            </nav>
+        </div>
+        <div class="content col--1-2">
+            <div>
+                <a class="logo" href="/#"><img class="logo" src="{{ get_url(path="images/favicon.webp") }}"
+                        alt="Logo"></a>
+            </div>
+            <div>
+                <a href="/#"><h1>NETig</h1></a>
+                <p><strong>Vous cherchez des services en ligne mais vous ne souhaitez pas confier vos
+                        données aux GAFAM ? Vous êtes au bon endroit !</strong></p>
+            </div>
+        </div>
+    </header>
+    <main>
+        <div>
+            {% block content %} {% endblock %}
+        </div>
+    </main>
+    <footer>
+        <div class="botbar">
+            <p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title"
+                    rel="cc:attributionURL" href="https://netig.net">NETig website</a> by <span
+                    property="cc:attributionName">Julien Debrousse</span> is licensed under <a
+                    href="https://creativecommons.org/licenses/by/4.0/?ref=chooser-v1" target="_blank"
+                    rel="license noopener noreferrer" style="display:inline-block;">CC BY 4.0<img
+                        style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
+                        src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img
+                        style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
+                        src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt=""></a></p>
+            <p>
+                <a href="/legal">Mentions Légales</a>
+            </p>
+            <p>
+                Made with ❤️ with <a href="https://www.getzola.org/" target="_blank">Zola</a> !
+            </p>
+        </div>
+        <script src="{{ get_url(path="js/sidenav.js") }}"></script>
+    </footer>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/templates/contact.html b/src/templates/contact.html
new file mode 100644
index 0000000..fb624cb
--- /dev/null
+++ b/src/templates/contact.html
@@ -0,0 +1,27 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="content">
+    <h2>{{ page.title }}</h2>
+    <article class="article-contact">
+        <div class="col--1-1">
+            <div>
+                <p>Vous avez un projet en tête ? Un service vous intéresse ? Ou simplement une question ? Ce formulaire
+                    est
+                    là pour ça !</p>
+            </div>
+            <form action="https://p2e.netig.net/" method="post" class="contact-form">
+                <input type="hidden" name="REDIRECT" value="https://netig.net/success" />
+                <input type="email" name="REPLY_TO" placeholder="Email" class="contact-form-input" required>
+                <input type="hidden" name="Source" value="Formulaire de contact" />
+                <input type="text" name="Nom" maxlength="128" placeholder="Nom" class="contact-form-input" required>
+                <input type="text" name="SUBJECT" maxlength="256" placeholder="Objet" class="contact-form-input"
+                    required>
+                <textarea name="Message" cols="40" rows="10" placeholder="Message" class="contact-form-input"
+                    required></textarea>
+                <input type="submit" value="Envoyer" class="submit">
+            </form>
+        </div>
+    </article>
+</div>
+{% endblock content %}
\ No newline at end of file
diff --git a/src/templates/index.html b/src/templates/index.html
new file mode 100644
index 0000000..04c4ee0
--- /dev/null
+++ b/src/templates/index.html
@@ -0,0 +1,176 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+<article class="article-services">
+    <div class="anchor" id="services"></div>
+    <div class="content">
+        <h2>Services en libre accès</h2>
+        <div class="col--1-1-1">
+            <a class="box box__link" href="https://calc.netig.net" target="_blank">
+                <h3 class="box__title">NETcalc</h3>
+                <p>Tableur en ligne collaboratif, similaire à Framacalc.</p>
+            </a>
+            <a class="box box__link" href="https://pad.netig.net" target="_blank">
+                <h3 class="box__title">NETpad</h3>
+                <p>Éditeur de texte en ligne collaboratif, similaire à Framapad.</p>
+            </a>
+            <a class="box box__link" href="https://drop.netig.net" target="_blank">
+                <h3 class="box__title">NETdrop</h3>
+                <p>Partage de fichiers jusqu'à 1Go, similaire à Framadrop.</p>
+            </a>
+        </div>
+    </div>
+</article>
+
+<article class="article-about">
+    <div class="anchor" id="about"></div>
+    <div class="content col--1-1-1">
+        <div>
+            <h3>Quoi ?</h3>
+            <p>Tous les outils numérique dont vous pouriez avoir besoin en tant que particulier, association ou petite
+                entreprise : des boîtes mail, du stockage en ligne, des outils de travail collaboratif, un service de
+                partage de fichiers volumineux, une forge logicielle, des listes de diffusion... et plus encore !
+            </p>
+        </div>
+        <div>
+            <h3>Comment ?</h3>
+            <p>L'ensemble des services sont fournis depuis un VPS chez <a href="https://hostup.se/en/"
+                    target="_blank">HostUp</a> en Suède et conteneurisés, c'est à dire isolés les uns des autres
+                pour améliorer la sécurité, la reproductibilité et l'automatisation. Le stockage est redondant sur deux
+                disques en cas de défaillance matérielle. Les données sont sauvegardées automatiquement une fois par
+                semaine et stockées sur le serveur ainsi qu'en Allemagne chez <a href="https://www.hetzner.com/"
+                    target="_blank">Hetzner</a>. Utilisation exclusive de logiciels sous licences libres.</p>
+        </div>
+        <div>
+            <h3>Pourquoi ?</h3>
+            <p>Je suis un petit hébergeur, en utilisant mes services vous gardez le contrôle sur vos données et
+                participez à un internet libre et décentralisé. Ici vos données ne seront en aucun cas marchandées ni
+                utilisées à toute autre fin que de fournir le service demandé. Je participe également à ma mesure à la
+                distribution Linux utilisée en mettant à disposition <a href="https://chimera.netig.net/"
+                    target="_blank">un mirroir</a>.</p>
+        </div>
+    </div>
+</article>
+
+<article class="article-hosting">
+    <div class="anchor" id="hosting"></div>
+    <div class="content">
+        <h2>Offres d'hébergement</h2>
+        <p>Si un service vous intéresse <a class="link" href="/contact">contactez-moi</a>, vous
+            avez un mois d'essai à compter de la mise à disposition avant le premier paiement.</p>
+        <div>
+            <div class="box">
+                <h3 class="box__title">NETmail - Adresse mail</h3>
+                <div class="col--1-1-2">
+                    <div>
+                        <img src="{{ get_url(path="images/mail.svg") }}" alt="">
+                    </div>
+                    <div>
+                        <ul>
+                            <li>2€/mois 5Go</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <p>Adresse mail en @netig.net ou votre nom de domaine (12€ de frais de mise en place
+                            supplémentaire), consultable depuis un webmail ou depuis votre client mail habituel.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="box">
+                <h3 class="box__title">NETcloud - Compte Nextcloud</h3>
+                <div class="col--1-1-2">
+                    <div>
+                        <img src="{{ get_url(path="images/cloud.svg") }}" alt="">
+                    </div>
+                    <div>
+                        <ul>
+                            <li>1€/mois 1Go</li>
+                            <li>2€/mois 5Go</li>
+                            <li>2€/mois + 5Go</li>
+                            <li>2€/mois option Collabora</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <p>Un compte Nextcloud pour stocker vos fichiers, photos, et agendas en ligne. Suite bureautique
+                            complète en option avec Collabora.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="box">
+                <h3 class="box__title">NETcloud - Instance Nextcloud</h3>
+                <div class="col--1-1-2">
+                    <div>
+                        <img src="{{ get_url(path="images/clouds.svg") }}" alt="">
+                    </div>
+                    <div>
+                        <ul>
+                            <li>20€/mois 5Go</li>
+                            <li>2€/mois + 5Go</li>
+                            <li>8€/mois option Collabora</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <p>Votre propre instance Nextcloud privée pour plusieurs comptes.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="box">
+                <h3 class="box__title">NETgit - Compte Gitea</h3>
+                <div class="col--1-1-2">
+                    <div>
+                        <img src="{{ get_url(path="images/git.svg") }}" alt="">
+                    </div>
+                    <div>
+                        <ul>
+                            <li>2€/mois</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <p>Forge logicielle.</p>
+                    </div>
+                </div>
+
+            </div>
+            <div class="box">
+                <h3 class="box__title">NETlist - Instance Listmonk</h3>
+                <div class="col--1-1-2">
+                    <div>
+                        <img src="{{ get_url(path="images/list.svg") }}" alt="">
+                    </div>
+                    <div>
+                        <ul>
+                            <li>8€/mois</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <p>Listes de diffusion avec page d'inscription et d'archives publiques. Pas de limite sur le
+                            nombre d’abonnés ni sur le nombre de listes. Possibilité d’utiliser une ou plusieurs
+                            adresses mail d’expédition @netig.net ou tout autre fournisseur. Conforme RGPD.
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div class="box">
+                <h3 class="box__title">Autre</h3>
+                <div class="col--1-1-2">
+                    <div>
+                        <img src="{{ get_url(path="images/other.svg") }}" alt="">
+                    </div>
+                    <div>
+                        <ul>
+                            <li>Sur devis</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <p>Vous avez autre chose en tête ? Un site ou une application web à héberger ? <a class="link"
+                                href="/contact">Demandez-moi</a> !
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</article>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/src/templates/maintenance.html b/src/templates/maintenance.html
new file mode 100644
index 0000000..e20cb56
--- /dev/null
+++ b/src/templates/maintenance.html
@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="content">
+    <h2>{{ page.title }}</h2>
+    <article class="article-report">
+        <p>Information : Brève interruption de l'ensemble des services tous les lundi matins à 4h pour sauvegarde.
+        </p>
+        <div class="col--1-1-1">
+            <a class="box box__link" href="https://status.netig.net/status/services" target="_blank">État des
+                services
+                en
+                temps réel</a>
+            <a class="box box__link" href="https://list.netig.net/archive" target="_blank">Maintenances et
+                incidents
+                signalés</a>
+            <a class="box box__link" href="https://list.netig.net/subscription/form" target="_blank">Recevoir
+                les
+                notifications par mail</a>
+        </div>
+    </article>
+</div>
+{% endblock content %}
\ No newline at end of file
diff --git a/src/templates/page.html b/src/templates/page.html
new file mode 100644
index 0000000..3676bcf
--- /dev/null
+++ b/src/templates/page.html
@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="content">
+    <h2>{{ page.title }}</h2>
+    {{ page.content | safe }}
+</div>
+{% endblock content %}
\ No newline at end of file
diff --git a/src/templates/success.html b/src/templates/success.html
new file mode 100644
index 0000000..c58ba2a
--- /dev/null
+++ b/src/templates/success.html
@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="content">
+    <p class="success">Message envoyé, retourner à la <a href="/#">page d'accueil</a> !</p>
+    
+</div>
+{% endblock content %}
\ No newline at end of file