Antalaha Propre : site multi-pages d'une association

pages/contact.html · 3.1 Ko

<!DOCTYPE html>
<!--
  =====================================================================
  pages/contact.html : page « Contact »
  =====================================================================
  Rôle : coordonnées de l'association et formulaire de message.
  Chemins : on est dans pages/, donc ../css/style.css, ../index.html...
-->
<html lang="fr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact – Antalaha Propre</title>
  <meta name="description" content="Contacter Antalaha Propre : adresse, téléphone et formulaire de message.">
  <meta name="color-scheme" content="light dark">
  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="../css/impression.css" media="print">
</head>

<body>
  <a class="lien-evitement" href="#contenu">Aller au contenu principal</a>

  <header class="entete">
    <div class="entete__interieur">
      <a class="entete__nom" href="../index.html">Antalaha Propre</a>
      <nav class="nav" aria-label="Navigation principale">
        <ul class="nav__liste">
          <li><a href="../index.html">Accueil</a></li>
          <li><a href="actions.html">Actions</a></li>
          <li><a href="agenda.html">Agenda</a></li>
          <li><a href="contact.html" aria-current="page">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main id="contenu" tabindex="-1">
    <h1>Nous contacter</h1>

    <h2>Coordonnées</h2>
    <!-- <address> : coordonnées de contact. Sur papier, la feuille
         impression.css affiche l'adresse des liens tel: et mailto:. -->
    <address>
      <p>Permanence : samedi de 8 h à 12 h, rue du Port, Antalaha.</p>
      <p>Téléphone : <a href="tel:+261340000002">034 00 000 02</a></p>
      <p>Courriel : <a href="mailto:contact@antalaha-propre.example">contact@antalaha-propre.example</a></p>
    </address>

    <h2>Écrire un message</h2>

    <!-- FORMULAIRE DE DÉMONSTRATION : il ne s'envoie nulle part.
         Un site statique n'a pas de serveur pour recevoir les données, et
         le bac à sable du portail bloque l'envoi des formulaires.
         On apprend ici à le construire (étiquettes, champs, validation).
         Il est masqué à l'impression (voir impression.css). -->
    <form class="formulaire" action="#" method="get">
      <p class="note">Formulaire de démonstration : le message n'est pas envoyé.</p>
      <div>
        <label for="nom">Votre nom</label>
        <input type="text" id="nom" name="nom" autocomplete="name" required>
      </div>
      <div>
        <label for="courriel">Votre courriel</label>
        <input type="email" id="courriel" name="courriel" autocomplete="email" required>
      </div>
      <div>
        <label for="message">Votre message</label>
        <textarea id="message" name="message" rows="5" required></textarea>
      </div>
      <button class="bouton" type="submit">Envoyer</button>
    </form>
  </main>

  <footer class="pied">
    <p>Antalaha Propre, association fictive créée pour ce tutoriel HTML/CSS.</p>
    <p>Illustrations libres de droits de la médiathèque du Portail Antalaha.</p>
  </footer>
</body>
</html>