html/contact.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/form.css">
    <title>Contact</title>
</head>
<body ontouchstart="">
    <header>
        <menu>
            <a href="#" onclick="document.getElementById('search').focus()"><img onclick="this.focus()" id="searchbar" src="../media/assets/search.png" alt="Recherche" title="Recherche"></a>
            <form action="." id="searchform">
            <input type="search" name="search" id="search" role="search">
            </form>
        </menu>
        <menu>
            <a href="../index.html"><img class="link" src="../media/assets/home.png" alt="Accueil" title="Accueil"></a>
        </menu>
    </header>
    <form action="mail.php" method="post">
        <input type="mail" name="mail" placeholder="Votre adresse mail">
        <input type="name" name="name" placeholder="Vos noms et prénoms">
        <input type="text" name="subject" placeholder="Le sujet de votre message">
        <textarea style="font-size: 12pt" font-family="system-ui" name="message" placeholder="Votre message..." id="message"></textarea>
        <input type="submit">
    </form>
    <span>
        <h2>Responsable ressources</h2>
        <h3>Anne Guyader</h3>
        <address>anne@tisserands.bzh</address>
        <h4>06 43 38 39 49</h4>
        <h2>Responsable technique</h2>
        <h3>Adrien Ferron</h3>
        <address>site@lacapsule.org</address>
        <h4>07 86 44 77 52</h4>
    </span>
    <footer>
        <menu class="footer">
            <a href="contact.html"><img class="link" src="../media/assets/mail.png" alt="Contact" title="Contact"></a>
            <a href="user.html"><img class="link" src="../media/assets/user.png" alt="Profil" title="Profil"></a>
            <a href="settings.html"><img class="link" src="../media/assets/settings.png" alt="Paramètres" title="Paramètres"></a>
            <a href="#"><img class="link" src="../media/assets/lock.png" alt="Se deconnecter" title="Se deconnecter"></a>
        </menu>
    </footer>
</body>
</html>