app.kluk.fr/charte/exemple.html

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#F5F6F0">
  <title>Charte Kluk — exemple</title>
  <link rel="preload" href="fonts/young-serif-400.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="fonts/atkinson-hyperlegible-next-400.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="stylesheet" href="css/kluk.css">
  <link rel="icon" href="img/favicon.svg" type="image/svg+xml">
</head>
<body>
  <a class="evitement" href="#contenu">Aller au contenu</a>

  <header class="entete">
    <a class="logo" href="#" aria-label="Kluk, retour à l'accueil">kluk</a>
    <nav class="nav" aria-label="Navigation principale">
      <ul>
        <li><a href="#" aria-current="page">Accueil</a></li>
        <li><a href="#">Une autre page</a></li>
        <li><a href="#" class="bouton bouton-petit">Appel à l’action</a></li>
      </ul>
    </nav>
  </header>

  <main id="contenu" tabindex="-1">
    <article class="texte">
      <h1>Titre de page en Young&nbsp;Serif</h1>
      <p><em>Le chapeau : un paragraphe entièrement en italique, juste sous le titre.</em></p>

      <p>Texte courant en Atkinson Hyperlegible Next, avec <a href="#">un lien souligné de vert</a>, du <strong>gras</strong>, de l’<em>italique</em> et du <code>code</code>.</p>

      <p><a class="bouton" href="#">Bouton principal</a></p>

      <figure class="tasses">
        <svg viewBox="0 0 580 214" role="img" aria-labelledby="tasses-titre">
          <title id="tasses-titre">Illustration : trois tasses de couleur alignées sur la table, et une quatrième posée sur la Kluk, fumante.</title>
          <defs>
            <g id="tasse">
              <path class="tasse-anse" d="M63 22 C86 20 88 60 60 62" />
              <path class="tasse-corps" d="M3 6 L10 78 Q11 86 20 86 L48 86 Q57 86 58 78 L65 6 Z" />
              <path class="tasse-reflet" d="M13 18 L17 62" />
            </g>
          </defs>
          <rect class="table" x="0" y="200" width="580" height="14" rx="3" />
          <path class="table-fil" d="M0 200 H580" />
          <use href="#tasse" x="34" y="114" class="humeur-gris" />
          <use href="#tasse" x="132" y="114" class="humeur-orange" />
          <use href="#tasse" x="230" y="114" class="humeur-rouge" />
          <g class="kluk-illu" transform="translate(410 98)">
            <g class="vapeur" aria-hidden="true">
              <path d="M22 -6 c-9 -11 9 -20 0 -31 c-9 -11 9 -20 0 -31" />
              <path d="M44 -10 c-9 -11 9 -20 0 -31 c-9 -11 9 -20 0 -31" />
            </g>
            <use href="#tasse" x="0" y="0" class="humeur-vert" />
            <rect class="kluk-socle" x="-22" y="86" width="112" height="16" rx="8" />
            <circle class="kluk-voyant" cx="34" cy="94" r="2.6" />
          </g>
        </svg>
      </figure>

      <h2>Intertitre de section</h2>
      <p>Les intertitres ménagent un grand espace au-dessus d’eux (4,5&nbsp;rem) pour découper la page en respirations.</p>

      <p class="exergue">Une phrase mise en exergue, en serif, soulignée d’un trait orange.</p>

      <figure class="photo">
        <div class="photo-attente">
          <svg viewBox="0 0 40 32" aria-hidden="true" focusable="false"><path d="M3 3 L6 25 Q6.5 29 10.5 29 L24.5 29 Q28.5 29 29 25 L32 3 Z M31.5 8 C39 8 39.5 21 30 22" /></svg>
          <p><strong>Photo à venir</strong><br>Description de la photo attendue.</p>
        </div>
        <figcaption>Légende facultative sous la photo.</figcaption>
      </figure>

      <div class="calendrier" aria-hidden="true" id="calendrier"></div>

      <form class="formulaire" onsubmit="return false">
        <div class="champ">
          <label for="champ-email">Votre adresse mail <span class="precision">(obligatoire)</span></label>
          <input id="champ-email" name="Email" type="email" required autocomplete="email">
        </div>
        <fieldset class="champ">
          <legend>Ce que vous aimeriez faire <span class="precision">(cochez tout ce qui vous ressemble)</span></legend>
          <ul class="choix">
            <li><input id="choix-1" type="checkbox" name="choix[]" value="1" checked><label for="choix-1">Premier choix</label></li>
            <li><input id="choix-2" type="checkbox" name="choix[]" value="2"><label for="choix-2">Deuxième choix</label></li>
          </ul>
        </fieldset>
        <div class="champ">
          <label for="champ-message">Un mot, une idée, une question ? <span class="precision">(facultatif)</span></label>
          <textarea id="champ-message" name="Message" rows="5"></textarea>
        </div>
        <p class="formulaire-erreur" role="alert">Message d’erreur (masqué par défaut avec l’attribut <code>hidden</code>).</p>
        <button class="bouton" type="submit">Envoyer</button>
        <p class="formulaire-secours">Texte de secours, affiché dans un <code>&lt;noscript&gt;</code>.</p>
      </form>

      <p class="note">Une note discrète en fin de page.</p>
    </article>
  </main>

  <footer class="pied">
    <div class="pied-interieur">
      <p class="pied-phrase">Une petite phrase en serif, facultative.</p>
      <ul class="pied-liens">
        <li><a href="#">Premier lien</a></li>
        <li><a href="#">Mentions légales</a></li>
      </ul>
    </div>
  </footer>

  <script>
    // Remplit le calendrier de démonstration : chaque groupe de 7 lettres est une semaine.
    // g = gris, o = orange, v = vert, r = rouge.
    var semaines = "vvovvvg vvvvovv ovvrvvv vvgvvvo ovvvvvv rrovrrr rorrvvo gvggggg gggvggg gogggvg ggoggvg vvgvvvv ovvvovv vrvvvov vvvvovv ovvgvvv vvovvrv vvvovvv vgvvvvo vvvvovv";
    document.getElementById("calendrier").innerHTML = semaines.replace(/ /g, "").split("").map(function (j) {
      return '<span class="jour jour-' + j + '"></span>';
    }).join("");
  </script>
</body>
</html>