Add program page

Mostly copied from the news page.
author: Kévin Le Gouguec <kevin.legouguec@gmail.com> 2020-11-29 23:15:22 +0100
committer: Kévin Le Gouguec <kevin.legouguec@gmail.com> 2020-11-29 23:46:45 +0100
commit: 9dadb33e6d3b0244929a7c6edc551b649c6accdc (patch)
tree: 02e778f3a1c330210f463bda77bc59cf2de0b2e0 /programmes.html
parent: e19ac8c0cc8b071c5f2c455a8d1f78370949dcfe (diff)
download: quatuorbellefeuille.com-9dadb33e6d3b0244929a7c6edc551b649c6accdc.tar.xz
1 files changed, 251 insertions, 0 deletions
diff --git a/programmes.html b/programmes.html
new file mode 100644
index 0000000..d762219
--- /dev/null
+++ b/programmes.html
@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <title>Programmes - Quatuor Camelot</title>
+    <link rel="stylesheet" href="commun.css">
+    <link rel="stylesheet" href="programmes.css">
+  </head>
+  <body>
+    <header class="banner">
+
+      <div class="brand">
+        <a href="index.html">
+          <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Golden_Sun_icon.png"
+               alt="logo">
+          <h1 class="qname">Quatuor Camelot</h1>
+        </a>
+      </div>
+
+      <nav>
+        <ol>
+          <li><a href="quatuor.html">Le quatuor</a></li>
+          <li><a href="actualités.html">Actualités</a></li>
+          <li class="current"><a href="programmes.html">Programmes</a></li>
+          <li><a href="médias.html">Médias</a></li>
+        </ol>
+      </nav>
+
+      <div class="lang">
+        EN
+      </div>
+
+    </header>
+
+    <main>
+      <div id="program-list">
+        <h1>Nos programmes</h1>
+        <div class="programs">
+          <div class="program">
+            <a href="#program-a">
+              <p class="summary">Programme A</p>
+            </a>
+          </div>
+          <div class="program">
+            <a href="#program-b">
+              <p class="summary">Programme B</p>
+            </a>
+          </div>
+          <div class="program">
+            <a href="#program-c">
+              <p class="summary">Programme C</p>
+            </a>
+          </div>
+          <div class="program">
+            <a href="#program-d">
+              <p class="summary">Programme D</p>
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div id="program-details">
+        <div class="details" id="program-a">
+          <h1>Programme A</h1>
+          <p>
+            Un programme qui est sacrément bien nommé, parce que son
+            contenu correspond tout à fait à ce qui vient en tête
+            quand on lit son nom. Composé des œuvres suivantes :
+          </p>
+          <ol>
+            <li>
+              <details>
+                <summary>
+                  La première
+                  <span class="duration">6min 11s 101ms</span>
+                </summary>
+                Composée par quelqu'un à une époque.
+              </details>
+            </li>
+            <li>
+              <details>
+                <summary>
+                  La seconde
+                  <span class="duration">6min 22s 202ms</span>
+                </summary>
+                Composée par quelqu'un d'autre à une autre époque.
+              </details>
+            </li>
+            <li>
+              <details>
+                <summary>
+                  La troisième
+                  <span class="duration">6min 33s 303ms</span>
+                </summary>
+                Composée par quelqu'un d'autre à une autre époque.
+              </details>
+            </li>
+          </ol>
+        </div>
+        <div class="details" id="program-b">
+          <h1>Programme B</h1>
+          <p>
+            Un programme qui comme son nom l'indique, rend hommage
+            à ce à quoi il fait référence. Composé des œuvres
+            suivantes :
+          </p>
+          <ol>
+            <li>
+              <details>
+                <summary>
+                  La première
+                  <span class="duration">7min 11s 101ms</span>
+                </summary>
+                Composée par quelqu'un à une époque.
+              </details>
+            </li>
+            <li>
+              <details>
+                <summary>
+                  La seconde
+                  <span class="duration">7min 22s 202ms</span>
+                </summary>
+                Composée par quelqu'un d'autre à une autre époque.
+              </details>
+            </li>
+            <li>
+              <details>
+                <summary>
+                  La troisième
+                  <span class="duration">7min 33s 303ms</span>
+                </summary>
+                Composée par quelqu'un d'autre à une autre époque.
+              </details>
+            </li>
+          </ol>
+        </div>
+        <div class="details" id="program-c">
+          <h1>Programme C</h1>
+          <p>
+            Les morceaux de ce programme font référence à ceux à quoi
+            on peut s'attendre en lisant son nom. En voici la liste :
+          </p>
+          <ol>
+            <li>
+              <details>
+                <summary>
+                  Le premier
+                  <span class="duration">8min 11s 101ms</span>
+                </summary>
+                Composé par quelqu'un à une époque.
+              </details>
+            </li>
+            <li>
+              <details>
+                <summary>
+                  Le second
+                  <span class="duration">8min 22s 202ms</span>
+                </summary>
+                Composé par quelqu'un d'autre à une autre époque.
+              </details>
+            </li>
+            <li>
+              <details>
+                <summary>
+                  Le troisième
+                  <span class="duration">8min 33s 303ms</span>
+                </summary>
+                Composée par quelqu'un d'autre à une autre époque.
+              </details>
+            </li>
+          </ol>
+        </div>
+        <div class="details" id="program-d">
+          <h1>Programme D</h1>
+          <p>
+            Un programme dont les morceaux ont été choisis pour des
+            raisons en lien avec sa dénomination. Composé des œuvres
+            suivantes :
+          </p>
+          <ol>
+            <li>
+              <details>
+                <summary>
+                  La première
+                  <span class="duration">9min 11s 101ms</span>
+                </summary>
+                Composée par quelqu'un à une époque.
+              </details>
+            </li>
+            <li>
+              <details>
+                <summary>
+                  La première
+                  <span class="duration">9min 22s 202ms</span>
+                </summary>
+                Composée par quelqu'un d'autre à une autre époque.
+              </details>
+            </li>
+            <li>
+              <details>
+                <summary>
+                  La troisième
+                  <span class="duration">9min 33s 303ms</span>
+                </summary>
+                Composée par quelqu'un d'autre à une autre époque.
+              </details>
+            </li>
+          </ol>
+        </div>
+      </div>
+
+      <script>
+        // When JS is enabled, hide concert details by default, and
+        // allow the user to display concerts selectively.
+        var detailsStyle = document.createElement('style');
+        document.head.appendChild(detailsStyle);
+        detailsStyle.sheet.insertRule('.details:not(.active) {display:none}');
+
+        var anchor = document.location.hash;
+        if (anchor.match(/#program-/))
+            document.querySelector(anchor).classList.add('active');
+
+        document.querySelectorAll('.program a').forEach((link) => {
+            link.addEventListener('click', function(click) {
+                if (click.ctrlKey || click.shiftKey)
+                    return;
+
+                var prev = document.querySelector('.details.active');
+                if (prev)
+                    prev.classList.remove('active');
+                var id = link.attributes['href'].value;
+                document.querySelector(id).classList.add('active');
+            });
+        });
+      </script>
+
+    </main>
+
+    <footer class="social">
+      <img src="https://upload.wikimedia.org/wikipedia/en/9/9f/Twitter_bird_logo_2012.svg">
+      <img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/F_icon.svg">
+      <p class="contact">
+        <a href="contact.html">Contact</a>
+      </p>
+    </footer>
+
+    <footer class="legal">
+      <p>Mentions légales - Plan du site</p>
+    </footer>
+  </body>
+</html>
author	Kévin Le Gouguec <kevin.legouguec@gmail.com>	2020-11-29 23:15:22 +0100
committer	Kévin Le Gouguec <kevin.legouguec@gmail.com>	2020-11-29 23:46:45 +0100
commit	9dadb33e6d3b0244929a7c6edc551b649c6accdc (patch)
tree	02e778f3a1c330210f463bda77bc59cf2de0b2e0 /programmes.html
parent	e19ac8c0cc8b071c5f2c455a8d1f78370949dcfe (diff)
download	quatuorbellefeuille.com-9dadb33e6d3b0244929a7c6edc551b649c6accdc.tar.xz