diff options
Diffstat (limited to 'programmes.html')
| -rw-r--r-- | programmes.html | 251 |
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> |