templates/publicPages/contacts.html.twig line 1

Open in your IDE?
  1. {% extends 'main.html.twig' %}
  3. {% block title %}{{ controller_name }}{% endblock %}
  5. {% block header_additional_style %}
  6. {{ parent() }}
  7. <style>
  8.     :root .main-content__contacts {
  9.         --orange: rgba(195, 152, 107, 1);
  10.         --gold: #C3986B;
  11.         --white: rgba(255, 255, 255, 1);
  12.         --gray: rgba(211, 214, 216, 1);
  13.         --black: rgba(0, 0, 0, 1);
  14.         --blue: rgba(19, 47, 61, 1);
  15.         --fs-default: 16px;
  16.         --fs-small: 12px;
  17.     }
  18.     .body__gray { background: #f6f6f6; }
  19.     .main-content__contacts { background: #f6f6f6; width: 1214px; font-size: 16px; margin: auto; padding-top: 150px; }
  20.     .main-content__contacts .main-content-inner {  }
  21.     .main-content__contacts .title { text-transform: uppercase; color: var(--blue); font-family: Stixt, sans-serif}
  22.     .main-content__contacts h1.title, .main-content__contacts h2.title { font-size: 4.5rem; }
  23.     .main-content__contacts h3.title { font-size: 2.3rem; }
  24.     .main-content__contacts .title__center { text-align: center; }
  25.     .main-content__contacts .title__space { padding: 2rem 0rem; }
  26.     .main-content__contacts .bg_white { background: var(--white); }
  27.     .main-content__contacts .content_wrapper { padding: 4rem; }
  29.     /* .company-hello, .company-data, .company-contacts { padding: 4rem; } */
  30.     .company-title { display: flex; justify-content: space-between; }
  31.     .company-title-text h4 { font-family: Stixt, sans-serif; font-size: 2.4rem; }
  32.     .company-download { display: flex; justify-content: end; }
  33.     .company-download .btn--download { width: 300px; }
  35.     .company-data .item { border-top: solid 1px var(--gray); display: flex; width: 100%; }
  36.     .company-data .item .title { font-family: Montserrat; font-size: 14px; font-weight: normal; text-transform: none; width: 30%; border-right: solid 1px var(--gray); }
  37.     .company-data .item .title .content_wrapper { padding: 2rem 4rem; }
  38.     .company-data .item .data { width: 70%; }
  39.     .company-data .item .data .content_wrapper { padding: 2rem 4rem; display: flex; justify-content: space-between; width: 100%; }
  40.     .company-data .item .data .data-value { width: 99%; font-family: Montserrat; font-size: 16px; font-weight:bold; text-transform: none; }
  41.     .company-data .item .data .data-copy { width: 18px; }
  42.     .company-data .item .data .data-copy a { display: block; width: 18px; height: 18px; background: url('/assets/img/icons/copy.svg') center center no-repeat; }
  44.     .company-contacts {}
  45.     .company-contacts h4 { font-family: Montserrat; padding-bottom: 2rem; }
  46.     .company-contacts .items { display: flex; flex-wrap: wrap; width: 100%; }
  47.     .company-contacts .items .item { width: 33.333% }
  48.     .company-contacts .items .item .title {font-family: Montserrat; font-size: 14px; color: #878787; padding-bottom: 1rem; text-transform: none; font-weight: normal; }
  49.     .company-contacts .items .item .value { font-size: 16px; color: var(--blue); font-weight: bold; }
  51.     .company-address .city { display: flex; flex-wrap: wrap; width: 100%; margin-bottom: 2rem; }
  52.     .company-address .city .info { width: 50%; }
  53.     .company-address .city .info .item { margin-bottom: 3rem; }
  54.     .company-address .city .info .item .title { font-family: Montserrat; font-size: 14px; color: #878787; padding-bottom: 1rem; text-transform: none; font-weight: normal; }
  55.     .company-address .city .info .item .value { font-size: 16px; color: var(--blue); font-weight: bold; }
  56.     .company-address .city .map { width: 50%; }
  58.     @media screen and (max-width:1250px) {
  59.         .main-content__contacts { width: 1000px;  }
  60.     }
  61.     @media screen and (max-width:1050px) {
  62.         .main-content__contacts { width: 850px;  }
  63.     }
  64.     @media screen and (max-width:900px) {
  65.         .main-content__contacts { width: 95%; font-size: 14px; }
  66.     }
  67.     @media screen and (max-width:775px) {
  68.         .main-content__contacts h1.title,
  69.         .main-content__contacts h2.title { font-size: 3.5rem; }
  71.         .company-title-logo { display: none; }
  72.         .company-download { justify-content: normal; }
  73.     }
  74.     @media screen and (max-width:675px) {
  75.         .company-data .item { display: block; }
  76.         .company-data .item .title, .company-data .item .data { display: block; width: 100%; }
  77.         .company-data .item .title { border: none; }
  79.         .company-contacts .items .item { width: 100%; }
  81.         .company-address .city { border-bottom: 1px solid var(--gray); }
  82.         .company-address .city .info,
  83.         .company-address .city .map { width: 100%; padding-bottom: 1rem; }
  84.     }
  85. </style>
  86. {% endblock %}
  88. {% block body_class %}{{ parent() }} body__gray {% endblock %}
  89. {% block body_header_class %}{{ parent() }}{% endblock %}
  90. {% block body_header_content %}
  91.     <div style="background-color: rgba(19, 47, 61);">
  92.         {{ parent() }}
  93.     </div>
  94. {% endblock %}
  95. {% block footer_additional_javascript %}
  96. {{parent()}}
  97. <script>
  98. $(function() {
  99.     if(!navigator.clipboard) {
  100.         return;
  101.     }
  103.     $('.data-copy a').click(function() {
  104.         const text = $('#'+$(this).data('clipboard-target')).text();
  105.         navigator.clipboard.writeText(text);
  107.         $.notify("Скопировано!", "success");
  109.     });
  110. });
  112. </script>
  113. {% endblock %}
  114. {% block body_main_class %}{{parent()}} main-content main-content__contacts{% endblock %}
  115. {% block body %}
  116.     <div class="main-content-inner">
  117.         <h1 class="title title__center title__space">КОНТАКТНАЯ ИНФОРМАЦИЯ:</h1>
  119.         <div class="bg_white" style="margin-bottom: .5rem;">
  120.             <div class="company-hello content_wrapper">
  121.                 <div class="company-title">
  122.                     <div class="company-title-text">
  123.                         <h4>ОБЩЕСТВО С ОГРАНИЧЕННОЙ ОТВЕТСТВЕННОСТЬЮ<br />«ЭКСПЕРТНО-ПРАВОВОЕ АГЕНТСТВО»</h4>
  124.                         <p>(сокращенное наименование: ООО «ЭПА»)</p>
  125.                     </div>
  126.                     <div class="company-title-logo"><img src="{{ siteGlobals.globals.brandProperties.mainLogoUrl }}" alt></div>
  127.                 </div>
  128.                 <div class="company-download">
  129.                     <a href="{{ asset('/documents/'~ (siteGlobals.globals.service.code.value|default('notary')) ~  '/company_card.pdf') }}"
  130.                     class="btn btn--primary btn--download btn--xs">Скачать реквизиты</a>
  131.                 </div>
  132.             </div>
  134.             <div class="company-data">
  135.                 <div class="item">
  136.                     <div class="title"><div class="content_wrapper">Юридический и почтовый адрес<br>для направления корреспонденции:</div></div>
  137.                     <div class="data">
  138.                         <div class="content_wrapper">
  139.                             <div class="data-value" id="company-data-1">109472, г. Москва, Ташкентская ул., д. 29А</div>
  140.                             <div class="data-copy">
  141.                                 <a href="#" data-clipboard-target="company-data-1"></a>
  142.                             </div>
  143.                         </div>
  144.                     </div>
  145.                 </div>
  146.                 <div class="item">
  147.                     <div class="title"><div class="content_wrapper">ОГРН:</div></div>
  148.                     <div class="data">
  149.                         <div class="content_wrapper">
  150.                             <div class="data-value" id="company-data-2">1217800156606</div>
  151.                             <div class="data-copy">
  152.                                 <a href="#" data-clipboard-target="company-data-2"></a>
  153.                             </div>
  154.                         </div>
  155.                     </div>
  156.                 </div>
  157.                 <div class="item">
  158.                     <div class="title"><div class="content_wrapper">ИНН:</div></div>
  159.                     <div class="data">
  160.                         <div class="content_wrapper">
  161.                             <div class="data-value" id="company-data-3">{{ inn }}</div>
  162.                             <div class="data-copy">
  163.                                 <a href="#" data-clipboard-target="company-data-3"></a>
  164.                             </div>
  165.                         </div>
  166.                     </div>
  167.                 </div>
  168.                 <div class="item">
  169.                     <div class="title"><div class="content_wrapper">КПП:</div></div>
  170.                     <div class="data">
  171.                         <div class="content_wrapper">
  172.                             <div class="data-value" id="company-data-4">772101001</div>
  173.                             <div class="data-copy">
  174.                                 <a href="#" data-clipboard-target="company-data-4"></a>
  175.                             </div>
  176.                         </div>
  177.                     </div>
  178.                 </div>
  179.                 <div class="item">
  180.                     <div class="title"><div class="content_wrapper">Основная деятельность:</div></div>
  181.                     <div class="data">
  182.                         <div class="content_wrapper">
  183.                             <div class="data-value" id="company-data-5">Основой деятельностью Общества является разработка компьютерного программного обеспечения (ОКВЭД 62.01)</div>
  184.                             <div class="data-copy">
  185.                                 <a href="#" data-clipboard-target="company-data-5"></a>
  186.                             </div>
  187.                         </div>
  188.                     </div>
  189.                 </div>
  190.                 <div class="item">
  191.                     <div class="title"><div class="content_wrapper">Генеральный директор:</div></div>
  192.                     <div class="data">
  193.                         <div class="content_wrapper">
  194.                             <div class="data-value" id="company-data-5">Глек Дмитрий Владимирович</div>
  195.                             <div class="data-copy">
  196.                                 <a href="#" data-clipboard-target="company-data-5"></a>
  197.                             </div>
  198.                         </div>
  199.                     </div>
  200.                 </div>
  201.             </div>
  202.         </div>
  204.         <div class="bg_white">
  205.             <div class="company-contacts content_wrapper">
  206.                 <h4>Официальные каналы связи:</h4>
  207.                 <div class="items">
  208.                     <div class="item">
  209.                         <p class="title">Телефон:</p>
  210.                         <p class="value">{{ siteGlobals.globals.contactPhone }}</p>
  211.                     </div>
  212.                     <div class="item">
  213.                         <p class="title">Доступность:</p>
  214.                         <p class="value">с 07:00 до 19:00<span style="color: var(--gray);"><br />по Московскому времени</span></p>
  215.                     </div>
  216.                     <div class="item">
  217.                         <p class="title">Почта:</p>
  218.                         <p class="value">{{ siteGlobals.globals.contactEmail }}</p>
  219.                     </div>
  220.                 </div>
  221.             </div>
  222.         </div>
  225.         <div class="company-address content_wrapper">
  226.             <div class="city">
  227.                 <div class="info">
  228.                     <h2 class="title">Адреса</h2>
  230.                     <div class="item">
  231.                         <p class="title">Телефон:</p>
  232.                         <p class="value">{{ siteGlobals.globals.contactPhone }}</p>
  233.                     </div>
  234.                     <div class="item">
  235.                         <p class="title">Адрес:</p>
  236.                         <p class="value">Москва, Ташкентская улица, 29А</p>
  237.                     </div>
  238.                     <div class="item">
  239.                         <p class="title">Индекс:</p>
  240.                         <p class="value">109472</p>
  241.                     </div>
  242.                 </div>
  243.                 <div class="map">
  244.                     <iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3Ad34fdb09fe713b8416b4f13c94640a92af786954aa58620eeb7c7e79037ebbd6&amp;source=constructor"
  245.                         width="100%" height="400" frameborder="0"></iframe>
  246.                 </div>
  247.             </div>
  248.         </div>
  249.     </div>
  250. {% endblock %}