first commit

.env

@@ -0,0 +1,4 @@
+ALLOW_ORIGIN=taal-academie.arree.bzh
+#DSN=
+RECIPIENT=taal-academie@arree.bzh
+SENDER=taal-academie@arree.bzh

.gitignore

@@ -0,0 +1 @@
+public/

Dockerfile

@@ -0,0 +1,9 @@
+FROM ghcr.io/getzola/zola:v0.21.0 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

README.md

@@ -0,0 +1 @@
+# taal-academie.arree.bzh

compose.yml

@@ -0,0 +1,27 @@
+services:
+  post-to-email:
+    image: matthiasmullie/post-to-email
+    container_name: p2etaal-academiearreebzh_post-to-email
+    networks:
+      - mailserver
+    env_file:
+      - .env
+      - ../passwords/p2etaal-academiearreebzh.pass
+    ports:
+      - "127.0.0.1:9013: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: taal-academiearreebzh_zola
+    ports:
+      - "127.0.0.1:8001:80"
+    restart: unless-stopped
+networks:
+  mailserver:
+    external: true

src/config.toml

@@ -0,0 +1,16 @@
+# The URL the site will be built for
+base_url = "https://taal-academie.arree.bzh"
+
+# 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

src/content/about.md

@@ -0,0 +1,16 @@
++++
+title = "Bio"
+slug = "about"
+template = "page.html"
++++
+
+Diplômé des Arts Graphiques et des Arts Plastiques, Harjit Singh commence ses études de batterie en
+1984, et étudie le tabla, dès 1993 en Inde auprès des plus grands maîtres de la tradition classique, puis toutes
+les percussions folks et classiques du Nord de l'Inde (pakhawaj et jorhi, dholak, dhol, naqara, khartals du
+Rajasthan), ainsi que le chant indien, la vièle sarangi et le Gatka (Art Martial indien) en 1999, qu'il
+enseigne depuis à tout les publics, en Bretagne, en France et en Europe. Il anime pendant dix ans, à la
+Cité de la musique, des ateliers pédagogiques.
+
+Il accompagne régulièrement la danse indienne et récitals de musique hindustani, ainsi que des créations
+plus contemporaines et transversales, compose pour le cinéma et la télévision et anime également des
+stages de cuisine indienne et alimentation vivante.

src/content/cooking.md

@@ -0,0 +1,122 @@
++++
+title = "Cuisine"
+slug = "cooking"
+template = "page.html"
++++
+
+<div class="banner">
+    <h3>Idées cadeau à offrir pour les fêtes et toute l’année</h3>
+    <p>(dans la limite des places disponibles)</p>
+    <h4>Offrez des Cartes Cadeau pour un Atelier de Cuisine Indienne</h4>
+    <p>
+        Ces ateliers (voir Descriptif d'un atelier) de 4h se déroulent de 15h à 19h (+ temps du repas) et
+        certains pourront aussi se dérouler en matinée (9h-13h) selon la demande.
+        Faites-moi savoir les dates que souhaiteriez réserver, afin que je vous envoie des Cartes Cadeaux
+        dès
+        que possible.
+    </p>
+</div>
+<div>
+    <h3>Atelier de Cuisine Indienne Végéta*ienne</h3>
+    <p>
+        Lieu : Cuisine de la salle des fêtes<br>
+        362 Impasse de la Salle des Fêtes, 29190 Brasparts
+    </p>
+    <p>
+        Durée : 4 h (+ temps du repas)
+    </p>
+    <p>
+        Langue : Français, Anglais
+    </p>
+    <h4>Venez apprendre à cuisiner avec les épices de l'Inde</h4>
+    <p>
+        Dans cet atelier de cuisine authentique indienne et végétarienne/végétalienne*, je vous propose
+        d'apprendre
+        à réaliser un thali du Nord ou du Sud de l'Inde (repas complet et traditionnel de recettes de tout les
+        jours, faciles à réaliser avec des légumes de saison et locaux, servi sur le thali) comprenant :
+    </p>
+    <ul>
+        <li>1 entrée</li>
+        <li>1 plat de légumineuses (dal) ou 1 plat de légumes</li>
+        <li>1 accompagnement (pains indiens/chapati/paratha)</li>
+        <li>1 dessert</li>
+    </ul>
+    <p>
+        Tout les ingrédients sont issus de l'agriculture biologique (sauf quelques épices indiennes que je
+        commande
+        en Inde)
+    </p>
+    <p>
+        Déroulement de l'atelier :
+    </p>
+    <ul>
+        <li>Présentation des épices et de leurs vertus.</li>
+        <li>Confection des plats et des galettes de pains.</li>
+        <li>Nous terminerons cet atelier par la dégustation des recettes réalisées ensemble et présentées dans
+            la
+            vaisselle indienne traditionnelle en inox (bartan)
+        </li>
+    </ul>
+    <p>Prévoir :</p>
+    <ul>
+        <li>un tablier</li>
+        <li>un rouleau à pâtisserie pour la confection des pains</li>
+        <li>un couteau de cuisine</li>
+        <li>une planche à découper</li>
+        <li>de quoi noter les recettes</li>
+        <li>le temps de repas au delà de 19h</li>
+    </ul>
+    <p>
+        Tarif : 50 euros par participant-e
+    </p>
+    <p>
+        Informations et inscription via taal.academie@gmail.com ou taal-academie@arree.bzh
+        06 24 20 76 09 taal-academie.arree.bzh > pour découvrir les autres dates d'atelier (1 à 2 fois par mois)<br>
+    </p>
+    <p>
+        *(précisez-moi vos intolérances et allergies – lactose, gluten, sucre, oignon, piment, ...)
+    </p>
+    <p>
+        Au plaisir de partager avec vous ces saveurs de l'Inde, qui enchantent mon quotidien depuis 30 ans, dans
+        la
+        joie et la bonne humeur !<br>
+    </p>
+    <p>
+        Harjit
+    </p>
+    <p>
+        <strong>Ces ateliers peuvent se dérouler chez vous, dès que vous avez un groupe de personnes intéressées
+            (15
+            maximum) et l'espace (une cuisine équipée ou non) pour accueillir un atelier (9H -13H ou 15h - 19h +
+            temps
+            du repas)</strong>
+    </p>
+    <h3><br>Chef à domicile</h3>
+    <p>
+        Pour vos déjeuner ou dîner entre amis, fêtes, anniversaires, ... je me déplace dans le Finistère et
+        proche
+        Cotes d'Armor, Morbihan pour vous faire découvrir la gastronomie de la cuisine indienne authentique et
+        vous
+        proposer un menu complet végétarien ou végétalien/vegan*, servi dans la vaisselle indienne (thali en
+        inox),
+        cuisiné au feu de bois et livré chez vous ou cuisiné sur place (les dernières préparations seront
+        cuisinées
+        sur place - chapati, paratha,...) pour une fraîcheur optimale.
+    </p>
+    <p>
+        *(précisez-moi vos intolérances et allergies – lactose, gluten, sucre, oignon, piment, ...)
+    </p>
+    <p>
+        Menus au choix :
+    </p>
+    <ul>
+        <li>Inde du nord (Cachemire, Panjab, Rajasthan, Gujarat, ...)</li>
+        <li>Inde de l'Est (Bengal, Orissa)</li>
+        <li>Inde du Sud (Maharastra, Kerala, Tamil Nadu, ...)</li>
+    </ul>
+    <br>
+    <div class="press">
+        <iframe
+            src="https://www.letelegramme.fr/finistere/brasparts-29190/ils-sinitient-a-la-cuisine-indienne-a-brasparts-6467105.php"></iframe>
+    </div>
+</div>

src/content/drums.md

