{% extends 'layout.twig' %}

{% block title "Ğ1-Marché - Contact" %}
{% block body %}
    <style>
        .main {
            width: 900px;
            font-family: "Bree Serif", Arial;
            color: black;
            text-align: center;
        }
        .main h2, h3 {
            padding-left: 5px;
            padding-top: 5px;
            margin-bottom: 15px;
        }
        .equipe {
            width: 427px;
            height: 167px;
            margin-left: auto;
            margin-right: auto;
            background: black;
            border: 1px solid rgba(255,255,255,0.2);
            display:flex;
            flex-direction: row;
        }
        .la_page {
            text-align: center;
            width: 874px;
            margin-left: auto;
            margin-right: auto;
        }
        .avatar {
            font-family: 'Kalam', cursive;
            border: 2px solid rgba(255,255,255,0.8);
            color: white;
            text-align: center;
            flex-direction: column;
        }
        .avatar img{
            margin-top: 2px;
            margin-bottom: -2px;
        }
        .header {
            text-align: center;
        }
        img.img_header {
            width: 294px;
            height: 294px;
        }
        img.nox {
            width: 137px;
            height: 137px;
        }
        img.poka {
            width: 136px;
            height: 136px;
        }
        img.attilax {
            width: 134px;
            height: 134px;
        }
        .cadre {
            font-family: Bree Serif;
            color:white;
            width: 879px;
            padding: 10px 20px;
            height: auto;
            text-align: left;
            margin-left: auto;
            margin-right: auto;
            background: black;
            border: solid 0px;
        }
        #content_contacts {
            text-align: justify;
            text-justify: inter-word;
        }
    </style>
    {% if explodeUrl()[1]=='contact' %}
        <script type="text/javascript">
            $('.fond').css('background-image', "url('/images/background_contacts.jpg')");
        </script>
    {%  endif %}
<div class="main" style="background:none;">
    <div class="header">
       <img class="img_header" src="/images/logo_contacts.jpg" style="width: 294px;height: 294px;" alt="Ğ1-Marché" title="Logo Contact" />
    </div>
    <p>
       <h3 style="text-align:center;">QUI SOMMES-NOUS ?</h3>
    </p>
    <div class="equipe">
        <div class="avatar">
            <img class="nox" src="/images/nox.png" alt="" title="nox" />
            NOX
        </div>
        <div class="avatar">
            <img class="poka" src="/images/poka.png" alt="" title="Poka" />
            POKA
        </div>
        <div class="avatar">
            <img class="attilax" src="/images/attilax.png" alt="" title="Attilax" />
            ATTILAX
        </div>
    </div>
    <div class="la_page">
        <div class="cadre">
            <div id="content_contacts">
                <p>Utilisateurs et membres de la Monnaie Libre depuis deux ans, nous
                    avons voulu créer un outil permettant de gérer et d'organiser les
                    G-marchés dans toute la France. </p>
                <p>Avec Ğ1-MARCHÉ, vous pouvez proposer à l'avance, consulter,
                    pré-acheter, faire une demande en vue du prochain G-Marché près de
                    chez vous... Votre ville n'apparaît pas ? Il suffit de nous en faire
                    la demande, et nous l'intégrons dans le site. Nous vous fournissons
                    une redirection, un dossier générique avec le code source, vous
                    n'avez plus qu'à changer l'image du fond et le logo par ceux de
                    votre choix pour symboliser votre ville, et votre Ğ1-marché local
                    est prêt... </p>
                <h4>Pour nous contacter : gmarche@axiom-team.fr </h4>
            </div>
        </div>
    </div>
</div>
{% endblock %}