diff options
Diffstat (limited to 'programmes.html')
| -rw-r--r-- | programmes.html | 444 |
1 files changed, 192 insertions, 252 deletions
diff --git a/programmes.html b/programmes.html index 8616875..bce6afe 100644 --- a/programmes.html +++ b/programmes.html @@ -1,263 +1,203 @@ -<!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"> - <link rel="alternate" type="application/rss+xml" href="feed.xml"> - </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> +<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> - - <nav> - <ol> - <li class="dropdown"> - <a href="quatuor.html">Le quatuor</a> - <ul> - <li><a href="vlad.html"><img src="https://static.wikia.nocookie.net/goldensun/images/8/87/Isaac2.gif">Vlad</a></li> - <li><a href="garet.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3e/Garet_icon.gif">Garet</a></li> - <li><a href="ivan.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3d/Ivan_platinum.gif">Ivan</a></li> - <li><a href="sofia.html"><img src="https://static.wikia.nocookie.net/goldensun/images/4/43/Mia.gif">Sofia</a></li> - </ul> - </li> - <li><a href="actualités.html">Actualités</a></li> - <li class="current"><a href="programmes.html">Programmes</a></li> - <li><a href="gallerie.html">Gallerie</a></li> - </ol> - </nav> - - <div class="lang"> - EN + <div class="program"> + <a href="#program-b"> + <p class="summary">Programme B</p> + </a> </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 class="program"> + <a href="#program-c"> + <p class="summary">Programme C</p> + </a> </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 class="program"> + <a href="#program-d"> + <p class="summary">Programme D</p> + </a> </div> + </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'); + <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> - document.querySelectorAll('.program a').forEach((link) => { - link.addEventListener('click', function(click) { - if (click.ctrlKey || click.shiftKey) - return; + <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 prev = document.querySelector('.details.active'); - if (prev) - prev.classList.remove('active'); - var id = link.attributes['href'].value; - document.querySelector(id).classList.add('active'); - }); - }); - </script> + var anchor = document.location.hash; + if (anchor.match(/#program-/)) + document.querySelector(anchor).classList.add('active'); - </main> + document.querySelectorAll('.program a').forEach((link) => { + link.addEventListener('click', function(click) { + if (click.ctrlKey || click.shiftKey) + return; - <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"> - <a href="feed.xml"> - <img src="https://upload.wikimedia.org/wikipedia/en/4/43/Feed-icon.svg"> - </a> - <p class="contact"> - <a href="contact.html">Contact</a> - </p> - </footer> + 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> - <footer class="legal"> - <p>Mentions légales - Plan du site</p> - </footer> - </body> -</html> +</main> |