{% extends 'Default/base.html.twig' %}

{% block title %}Nous contactez{% endblock %}

{% block headId %}h-contact{% endblock %}

{% block headBackImg %}
    <img src="{{ asset('images/quino-al-302041-unsplash.jpg') }}" alt="" class="cover">
{% endblock %}

{% block banner_content %}
    <div class="no-padding form-head relative" id="banner-content">
        <div class="flex col">
            <h1 class="mnopadding adapt">Contactez-nous</h1>
            <img src="{{ asset('images/map.jpg') }}" alt="" class="">
        </div>
    </div>
{% endblock %}

{% block menu %}
    {%  include 'Default/menu.html.twig' with {'page':'contact' } %}
{% endblock %}

{% block menu_class %}contact-page-menu-bg{% endblock %}

{% block body %}
    <section class="contact primary-color bg-gray gpadding" id="contact-form">
        <div class="primary-color-bg white flex wrap space contact-detail">
            <div class="half flex row mw100 mpadding-10 right-20-in adapt">
                <i class="fas fa-map-marker-alt"></i>
                <p class="left-15 text-justify">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
            </div>
            <div class="quarter flex row mw100 mpadding-10 left-20-in adapt right-20-in">
                <i class="fa fa-phone fa-rotate-90 absolute"></i>
                <div class="left-40 adapt mnomargin">
                    <p class="left-20 adapt">
                        +229 00 00 00 00
                        <br>
                        +229 00 00 00 00
                    </p>
                </div>
            </div>
            <div class="quarter flex row mw100 mpadding-10 left-20-in adapt">
                <i class="fa fa-envelope"></i>
                <div class="left-15">
                    contact@olasoft.net
                    <br>
                    jobs@olasoft.net
                </div>
            </div>
        </div>
        <div>
            <form action="">
                <div class="flex wrap mnomargin">
                    <div class="half adapt mw100 right-5-in mnopadding">
                        <label>
                            <input type="text" placeholder="VOTRE NOM ET PRÉNOMS*">
                        </label>
                    </div>
                    <div class="half adapt mw100 left-5-in mnopadding">
                        <label>
                            <input type="text" placeholder="VOTRE SOCIÉTÉ">
                        </label>
                    </div>
                </div>
                <div class="flex wrap mnomargin">
                    <div class="half adapt mw100 right-5-in mnopadding">
                        <label>
                            <input type="text" placeholder="VOTRE FONCTION OU POSTE OCCUPÉ">
                        </label>
                    </div>
                    <div class="half adapt mw100 left-5-in mnopadding">
                        <label>
                            <input type="text" placeholder="VOTRE ADRESSE E-MAIL*">
                        </label>
                    </div>
                </div>
                <div class="flex wrap mnomargin">
                    <div class="half adapt mw100 right-5-in mnopadding">
                        <label>
                            <input type="text" placeholder="VOTRE NUMÉRO DE TÉLEPHONE*">
                        </label>
                    </div>
                    <div class="half adapt mw100 left-5-in mnopadding">
                        <label>
                            <input type="text" placeholder="L’OBJET DU MESSAGE*">
                        </label>
                    </div>
                </div>
                <div class="flex row">
                    <div class="adapt w100">
                        <label>
                            <textarea name="" id="" placeholder="VOTRE MESSAGE*"></textarea>
                        </label>
                    </div>
                </div>
                <div class="">
                    <input type="submit" value="ENVOYER VOTRE MESSAGE" class="btn primary-color-bg adapt bg-green alt radius mhalf">
                </div>
            </form>
        </div>
    </section>
{% endblock %}