@@ -0,0 +1,128 @@
++++
+title = "Percussions & Musique"
+slug = "drums"
+template = "page.html"
++++
+
+## Tabla
+
+Instrument emblématique de l’Inde du Nord, le tabla est une percussion digitale, un instrument soliste doté d’un riche
+répertoire solo avant d’être un instrument d’accompagnement. Il est employé dans la musique classique Hindustani (vocale
+et instrumentale) et semi-classique, les musiques folk, la musique de film, les musiques pop et commerciales, les
+musiques dévotionnelles (Bhajan, Kirtan, Qawwali), le Jazz, la Fusion, les musiques électroniques.
+
+
+Des cours, stages, master class, sessions d’enregistrement, vente et réparations d’instruments vous sont proposés ( en
+présentiel et en visio, en Français, Anglais et Breton ). Nul besoin de connaître le solfège pour apprendre.
+Nous contacter pour en savoir plus.
+
+Biographie succincte :
+
+- Disciple de Pandit Subhankar Banerjee (Farrukhabad Gharana), Calcutta, Inde 2003-2011
+- Disciple de Pandit Kishan Maharaj (Varanasi Gharana), Bénarès, Inde 1999
+- étudie avec Sri Pavan Kumar Verma (Panjābi Gharana), Chandigarh, Inde 1999
+- étudie avec Sri Krisna Govinda K.C. (Lucknow & Panjābi Gharana), Paris 1993-1997
+
+## Pakhawaj
+
+Instrument emblématique de la musique et du chant Dhrupad, (la forme de musique sacrée la plus des temples de l’Inde du
+Nord la plus ancienne). Le Pakhawaj est une percussion qui «chante», et dont l’origine est antérieure au Tabla.
+Instrument roi, il est doté de fréquences riches en harmoniques proches du bourdon des cloches d’église. C’est un
+instrument d’accompagnement, employé dans la musique classique Hindustani, la musique de film, les musiques
+dévotionnelles (Bhajan, Kirtan), les danses classiques Kathak et Odissi.
+
+Des cours, stages, master class, sessions d’enregistrement, vente et réparations d’instruments vous sont proposés ( en
+présentiel et en visio, en Français, Anglais et Breton ). Nul besoin de connaître le solfège pour apprendre.
+Nous contacter pour en savoir plus.
+
+Biographie succinte :
+
+- étudie avec Sri Jatinder Pal Singh, Jalhandar, Inde 2012
+- étudie avec Pandit Mohan Shyam Sharma, Delhi, Inde 2008
+
+## Khartal
+
+Khartal du Rajasthan
+
+Instrument emblématique du Rajasthan (Nord-Ouest de l’Inde), les Khartal sont une percussion manuelle d’une grande
+dextérité, un instrument d’accompagnement mais aussi soliste, employé traditionnellement dans la musique du Désert du
+Thar par les Manghaniyar, les musiques dévotionnelles (Bhajan et Qawwali, Soufie ) et depuis, les musiques folk, la
+musique de film, le Jazz, la Fusion, les musiques électroniques.
+
+Des cours, stages, master class, sessions d’enregistrement, vente d’instruments vous sont proposés ( en présentiel et en
+visio, en Français, Anglais et Breton ). Nul besoin de connaître le solfège pour apprendre.
+Nous contacter pour en savoir plus.
+
+Biographie succinte :
+
+- Étudie avec Imamddin Khan Manghaniyar - Jaisalmer, Inde 2007
+- Kalakar Colony, Jaipur, Inde 2007
+
+## Dholak
+
+Percussion digitale bifaces, répandue dans toute l’Inde, elle est employée dans la musique folk, la musique
+dévotionnelle (Bhajan, Kirtan, Qawwali, Sufiana Kalam), la danse, la musique de film, la Fusion.
+
+Des cours, stages, master class, sessions d’enregistrement, vente et réparations vous sont proposés ( en présentiel et
+en visio, en Français, Anglais et Breton ). Nul besoin de connaître le solfège pour apprendre.
+Nous contacter pour en savoir plus.
+
+Biographie succinte :
+
+- Étudie avec Firoz Khan Manghaniyar - Jaisalmer, Inde 2007
+
+## Dhol
+
+Dhol du Panjāb
+
+Instrument emblématique de la musique folk du Panjāb (Inde du Nord), et soufie du Panjāb pakistanais, le Dhol est une
+percussion à baguettes dont l’origine remonte au 15e siècle en Perse. C’est un instrument soliste et d’accompagnement,
+employé dans les musiques et danses Bhangra et Giddha, la musique de film, les musiques dévotionnelles Soufies, dans les
+Dargah (mausolés des saints Soufi), dans le Gatka (Art Martial Sikh).
+
+Des cours, stages, master class, sessions d’enregistrement, vente et réparations d’instruments vous sont proposés ( en
+présentiel et en visio, en Français, Anglais et Breton ). Nul besoin de connaître le solfège pour apprendre.
+Nous contacter pour en savoir plus.
+
+Biographie succinte :
+
+- étudie avec Mithu Sain - Lahore, Pakistan 2009
+- étudie avec Kulvinder Kumar - Panjāb, Inde 2004
+
+## Dhadh
+
+Dhadh du Panjāb
+
+Instrument des Dhadhi (Bardes Sikhs du Panjāb, Inde du Nord), le Dhadh est une percussion digitale en forme de sablier,
+appartenant à la famille du Dhamaru dont l’origine remonte à l’époque de Shiva. C’est un instrument d’accompagnement du
+Totta (vièle Sarangi folk du Panjāb), employé traditionnellement dans la musique dévotionnelle sikhe (Dhadhi jatha) et
+la musique de film.
+
+Des cours, stages, master class, sessions d’enregistrement, vente et réparations d’instruments vous sont proposés ( en
+présentiel et en visio, en Français, Anglais et Breton ). Nul besoin de connaître le solfège pour apprendre.
+Nous contacter pour en savoir plus.
+
+Biographie succinte :
+
+- étudie avec Pyara Singh Premi – Sangrur, Inde 2011
+
+## Konnakol
+
+Konnakol
+
+Le Konnakol est un art de la percussion vocale polyrythmique issu de la musique Carnatique du sud de l'Inde.
+Il consiste à apprendre et à chanter la subtile science des combinaisons de syllabes récitées tout en comptant simultanément le Tala (cycle rythmique) frappé dans les mains.
+
+
+Des cours, stages, master class, sessions d’enregistrement vous sont proposés, ( en présentiel et en visio, en Français, Anglais et Breton ). Nul besoin de connaître le solfège pour apprendre.
+Nous contacter pour en savoir plus.
+
+## Shrikhol
+
+Shrikhol / Mridang
+
+Instrument du Nord-Est de l’Inde, le Shrikhol (aussi appelé Mridang) est une percussion digitale en terre cuite, (mais aussi en cuivre ou fibre-glass depuis). Il est  employé traditionnellement dans les musiques folk et dévotionnelles du Bengale et du Bangladesh (par les Baul, Fakir et dévots de Krishna), la musique de film, les musiques pop et commerciales. Il existe sous une forme sensiblement différente, plus à l’Est, dans l’État de Manipur, sous le nom de Manipuri Khol.
+
+
+Des cours, stages, master class, sessions d’enregistrement, vente et réparations d’instruments vous sont proposés ( en présentiel et en visio, en Français, Anglais et Breton ). Nul besoin de connaître le solfège pour apprendre.
+Nous contacter pour en savoir plus.

src/content/gatka.md

