{% extends 'landing/index.html' %}
{% load static %} 
{% block container %}

<div class="flex-row adaptive-992">
    <div class="deranged-data">
        <h1>Свяжитесь с нами!</h1>
        <p class="contacts-text">Здесь вы найдете всю необходимую информацию для связи с нашей компанией.
            Мы стремимся к тому, чтобы наше сотрудничество было максимально комфортным
             и продуктивным для всех наших клиентов и
            партнеров.</p>
        <div class="flex-row">
            <img class="data" src="{% static 'landing/img/arobase.svg' %}" alt="arobase">
            <p class="email-margin">email@sharix.org</p>
            <img class="data" src="{% static 'landing/img/phone.svg' %}" alt="phone">
            <p>+7 999 999 99 00</p>
        </div>
        <div class="flex-row">
            <img class="data" src="{% static 'landing/img/mark.svg' %}" alt="mark">
            <p>г. Москва, ул. Большая Ордынка 5к3</p>
        </div>
        <iframe class="map"
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2245.7839946590307!2d37.622450612216845!3d55.744881992489226!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54aff269a51d7%3A0xc01707669cafbe93!2z0YPQuy4g0JHQvtC70YzRiNCw0Y8g0J7RgNC00YvQvdC60LAsIDUsINCc0L7RgdC60LLQsCwgMTE1MDM1!5e0!3m2!1sru!2sru!4v1706554474958!5m2!1sru!2sru"
            width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
    <div class="contacts-data">
        <div id="name" input-group="true" class="input-group">
            <p>Как Вас зовут?</p>
            <input autocomplete="off" class="main-input" type="text">
            <label class="error-input"></label>
        </div>
        <div id="email" input-group="true" class="input-group">
            <p>E-mail</p>
            <input autocomplete="off" id="email" class="main-input" type="text">
            <label class="error-input"></label>
        </div>
        <div id="phone" input-group="true" class="input-group">
            <p>Телефон</p>
            <input autocomplete="off" id="phone" class="main-input" type="text">
            <label class="error-input"></label>
        </div>
        <div id="comment" input-group="true" class="input-group">
            <p>Комментарий</p>
            <textarea class="second-input comment-input"></textarea>
            <label class="error-input"></label>
        </div>
        <button id="send_button" class=" proto-button send cursor-pointer">Отправить</button>
    </div>
</div>


{% endblock %}