122 lines
5.8 KiB
HTML
122 lines
5.8 KiB
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 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 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><noscript></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>
|