@@ -0,0 +1,56 @@
++++
+title = "Gatka"
+slug = "gatka"
+template = "page.html"
++++
+
+<h3>Harjit Singh</h3>
+<p>
+    Après avoir senti très tôt l'appel de l'Épée, et dédié sa vie à la musique et à l'art, Harjit Singh
+    commence
+    par pratiquer l'escrime dans ses jeunes années, avec un Maître d'Arme, en France.
+</p>
+<p>
+    Ses études de graphisme et d'arts plastiques terminées, il débute dès 1993, le long apprentissage
+    traditionnel des rythmes et percussions classiques et folks Hindustani (tabla, pakhawaj, naqara,
+    dhol et
+    dholak...), auprès de différents Maîtres, en Inde du Nord.
+</p>
+
+<p>
+    Il y découvre les traditions du Panjab dès 1999, là où naît son amour pour le Gatka, et le Dharma
+    Sikh.
+</p>
+<p>
+    Il rejoint depuis le premier Akharaa (espace d'entraînement) de Gatka, dans le premier Gurdwara
+    (lieu de
+    culte Sikh) près de Paris et se produit dans toute l'Europe au sein du groupe 'Miri Piri Gatka
+    Akharaa'.
+    Aujourd'hui, Harjit Singh ouvre au grand public pour la première fois en Bretagne l'enseignement du
+    Gatka
+    associé au Shakti Yoga.
+</p>
+<p>
+    Longtemps enseigné dans l'enceinte des temples Sikhs, et transmis aux seuls initiés baptisés par
+    l'Amrit
+    et
+    adoubés par l'épée, le Gatka est un art martial que les Sikhs ont développé au plus haut niveau.
+</p>
+<p>
+    En rendant le Gatka accessible à tous, Harjit Singh souhaite offrir à chacun-e l'expérience de la
+    Grâce,
+    la
+    rencontre avec sa dimension divine et son guerrier intérieur.
+</p>
+
+<div class="youtube-video-container">
+    <iframe width="1195" height="672" src="https://www.youtube.com/embed/9taHckciFrI"
+        title="LE GATKA AU 33EME FESTIVAL DES ARTS MARTIAUX" frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowfullscreen></iframe>
+</div>
+<p>Démonstration de Gatka au 33ème festival des arts martiaux<br>
+    Tradition : Shastar Vidya / Gatka / Raj Yoga</p>
+<a class="icon" href="https://www.facebook.com/gatkashaktiyoga" target="_blank"><img src="images/facebook.svg"
+        width="46px" height="46px" alt="Facebook">
+</a>

src/content/success.md

@@ -0,0 +1,9 @@
++++
+title = "Assitôt dit, assitôt..."
+slug = "success"
+template = "page.html"
++++
+
+<div class="content">
+    <p class="success">...envoyé ! Message envoyé avec succès, retourner à la <a href="/#">page d'accueil</a>.</p>
+</div>

src/content/visual.md

@@ -0,0 +1,36 @@
++++
+title = "Arts Visuels"
+slug = "visual"
+template = "page.html"
++++
+
+<h3>Rangoli & Kolam</h3>
+<p>
+    En Inde, perdure malgré la mondialisation, une tradition ancestrale transmise de générations en
+    générations, bien souvent féminines.
+</p>
+<p>
+    L'art des Rangoli (Nord de l'Inde) ou Kolam (Sud de l'Inde), englobe le réalisation de mandalas
+    éphémères car réalisés à la poudre de riz, tracés à même le sol devant les maisons. Les couleurs
+    sont
+    utilisées pour les grandes occasions.
+</p>
+<p>
+    Un art quotidien pour célébrer la vie, le vivant, la Nature et accueillir le Divin dans sa demeure
+    pour
+    protéger ses habitants.
+</p>
+<p>
+    Un art accessible à tous et à tout age
+</p>
+
+
+<h3>Calligraphie</h3>
+<p>
+    En cours de rédaction...
+</p>
+
+<h3>Entrelacs Celtiques</h3>
+<p>
+    En cours de rédaction...
+</p>

src/sass/css/style.scss

@@ -0,0 +1,908 @@
+/* Fonts
+	------------------------------------------------------------------------ */
+@font-face {
+    font-family: 'Lato';
+    src: url('/fonts/Lato-Regular.woff2') format('woff2'),
+        url('/fonts/Lato-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Lato';
+    src: url('/fonts/Lato-Bold.woff2') format('woff2'),
+        url('/fonts/Lato-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'TeXGyreTermes';
+    src: url('/fonts/TeXGyreTermes-Bold.woff2') format('woff2'),
+        url('/fonts/TeXGyreTermes-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'TeXGyreTermes';
+    src: url('/fonts/TeXGyreTermes-Regular.woff2') format('woff2'),
+        url('/fonts/TeXGyreTermes-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+/* Reset
+    ------------------------------------------------------------------------ */
+body,
+html {
+    margin: 0;
+}
+
+p {
+    margin-top: 0;
+}
+
+ul {
+    margin-top: 0;
+
+}
+
+/* Variables
+    ------------------------------------------------------------------------ */
+:root {
+    --cover__home: url(/images/taal.webp);
+    --cover__about: url(/images/about.webp);
+    --cover__cooking: url(/images/buffet.webp);
+    --cover__drums: url(/images/drums.webp);
+    --cover__visual: url(/images/visual.webp);
+    --cover__gatka: url(/images/gatka.webp);
+
+    --color__primary: #FC970B;
+    --color__secondary: #641a40;
+    --color__ternary: #185833;
+    --color__neutral: #111;
+}
+
+/* Layout
+    ------------------------------------------------------------------------ */
+body,
+html {
+    font-family: Lato, sans-serif;
+    font-size: 20px;
+    line-height: 1.8rem;
+    scroll-behavior: smooth;
+}
+
+.about {
+    padding-top: 100px;
+}
+
+article {
+    padding: 40px 0;
+}
+
+article:last-child {
+    margin-bottom: 40px;
+}
+
+.content--s,
+.content,
+.content--l {
+    padding: 0 40px;
+}
+
+.flex--zz>div {
+    margin-bottom: 60px;
+}
+
+.col2>div,
+.col3>div {
+    margin-bottom: 60px;
+}
+
+/* Cards
+    ------------------------------------------------------------------------ */
+.card {
+    border-radius: 20px;
+    box-shadow: 0 0 20px var(--color__neutral);
+    padding: 20px;
+    display: block;
+    min-width: 40px;
+    margin-bottom: 40px;
+}
+
+/* Banners
+    ------------------------------------------------------------------------ */
+.banner {
+    background: #641a40;
+    color: #ffffff;
+    padding: 40px;
+    margin-bottom: 60px;
+    text-align: center;
+}
+
+/* Messages
+    ------------------------------------------------------------------------ */
+.success {
+    border-radius: 5px;
+    padding: 15px 20px;
+    background: #cccccc;
+    text-align: center;
+}
+
+.warning {
+    color: #e74c3c;
+    text-align: center;
+}
+
+.error {
+    border-radius: 5px;
+    padding: 15px 10px;
+    background: #e74c3c;
+    text-align: center;
+}
+
+/* Buttons
+    ------------------------------------------------------------------------ */
+.button {
+    background: var(--color__primary);
+    color: #FFF;
+    font-size: .8rem;
+    border: 0;
+    border-radius: 5px;
+    padding: 15px 20px;
+    margin: 20px 0;
+}
+
+.button--rev {
+    background: #fff;
+    color: var(--color__primary);
+}
+
+.button:hover {
+    text-decoration: none;
+    color: #FFF;
+    cursor: pointer;
+}
+
+.button--rev:hover {
+    text-decoration: none;
+    color: var(--color__primary);
+    cursor: pointer;
+}
+
+/* Titles
+    ------------------------------------------------------------------------ */
+h1 {
+    font-family: 'TeXGyreTermes', serif;
+    font-size: 2rem;
+    line-height: 2rem;
+    font-weight: bold;
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 100px;
+}
+
+h2 {
+    font-family: 'TeXGyreTermes', serif;
+    font-size: 2rem;
+    line-height: 2rem;
+    font-weight: bold;
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 100px;
+}
+
+h3 {
+    font-family: 'TeXGyreTermes', serif;
+    font-size: 1.6rem;
+    line-height: 1.6rem;
+    font-weight: bold;
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 60px;
+}
+
+h4 {
+    font-family: 'TeXGyreTermes', serif;
+    font-size: 1.4rem;
+    line-height: 1.2rem;
+    font-weight: bold;
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 40px;
+}
+
+/* Links
+    ------------------------------------------------------------------------ */
+a {
+    color: var(--color__primary);
+    font-weight: bold;
+    text-decoration: none;
+}
+
+a:hover {
+    color: inherit;
+    text-decoration: underline;
+}
+
+.icon img {
+    opacity: 0.6;
+    width: 46px;
+    height: 46px;
+    transition: opacity 0.3s;
+}
+
+.icon:hover img {
+    opacity: 1;
+}
+
+/* Header
+    ------------------------------------------------------------------------ */
+header {
+    position: relative;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+header::before {
+    content: "";
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    background: no-repeat center center / cover fixed var(--cover__home);
+    filter: brightness(20%);
+    z-index: -1;
+}
+
+header a:hover {
+    text-decoration: none;
+}
+
+header h1 {
+    font-family: 'TeXGyreTermes', serif;
+    display: block;
+    font-size: 4rem;
+    font-weight: bold;
+    text-align: center;
+    color: var(--color__primary);
+    margin: 0;
+}
+
+header h2 {
+    font-family: 'TeXGyreTermes', serif;
+    display: block;
+    font-size: 2rem;
+    font-weight: normal;
+    text-align: center;
+    color: var(--color__primary);
+    margin: 0;
+}
+
+/* Topnav
+    ------------------------------------------------------------------------ */
+.topnav {
+    background: var(--color__primary);
+    text-align: center;
+    box-shadow: 0 0 10px #222;
+    position: sticky;
+    display: none;
+    top: 0px;
+    z-index: 3;
+    width: 100%;
+}
+
+.topnav a {
+    display: inline-block;
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #FFF;
+    opacity: .75;
+    padding: 10px 10px;
+    transition: opacity 0.3s;
+}
+
+.topnav a:hover {
+    text-decoration: none;
+    opacity: 1;
+}
+
+/* Sidenav
+    ------------------------------------------------------------------------ */
+.menu_icon_sidenav {
+    z-index: 2;
+    width: fit-content;
+    height: auto;
+    background-color: var(--color__primary);
+    padding: 10px;
+    margin: 10px;
+    cursor: pointer;
+    position: fixed;
+    top: 0;
+    box-shadow: 0 0 10px #222;
+    border-radius: 100%;
+}
+
+.line1,
+.line2,
+.line3 {
+    width: 40px;
+    height: 4px;
+    margin: 10px 8px;
+    background-color: #fff;
+    border-radius: 50px;
+    transition: 0.2s;
+}
+
+.active .line1 {
+    transform: translate(0px, 15px) rotate(45deg);
+}
+
+.active .line2 {
+    opacity: 0;
+}
+
+.active .line3 {
+    transform: translate(0px, -15px) rotate(-45deg);
+}
+
+.sidenav {
+    width: fit-content;
+    background-color: #fff;
+    position: fixed;
+    text-align: left;
+    z-index: 1;
+    opacity: 0;
+    left: -500px;
+    pointer-events: none;
+    transition: 0.3s;
+    top: 0;
+    box-shadow: 0 0 10px #222;
+    overflow: scroll;
+}
+
+.active_sidenav {
+    opacity: .8;
+    left: 0px;
+    pointer-events: fill;
+    position: fixed;
+    top: 0;
+    height: 100vh;
+}
+
+.sidenav nav {
+    padding-top: 80px;
+    margin-right: 40px;
+}
+
+.sidenav nav ul li {
+    list-style: none;
+    margin-bottom: 20px;
+    transition: 0.2s;
+}
+
+.sidenav nav ul li:hover {
+    background-color: #c6c6c66f;
+    border-radius: 8px;
+}
+
+.sidenav nav ul li a {
+    color: #000;
+    font-size: 1.2rem;
+    padding: 10px 30px;
+    display: block;
+    text-decoration: none;
+}
+
+.sidenav nav ul li a:hover {
+    text-decoration: none;
+}
+
+/* Cover
+    ------------------------------------------------------------------------ */
+.cover__home {
+    height: 400px;
+    background: no-repeat top center / cover var(--cover__home);
+}
+
+.cover__about {
+    height: 400px;
+    background: no-repeat top center / cover var(--cover__about);
+    background-attachment: fixed;
+}
+
+.cover__cooking {
+    height: 400px;
+    background: no-repeat top center / cover var(--cover__cooking);
+    background-attachment: fixed;
+}
+
+.cover__drums {
+    height: 400px;
+    background: no-repeat center center / cover var(--cover__drums);
+    background-attachment: fixed;
+}
+
+.cover__visual {
+    height: 400px;
+    background: no-repeat top center / cover var(--cover__visual);
+    background-attachment: fixed;
+}
+
+.cover__gatka {
+    height: 400px;
+    background: no-repeat top center / cover var(--cover__gatka);
+    background-attachment: fixed;
+}
+
+/* Media
+    ------------------------------------------------------------------------ */
+.media {
+    margin: 20px auto;
+    border-radius: 10px;
+    width: 100%;
+}
+
+.flex--zz .media {
+
+    width: 100%;
+}
+
+/* youtube-video-container
+    ------------------------------------------------------------------------ */
+.youtube-video-container {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+}
+
+.youtube-video-container::after {
+    display: block;
+    content: "";
+    padding-top: 56.25%;
+}
+
+.youtube-video-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+/* About article
+    ------------------------------------------------------------------------ */
+.about {
+    text-align: center;
+}
+
+.slogan {
+    margin: 40px 0 80px 0;
+}
+
+.slogan::before,
+.slogan::after {
+    text-align: center;
+    display: inline-block;
+    padding: 10px;
+    position: relative;
+    top: -10px;
+}
+
+.slogan::before {
+    content: url(/images/quotes-left.svg);
+}
+
+.slogan::after {
+    content: url(/images/quotes-right.svg);
+
+}
+
+/* Cooking article
+    ------------------------------------------------------------------------ */
+
+.cooking {
+    position: relative;
+    color: #FFF;
+    text-align: center;
+}
+
+.cooking::before {
+    content: "";
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    background: no-repeat center center / cover fixed var(--cover__cooking);
+    filter: brightness(30%);
+    z-index: -1;
+}
+
+/* Drums article
+    ------------------------------------------------------------------------ */
+.drums {
+    text-align: center;
+}
+
+/* Gatka article
+    ------------------------------------------------------------------------ */
+.gatka {
+    position: relative;
+    text-align: center;
+}
+
+.gatka p {
+    text-align: center;
+}
+
+.gatka::before {
+    content: "";
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    background: no-repeat center center / cover fixed var(--cover__gatka);
+    filter: brightness(30%);
+    z-index: -1;
+}
+
+.gatka h2,
+.gatka .content--s {
+    position: relative;
+    color: #FFF;
+}
+
+/* Visual article
+    ------------------------------------------------------------------------ */
+.visual {
+    text-align: center;
+}
+
+
+/* workshops article
+    ------------------------------------------------------------------------ */
+.workshops {
+    position: relative;
+    color: #FFF;
+}
+
+.workshops p {
+    text-align: center;
+}
+
+.workshops::before {
+    content: "";
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    background: var(--color__secondary);
+    z-index: -1;
+}
+
+.workshops h2,
+.workshops .content--l {
+    position: relative;
+}
+
+.workshops ul {
+    margin-bottom: 80px;
+}
+
+.workshops .card {
+    background: #fff;
+    color: #222;
+}
+
+/* Events article
+    ------------------------------------------------------------------------ */
+.events p {
+    text-align: center;
+}
+
+.events h4 {
+    text-decoration: none;
+    font-weight: bold;
+}
+
+/* Contact
+    ------------------------------------------------------------------------ */
+.contact p {
+    font-size: 1.2rem;
+}
+
+.contact h2,
+.contact .content {
+    position: relative;
+    color: var(--color__neutral);
+}
+
+.contact-form {
+    position: relative;
+    top: -200px;
+    margin-right: auto;
+    min-width: 50%;
+    font-size: 0.8rem;
+    font-weight: bold;
+}
+
+.contact-form input,
+select,
+textarea {
+    font-size: 1rem;
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #fff;
+    flex: 1 1 auto;
+    margin: 10px 0;
+}
+
+input:focus,
+textarea:focus {
+    outline: none;
+}
+
+.contact .button {
+    color: #fff;
+}
+
+.contact .button:hover {
+    color: #fff;
+}
+
+.contact-form>* {
+    display: flex;
+}
+
+.contact-form textarea {
+    min-height: 150px;
+    max-width: 100%;
+    box-shadow: 0 0 10px #222;
+}
+
+.map {
+    margin-bottom: 80px;
+}
+
+.map iframe {
+    display: block;
+    border: 0px;
+    width: 100%;
+    height: 400px;
+}
+
+.contact .card {
+    position: relative;
+    top: -200px;
+    background: var(--color__ternary);
+}
+
+.contact .card h2,
+.contact .card h3,
+.contact .card p {
+    color: #fff;
+}
+
+.contact .card h3,
+.contact .card p {
+    text-align: left;
+}
+
+.contact .card h3 {
+    font-size: 1.2rem;
+    line-height: normal;
+    margin: 0;
+}
+
+.contact .card p {
+    font-size: 0.8rem;
+    line-height: normal;
+}
+
+svg {
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    height: 64px;
+    width: auto;
+}
+
+.contact-info>div {
+    display: flex;
+    gap: 40px;
+    margin: 60px 0;
+    align-items: flex-start;
+}
+
+/* Press
+    ------------------------------------------------------------------------ */
+.press iframe {
+    width: 100%;
+    height: 50vw;
+}
+
+/* Bottom Bar
+    ------------------------------------------------------------------------ */
+.botbar {
+    display: flex;
+    background: #000;
+    color: #fff;
+    font-size: 1rem;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    text-align: center;
+}
+
+.botbar p {
+    padding: 10px 20px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* For more than 680px screens and normal DPI
+    ------------------------------------------------------------------------ */
+@media screen and (min-width: 680px) and (max-resolution: 1x) {
+
+    h1 {
+        font-size: 3.2rem;
+        line-height: 3.2rem;
+    }
+
+    h2 {
+        font-size: 3.2rem;
+        line-height: 3.2rem;
+        padding-top: 60px;
+    }
+
+    h3 {
+        font-size: 2rem;
+        line-height: 2rem;
+    }
+
+    h4 {
+        font-size: 1.2rem;
+        line-height: 1.2rem;
+    }
+}
+
+/* For highter resolution screens and normal DPI
+    ------------------------------------------------------------------------ */
+@media screen and (min-width: 950px) and (max-resolution: 1x) {
+
+    .col2 {
+        display: grid;
+        grid-column-gap: 80px;
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .col3 {
+        display: grid;
+        grid-column-gap: 80px;
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    .col2--1-3 {
+        display: grid;
+        grid-column-gap: 80px;
+        grid-template-columns: 1fr 2fr;
+    }
+
+    header h1 {
+        font-size: 5rem;
+    }
+
+    header h2 {
+        font-size: 3rem;
+    }
+
+    .content--s {
+        max-width: 750px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .cover__home {
+        height: 689px;
+    }
+
+    .flex--zz {
+        display: flex;
+        gap: 40px;
+        align-items: center;
+        justify-content: center;
+        text-align: left;
+    }
+
+    .flex--zz>* {
+        flex: 1;
+    }
+
+    .flex--zz h3,
+    .flex--zz h4,
+    .flex--zz p {
+        text-align: left;
+    }
+
+    .flex--zz:nth-child(odd) {
+        flex-direction: row-reverse;
+        text-align: right;
+    }
+
+    .flex--zz:nth-child(odd) h3,
+    .flex--zz:nth-child(odd) h4,
+    .flex--zz:nth-child(odd) p {
+        text-align: right;
+    }
+
+    .contact-form {
+        position: relative;
+        top: -60px;
+        margin-top: 0;
+    }
+
+    .map iframe {
+        min-width: 400px;
+    }
+
+}
+
+@media screen and (min-width: 1250px) and (max-resolution: 1x) {
+
+    header h1 {
+        font-size: 6rem;
+    }
+
+    header h2 {
+        font-size: 4rem;
+    }
+
+    .menu_icon_sidenav {
+        display: none;
+    }
+
+    .topnav {
+        display: block;
+    }
+
+    article {
+        padding: 60px 0;
+    }
+
+    footer article {
+        padding: 50px 0;
+    }
+
+    .content {
+        max-width: 1050px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .col--zz {
+        gap: 80px;
+    }
+
+}
+
+@media screen and (min-width: 1600px) and (max-resolution: 1x) {
+
+    .content--l {
+        max-width: 1400px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+}

src/static/images/facebook.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.001 2.002c-5.522 0-9.999 4.477-9.999 9.999 0 4.99 3.656 9.126 8.437 9.879v-6.988h-2.54v-2.891h2.54V9.798c0-2.508 1.493-3.891 3.776-3.891 1.094 0 2.24.195 2.24.195v2.459h-1.264c-1.24 0-1.628.772-1.628 1.563v1.875h2.771l-.443 2.891h-2.328v6.988C18.344 21.129 22 16.992 22 12.001c0-5.522-4.477-9.999-9.999-9.999z"/></svg>

src/static/images/quotes-left.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>quotes-left</title>
+<path d="M7.031 14c3.866 0 7 3.134 7 7s-3.134 7-7 7-7-3.134-7-7l-0.031-1c0-7.732 6.268-14 14-14v4c-2.671 0-5.182 1.040-7.071 2.929-0.364 0.364-0.695 0.751-0.995 1.157 0.357-0.056 0.724-0.086 1.097-0.086zM25.031 14c3.866 0 7 3.134 7 7s-3.134 7-7 7-7-3.134-7-7l-0.031-1c0-7.732 6.268-14 14-14v4c-2.671 0-5.182 1.040-7.071 2.929-0.364 0.364-0.695 0.751-0.995 1.157 0.358-0.056 0.724-0.086 1.097-0.086z"></path>
+</svg>

src/static/images/quotes-right.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>quotes-right</title>
+<path d="M25 20c-3.866 0-7-3.134-7-7s3.134-7 7-7 7 3.134 7 7l0.031 1c0 7.732-6.268 14-14 14v-4c2.671 0 5.182-1.040 7.071-2.929 0.364-0.364 0.695-0.75 0.995-1.157-0.357 0.056-0.724 0.086-1.097 0.086zM7 20c-3.866 0-7-3.134-7-7s3.134-7 7-7 7 3.134 7 7l0.031 1c0 7.732-6.268 14-14 14v-4c2.671 0 5.182-1.040 7.071-2.929 0.364-0.364 0.695-0.75 0.995-1.157-0.357 0.056-0.724 0.086-1.097 0.086z"></path>
+</svg>

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");
+    }
+}

src/static/js/slider.js

@@ -0,0 +1,16 @@
+// From https://www.w3schools.com/w3css/w3css_slideshow.asp
+
+var slideIndex = 0;
+carousel();
+
+function carousel() {
+  var i;
+  var x = document.getElementsByClassName("slider");
+  for (i = 0; i < x.length; i++) {
+    x[i].style.display = "none";
+  }
+  slideIndex++;
+  if (slideIndex > x.length) {slideIndex = 1}
+  x[slideIndex-1].style.display = "block";
+  setTimeout(carousel, 5000); // Change image every 2 seconds
+}

src/templates/base.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+
+<html lang="fr">
+
+{% include "partials/head.html" %}
+<body>
+    {% include "partials/topnav.html" %}
+    {% include "partials/sidenav.html" %}
+    {% include "partials/header.html" %}
+    <main class="main" id="top">
+        {% block content %} {% endblock %}
+    </main>
+    {% include "partials/footer.html" %}
+</body>
+
+</html>

src/templates/index.html

@@ -0,0 +1,271 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<article class="about" id="about">
+    <div class="content--l col2--1-3">
+        <img class="media" src="{{ get_url(path="images/portrait.webp") }}" alt="Portrait">
+        <div>
+            <h3 class="slogan">Apprenez les Arts Traditionnels de l'Inde avec TAAL Académie</h3>
+            <p>
+                TAAL Académie est engagée depuis 2013 dans la promotion des Arts Traditionnels (classiques et folks) de
+                l'Inde et du Pakistan, à travers l'enseignement de l'<a href="#drums">Art Musical</a> (tabla, pakhawaj,
+                srikhol, dhol, dholak, dhadh, daf, khartal du Rajasthan, naqqara, konnakol...Sargam), l'<a
+                    href="#gatka">Art Martial</a> (Gatka), les <a href="#visual">Arts Visuels</a> (Rangoli/Kollam), la
+                Spiritualité (Naad Yoga, Surat Shabad Yoga, Méditation), la <a href="#cooking">Cuisine</a> (indienne,
+                végétalienne et végétarienne), et bien plus encore...
+            </p>
+            <a href="/about" class="button">Plus d'infos &rarr;</a>
+        </div>
+    </div>
+</article>
+<article class="cooking" id="cooking">
+    <h2>Cuisine</h2>
+    <div class="content--l col2">
+        <div>
+            <img class="media slider" src="{{ get_url(path="images/kheer_kesar.webp") }}" alt="Kheer Kesar">
+            <img class="media slider" src="{{ get_url(path="images/thali.webp") }}" alt="Thali">
+            <img class="media slider" src="{{ get_url(path="images/gajar_ka_halwa.webp") }}" alt="Gajar ka Halwa">
+        </div>
+
+        <div>
+            <p>
+                Dans ces ateliers de cuisine authentique indienne et végétarienne/végétalienne,
+                je vous propose d'apprendre à réaliser un Thali du Nord comme du Sud de l'Inde (repas complet et
+                traditionnel de recettes de tout les jours, faciles à réaliser avec des légumes de saison et locaux,
+                servis sur le Thali).
+            </p>
+            <p>
+                Des ateliers spécifiques sur la présentation des épices et de leurs vertus, les
+                différents pains indiens (chapati, paratha, laccha paratha, etc), les crêpes dosa (lacto fermentées)
+                et
+                idli (pains cuit à la vapeur) du Sud de l'Inde, les différents condiments (chutney, pickles, acchar)
+                et
+                les desserts, avec toujours une option sans lactose, sans gluten, sans sucre sur demande.
+            </p>
+            <p>
+                Nous terminons toujours ces ateliers par la dégustation des recettes réalisées ensemble et
+                présentées
+                dans la vaisselle indienne traditionnelle en inox (bartan).
+            </p>
+            <a href="/cooking" class="button">Plus d'infos &rarr;</a>
+        </div>
+    </div>
+</article>
+<article class="drums" id="drums">
+    <div class="content">
+        <h2>Percussions</h2>
+        <div class="flex--zz">
+            <img class="media" src="{{ get_url(path="images/tabla.webp") }}" alt="Tabla">
+            <div>
+                <h3>Tabla</h3>
+                <p>
+                    Percussion classique de l'Inde du Nord
+                </p>
+                <a href="/drums#tabla" class="button">Plus d'infos &rarr;</a>
+            </div>
+        </div>
+        <div class="flex--zz">
+            <img class="media" src="{{ get_url(path="images/pakhawaj.webp") }}" alt="Pakhawaj">
+            <div>
+                <h3>Pakhawaj</h3>
+                <p>
+                    Percussion Sacrée des Temples et de la musique Dhrupad
+                </p>
+                <a href="/drums#pakhawaj" class="button">Plus d'infos &rarr;</a>
+            </div>
+        </div>
+        <div class="flex--zz">
+            <img class="media" src="{{ get_url(path="images/khartal.webp") }}" alt="Khartal">
+            <div>
+                <h3>Khartal</h3>
+                <p>
+                    Castagnettes virtuoses du Rajasthan
+                </p>
+                <a href="/drums#khartal" class="button">Plus d'infos &rarr;</a>
+            </div>
+        </div>
+        <div class="flex--zz">
+            <img class="media" src="{{ get_url(path="images/dholak.webp") }}" alt="Dholak">
+            <div>
+                <h3>Dholak</h3>
+                <p>
+                    Percussion digitale folk bi–faces
+                </p>
+                <a href="/drums#dholak" class="button">Plus d'infos &rarr;</a>
+            </div>
+        </div>
+        <div class="flex--zz">
+            <img class="media" src="{{ get_url(path="images/dhol.webp") }}" alt="Dhol">
+            <div>
+                <h3>Dhol</h3>
+                <p>
+                    Percussion baguettes du Panjab
+                </p>
+                <a href="/drums#dhol" class="button">Plus d'infos &rarr;</a>
+            </div>
+        </div>
+        <div class="flex--zz">
+            <img class="media" src="{{ get_url(path="images/dhadh.webp") }}" alt="Dhadh">
+            <div>
+                <h3>Dhadh</h3>
+                <p>
+                    Percussion digitale des Bardes du Panjab
+                </p>
+                <a href="/drums#dhadh" class="button">Plus d'infos &rarr;</a>
+            </div>
+        </div>
+        <div class="flex--zz">
+            <img class="media" src="{{ get_url(path="images/daf.webp") }}" alt="Daf">
+            <div>
+                <h3>Daf</h3>
+                <p>
+                    Tambour digital sur cadre
+                </p>
+                <!-- <a href="/drums" class="button">Plus d'infos &rarr;</a> -->
+            </div>
+        </div>
+        <div class="flex--zz">
+            <img class="media" src="{{ get_url(path="images/konnakol.webp") }}" alt="Konnakol">
+            <div>
+                <h3>Konnakol</h3>
+                <p>
+                    Percussion vocale de l'Inde du Sud
+                </p>
+                <a href="/drums#konnakol" class="button">Plus d'infos &rarr;</a>
+            </div>
+        </div>
+        <div class="flex--zz">
+            <img class="media" src="{{ get_url(path="images/shrikhol.webp") }}" alt="Shrikhol">
+            <div>
+                <h3>Shrikhol</h3>
+                <p>
+                    Percussion digitale en terre cuite du Nord-Est de l’Inde
+                </p>
+                <a href="/drums#shrikhol" class="button">Plus d'infos &rarr;</a>
+            </div>
+        </div>
+    </div>
+</article>
+<article class="gatka" id="gatka">
+    <h2>Gatka & Shakti Yoga</h2>
+    <div class="content--s">
+        <div>
+            <h3>Le Gatka... pour faire l'expérience de la Grâce</h3>
+            <p>
+                Le Gatka est un art martial ancien qui a fait ses preuves à travers de nombreuses batailles et
+                existe
+                dans le Nord de l'Inde depuis des milliers d'années.
+            <p>
+            </p>
+            Exercice autant spirituel que physique, le Gatka est basé sur le principe d'unification de l'esprit, de
+            l'âme et du corps, par le rythme de la vie, nous entraînant à être capable de se défendre nous-mêmes.
+            <p>
+            </p>
+            En plus de donner à l'élève des talents défensifs, il permet également à l'individu, de garder l'esprit
+            alerte et réactif, de maintenir le corps dans des conditions presque parfaites et rendre l'âme sans
+            aucune peur, compatissante et tranquille.
+            <p>
+            </p>
+            Gatka signifie « Grâce » et « arrêt de la pensée », ou encore « état d'extase ». Ceci est rendu possible
+            grâce à l'ensemble des mouvements du Gatka, basés sur le « 8 »; le signe de l'infini.
+            <p>
+            </p>
+            Nous pratiquerons le Shakti Yoga qui a le pouvoir d'éveiller et renforcer la lionne et le lion
+            intérieur, aidant à maîtriser nos peurs et notre destin, et ainsi devenir Un avec Tout.
+            </p>
+            <a href="/gatka" class="button">Plus d'infos &rarr;</a>
+        </div>
+    </div>
+</article>
+<article class="visual" id="visual">
+    <div class="content--l">
+        <h2>Arts Visuels</h2>
+        <div class="col3">
+            <div>
+                <h3>Rangoli & Kolam</h3>
+                <img class="media" src="{{ get_url(path="images/kolam.webp") }}" alt="Rangoli & Kolam">
+                <p>Arts Visuels Indiens</p>
+                <a href="/visual" class="button">Plus d'infos &rarr;</a>
+            </div>
+            <div>
+                <h3>Calligraphie</h3>
+                <img class="media" src="{{ get_url(path="images/calligraphy.webp") }}" alt="Calligraphie">
+                <p>Hindi & Gurmukhi au Kalam</p>
+                <a href="/visual" class="button">Plus d'infos &rarr;</a>
+            </div>
+            <div>
+                <h3>Entrelacs Celtiques</h3>
+                <img class="media" src="{{ get_url(path="images/entrelac.webp") }}" alt="Entrelacs Celtiques">
+                <p>Issus des Manuscrits Irlandais</p>
+                <a href="/visual" class="button">Plus d'infos &rarr;</a>
+            </div>
+        </div>
+    </div>
+</article>
+<article class="workshops" id="workshops">
+    <div class="content col2">
+        <div>
+            <h2>Cours & Stages</h2>
+            <p>Des Cours et Ateliers sont proposés à Brasparts, dans le Finistère et les départements voisins :</p>
+        </div>
+        <ul>
+            <li><strong>Rythmes indiens et Konnakol</strong> (percussion vocale du Sud de l'Inde)</li>
+            <li><strong>Percussions folks et classiques du Nord de l'Inde</strong></li>
+            <li><strong>Chant indien</strong> (Sargam)</li>
+            <li><strong>Arts visuels</strong> (Kollam/Rangoli)</li>
+            <li><strong>Art Martial indien</strong> (Gatka)</li>
+            <li><strong>Cuisine indienne végétarienne et vegan</strong></li>
+            <li><strong>Alimentation Vivante et Consciente</strong></li>
+            <li><strong>Yoga et méditation</strong> (Shakti yoga, Naad yoga, Surat Shabad yoga)</li>
+            <li><strong>Vaastu</strong> (géobiologie indienne/Feng Shui sacré de l'Inde)</li>
+        </ul>
+    </div>
+    <div class="content col2">
+        {% block workshops %}{% endblock workshops %}
+    </div>
+    <div class="content">
+        <p>&rarr; Si vous êtes intéréssé(e) par un cours ou atelier non programmé n'hésitez pas à nous <a
+                href="#contact">contacter</a>.</p>
+    </div>
+</article>
+<article class="events" id="events">
+    <div class="content">
+        <h2>Évenements</h2>
+        <div class="flex--zz">
+            <img class="media" src="{{ get_url(path="images/affiche_2025-10-11.webp") }}" alt="Affiche">
+            <div>
+                <h3>Musique Indienne, le 11 Octobre 2025</h3>
+                <p>L'art du Raga de l'Inde du nord</p>
+            </div>
+        </div>
+        <div class="flex--zz">
+            <img class="media" src="{{ get_url(path="images/affiche_2025-10-10.webp") }}" alt="Affiche">
+            <div>
+                <h3>Salon de musique, le 10 Octobre 2025</h3>
+                <p>Découverte du Tala :
+                La science rythmique de l'Inde</p>
+            </div>
+        </div>
+        <div class="flex--zz">
+            <img class="media" src="{{ get_url(path="images/affiche_2023-08-27.webp") }}" alt="Affiche">
+            <div>
+                <h3>Telenn ar Sterennoù, le 27 août 2023</h3>
+                <h4>Andrea Seki</h4>
+                <p>Compositions originales et inédites pour Harpe Néo Celtique Fx Loop Chants</p>
+                <h4>Harjit Singh</h4>
+                <p>Percussions Indiennes</p>
+            </div>
+        </div>
+        <div class="flex--zz">
+            <img class="media" src="{{ get_url(path="images/affiche_2023-08-23.webp") }}" alt="Affiche">
+            <div>
+                <h3>Telenn ar Sterennoù, le 23 août 2023</h3>
+                <h4>Andrea Seki</h4>
+                <p>Compositions originales et inédites pour Harpe Néo Celtique Fx Loop Chants</p>
+                <h4>Harjit Singh</h4>
+                <p>Percussions Indiennes</p>
+            </div>
+        </div>
+    </div>
+</article>
+{% endblock content %}

src/templates/page.html

@@ -0,0 +1,10 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="content">
+    <article>
+        <h1>{{ page.title }}</h1>
+        {{ page.content | safe }}
+    </article>
+</div>
+{% endblock content %}

src/templates/partials/contact.html

@@ -0,0 +1,10 @@
+<form action="https://p2e.taal-academie.arree.bzh/" method="post" class="contact-form">
+  <p>Formulaire de contact non testé, merci de me contacter par un autre moyen en attendant.</p>
+  <input type="hidden" name="REDIRECT" value="https://taal-academie.arree.bzh/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>

src/templates/partials/footer.html

@@ -0,0 +1,108 @@
+<footer>
+    <div class="contact" id="contact">
+        <div class="map">
+            <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d42450.95469143548!2d-3.9939939182617525!3d48.31853054338251!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x481138baf8c5cf43%3A0x40ca5cd36e56fe0!2s29190%20Brasparts!5e0!3m2!1sfr!2sfr!4v1694695541898!5m2!1sfr!2sfr"
+                width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
+                referrerpolicy="no-referrer-when-downgrade">
+            </iframe>
+        </div>
+        <div class="content col2">
+            <div class="card contact-info">
+                <h2>Contact</h2>
+                <div class="contact-address">
+                    <svg width="64px" height="64px" viewBox="0 0 8.4666669 8.4666669" id="svg8" version="1.1"
+                        xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#"
+                        xmlns:dc="http://purl.org/dc/elements/1.1/"
+                        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+                        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+                        xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+                        xmlns:svg="http://www.w3.org/2000/svg" fill="fffff" stroke="fffff">
+                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                        <g id="SVGRepo_iconCarrier">
+                            <defs id="defs2"></defs>
+                            <g id="layer1" transform="translate(0,-288.53332)">
+                                <path
+                                    d="m 15.996094,0.99609375 c -6.0632836,0 -10.9980445,4.93673065 -10.9980471,11.00000025 -3.8e-6,10.668737 10.3789061,18.779297 10.3789061,18.779297 0.364612,0.290384 0.881482,0.290384 1.246094,0 0,0 10.380882,-8.11056 10.380859,-18.779297 C 27.003893,5.9328244 22.059377,0.99609375 15.996094,0.99609375 Z m 0,6.00195315 c 2.749573,0 5.00585,2.2484784 5.005859,4.9980471 C 21.001971,14.7457 18.745685,17 15.996094,17 c -2.749591,0 -4.998064,-2.2543 -4.998047,-5.003906 9e-6,-2.7495687 2.248474,-4.9980471 4.998047,-4.9980471 z"
+                                    id="path929"
+                                    style="color:#ffffff;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#ffffff;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#ffffff;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.99999988;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+                                    transform="matrix(0.26458333,0,0,0.26458333,0,288.53332)"></path>
+                            </g>
+                        </g>
+                    </svg>
+                    <div>
+                        <h3>Adresse</h3>
+                        <p>
+                            24, Prat ar Veguerez<br>
+                            Route de Lannedern<br>
+                            29190 BRASPARTS
+                        </p>
+                    </div>
+
+                </div>
+                <div class="contact-phone">
+                    <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+                        stroke="#ffffff">
+                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                        <g id="SVGRepo_iconCarrier">
+                            <path
+                                d="M16.5562 12.9062L16.1007 13.359C16.1007 13.359 15.0181 14.4355 12.0631 11.4972C9.10812 8.55901 10.1907 7.48257 10.1907 7.48257L10.4775 7.19738C11.1841 6.49484 11.2507 5.36691 10.6342 4.54348L9.37326 2.85908C8.61028 1.83992 7.13596 1.70529 6.26145 2.57483L4.69185 4.13552C4.25823 4.56668 3.96765 5.12559 4.00289 5.74561C4.09304 7.33182 4.81071 10.7447 8.81536 14.7266C13.0621 18.9492 17.0468 19.117 18.6763 18.9651C19.1917 18.9171 19.6399 18.6546 20.0011 18.2954L21.4217 16.883C22.3806 15.9295 22.1102 14.2949 20.8833 13.628L18.9728 12.5894C18.1672 12.1515 17.1858 12.2801 16.5562 12.9062Z"
+                                fill="#ffffff"></path>
+                        </g>
+                    </svg>
+                    <div>
+                        <h3>Téléphone</h3>
+                        <p>06 24 20 76 09</p>
+                    </div>
+
+                </div>
+                <div class="contact-mail">
+                    <svg width="64px" height="64px" viewBox="0 -3.5 32 32" version="1.1"
+                        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                        xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="#ffffff" stroke="#ffffff">
+                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                        <g id="SVGRepo_iconCarrier">
+                            <title>mail</title>
+                            <desc>Created with Sketch Beta.</desc>
+                            <defs></defs>
+                            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
+                                sketch:type="MSPage">
+                                <g id="Icon-Set-Filled" sketch:type="MSLayerGroup"
+                                    transform="translate(-414.000000, -261.000000)" fill="#ffffff">
+                                    <path
+                                        d="M430,275.916 L426.684,273.167 L415.115,285.01 L444.591,285.01 L433.235,273.147 L430,275.916 L430,275.916 Z M434.89,271.89 L445.892,283.329 C445.955,283.107 446,282.877 446,282.634 L446,262.862 L434.89,271.89 L434.89,271.89 Z M414,262.816 L414,282.634 C414,282.877 414.045,283.107 414.108,283.329 L425.147,271.927 L414,262.816 L414,262.816 Z M445,261 L415,261 L430,273.019 L445,261 L445,261 Z"
+                                        id="mail" sketch:type="MSShapeGroup"></path>
+                                </g>
+                            </g>
+                        </g>
+                    </svg>
+                    <div>
+                        <h3>Email</h3>
+                        <a href="mailto:taal-academie@arree.bzh">taal-academie@arree.bzh</a>
+                    </div>
+                </div>
+            </div>
+            <div class="content">
+                {% include "partials/contact.html" %}
+            </div>
+        </div>
+    </div>
+    <div class="botbar">
+        <p>
+            © 2025 <a href="https://taal-academie.arree.bzh/#">Académie
+                des Arts Traditionnels de l’Inde</a>
+        </p>
+        <p>
+            <a href="/pages/legal#top">Mentions Légales</a>
+        </p>
+        <p>
+            Site créé et hébergé par <a href="https://netig.net" target="_blank">NETig</a> !
+        </p>
+    </div>
+    <script src="{{ get_url(path="js/jquery-3.7.0.min.js") }}"></script>
+    <script src="{{ get_url(path="js/slider.js") }}"></script>
+    <script src="{{ get_url(path="js/sidenav.js") }}"></script>
+</footer>

src/templates/partials/head.html

@@ -0,0 +1,10 @@
+<head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+      <title>TAAL - Académie des Arts Traditionnels de l'Inde</title>
+      <meta name="description"
+            content="TAAL Académie est engagée depuis 2013 dans la promotion des Art Traditionnels de l'Inde et du Pakistan, à travers l'enseignement de l'Art Musical, l'Art Mart...">
+      <link rel="canonical" href="https://taal-academie.arree.bzh/">
+      <link rel="icon" type="image/x-icon" href="{{ get_url(path="images/favicon.png") }}">
+      <link rel="stylesheet" href="css/style.css">
+</head>

src/templates/partials/header.html

@@ -0,0 +1,48 @@
+{% if current_path == "/" %}
+<header class="header">
+    <a class="site-title" href="https://taal-academie.arree.bzh">
+        <h1>TAAL</h1>
+    </a>
+    <a class="site-subtitle" href="https://taal-academie.arree.bzh">
+        <h2>Académie des Arts Traditionnels de l'Inde</h2>
+    </a>
+    <a href="#top">
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#FC970B"
+            style="--darkreader-inline-stroke: #fca122;" data-darkreader-inline-stroke="">
+            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+            <g id="SVGRepo_iconCarrier">
+                <path
+                    d="M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z"
+                    fill="#FC970B" style="--darkreader-inline-fill: #c57302;" data-darkreader-inline-fill="">
+                </path>
+            </g>
+        </svg>
+    </a>
+</header>
+{% endif %}
+
+{% if current_path == "/about/" %}
+<header class="cover cover__about">
+</header>
+{% endif %}
+
+{% if current_path == "/cooking/" %}
+<header class="cover cover__cooking">
+</header>
+{% endif %}
+
+{% if current_path == "/drums/" %}
+<header class="cover cover__drums">
+</header>
+{% endif %}
+
+{% if current_path == "/gatka/" %}
+<header class="cover cover__gatka">
+</header>
+{% endif %}
+
+{% if current_path == "/visual/" %}
+<header class="cover cover__visual">
+</header>
+{% endif %}

src/templates/partials/sidenav.html

@@ -0,0 +1,20 @@
+<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="/#about">Présentation</a></li>
+            <li><a href="/#cooking">Cuisine</a></li>
+            <li><a href="/#drums">Percussions & Musique</a></li>
+            <li><a href="/#gatka">Gatka</a></li>
+            <li><a href="/#visual">Arts Visuels</a></li>
+            <li><a href="/#workshops">Cours & Stages</a></li>
+            <li><a href="/#events">Evènements</a></li>
+            <li><a href="#contact">Contact</a></li>
+        </ul>
+    </nav>
+</div>

src/templates/partials/topnav.html

@@ -0,0 +1,13 @@
+<div class="topnav">
+    <nav>
+        <a href="/#">Accueil</a>
+        <a href="/#about">Présentation</a>
+        <a href="/#cooking">Cuisine</a>
+        <a href="/#drums">Percussions & Musique</a>
+        <a href="/#gatka">Gatka</a>
+        <a href="/#visual">Arts Visuels</a>
+        <a href="/#workshops">Cours & Stages</a>
+        <a href="/#events">Evènements</a>
+        <a href="#contact">Contact</a>
+    </nav>
+</div>