templates/vendre.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Vendre{% endblock %}
  5. {% block body %}
  7.     {% set headerContent = content('Contact', 'Header') %}
  8.     {% set sectionContent = content('Vendre', 'Vendre') %}
  10.     {% if headerContent.picture is defined and headerContent.picture is not empty %}
  11.         {% set backgroundImage = headerContent.picture[0].path %}
  12.     {% else %}
  13.         {% set backgroundImage = 'empty' %}
  14.     {% endif %}
  15.     <header class="header-habiter vendre col-lg-8 mx-auto" style="background: url({{ asset('img/vendre.jpg') }})no-repeat center center;background-size:cover;height:740px;">
  16.         <div class="container-fluid">
  17.             <div class="col-lg-8 mx-auto div-svg-header">
  18.                 <div class="header-habiter-div">
  19.                 </div>
  20.             </div>
  21.         </div>
  22.     </header>
  24.     <div class="container-fluid" style="margin-bottom: 80px">
  25.         {% set contactContent = content('Contact', 'Section-1') %}
  26.         <div class="col-lg-8 mx-auto div-svg-header pre-section">
  27.             <div class="col-lg-4" style="font-size: 2.3em;display: flex;flex-direction: column;margin-left: 10px;">
  28.                 <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  29.                     <path id="Tracé_76" data-name="Tracé 76" d="M682.759,232.441h-9.089v14.77l9.089-1.931Z" transform="translate(-673.669 -232.441)" fill="#f6a400"/>
  30.                 </svg>
  31.                 <h1 class="project-title contact">{{ sectionContent.name }}</h1>
  32.             </div>
  33.             <div class="separator"></div>
  34.             <div class="col-lg-6 pre-section-content">
  35.                 {{ sectionContent.content|raw }}
  36.             </div>
  37.         </div>
  40.         {{ form_start(form) }}
  41.         <div id="div-form-contact" class="form-group col-lg-8 mx-auto" style="display: flex;">
  42.             <div class="col-lg-4 div-form-contact-content" style="display: flex; flex-direction: column;">
  43.                 <div class="form-material floating contact">
  44.                     {{ form_widget(form.name, {'attr': { 'class':'form-control', 'placeholder': 'Nom*'}}) }}
  45.                     {{ form_errors(form.name) }}
  46.                 </div>
  47.                 <div class="form-material floating contact">
  48.                     {{ form_widget(form.firstname, {'attr': { 'class':'form-control', 'placeholder': 'Prénom*'}}) }}
  49.                     {{ form_errors(form.firstname) }}
  50.                 </div>
  51.                 <div class="form-material floating contact">
  52.                     {{ form_widget(form.mail, {'attr': { 'class':'form-control', 'placeholder': 'Mail*'}}) }}
  53.                     {{ form_errors(form.mail) }}
  54.                 </div>
  55.                 <div class="form-material floating contact">
  56.                     {{ form_widget(form.phone, {'attr': { 'class':'form-control', 'placeholder': 'Téléphone*'}}) }}
  57.                     {{ form_errors(form.phone) }}
  58.                 </div>
  59.                 <div class="form-material floating contact position-relative">
  60.                     {{ form_widget(form.file, {'attr': { 'class':'form-control file-select', 'placeholder': 'Joindre un fichier &nbsp (.doc, .pdf, .jpeg / max. 5mo) '}}) }}
  61.                     {{ form_errors(form.file) }}
  62.                     <div style="height:35px;width:35px;background: #707070;right:0;top:0;" class="position-absolute">
  63.                         <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35">
  64.                             <g id="Groupe_4187" data-name="Groupe 4187" transform="translate(-695 -829)">
  65.                                 <rect id="Rectangle_139" data-name="Rectangle 139" width="35" height="35" transform="translate(695 829)" fill="#5f5f5f"/>
  66.                                 <path id="np_download_4247984_000000" d="M24.127,24.127V17.751H25.4V25.4H5V17.751H6.275v6.376Zm-17.852,0H24.127V17.751H25.4V25.4H5V17.751H6.275Zm9.563-5.162,4.784-5.047.955.888-6.437,6.77L8.826,14.937l.955-.888,4.784,4.916V5h1.275Zm-1.326,2.611.033.035v-.035Z" transform="translate(697.799 831.799)" fill="#fff"/>
  67.                             </g>
  68.                         </svg>
  69.                     </div>
  70.                 </div>
  71.             </div>
  72.             <div class="col-lg-6" style="display: flex; flex-direction: column">
  73.                 <div class="form-material floating contact selectdiv">
  74.                     {{ form_widget(form.object, {'attr': { 'class':'form-control'}}) }}
  75.                     {{ form_errors(form.object) }}
  76.                 </div>
  77.                 <div class="form-material floating contact">
  78.                     {{ form_widget(form.message, {'attr': { 'class':'form-control', 'placeholder': 'Votre message'}}) }}
  79.                     {{ form_errors(form.message) }}
  80.                 </div>
  81.             </div>
  82.             <div class="col-lg-1">
  83.                 <div class="submit-contact-button">
  84.                     <div>
  85.                         <button id="login_user" class="col-lg-12 offset-lg-4btn btn-primary" type="submit" style="background-color: #f6a400; border-color: #f6a400;">
  86.                             <?xml version="1.0" encoding="UTF-8"?>
  87.                             <svg id="SVGDoc" width="19" height="15" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:avocode="https://avocode.com/" viewBox="0 0 19 15"><defs></defs><desc>Generated with Avocode.</desc><g><g transform="rotate(90 9.5 7.5)"><title>np_arrow-up_888648_000000</title><path d="M16.10552,5.28141v0l-6.60555,-6.60459v0l-6.60554,6.60459v0l1.3808,1.3808v0l4.23854,-4.23949v0v13.90055v0h1.97232v0v-13.90055v0l4.23855,4.23949v0z" fill="#ffffff" fill-opacity="1"></path></g></g></svg>
  88.                         </button>
  89.                     </div>
  90.                 </div>
  91.             </div>
  93.             {{ form_end(form) }}
  94.         </div>
  95.     </div>
  97.     <section style="background:#F7F7F7" class="pt-5 pb-5">
  98.         <div class="col-lg-8 mx-auto">
  99.             <div class="col-lg-5 title-vendre-other">
  100.                 <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  101.                     <path id="Tracé_76" data-name="Tracé 76" d="M682.759,232.441h-9.089v14.77l9.089-1.931Z" transform="translate(-673.669 -232.441)" fill="#f6a400"></path>
  102.                 </svg>
  103.                 <h1 class="project-title">
  104.                     NOS biens disponibles<br> À la <span style="color:#F6A400">vente</span>
  105.                 </h1>
  106.             </div>
  107.             <div id="propertiesOther" class="vendre col-lg-12 mt-5" style="display: flex; flex-wrap: wrap; flex-direction: row">
  108.                 {% for property in salesProperties %}
  109.                     <div  class="other col-xl-4 col-lg-6 col-md-12 col-sm-12 div-img-hover-2" style="cursor: pointer">
  110.                         {% if property.pictures is not empty %}
  111.                             <div class="position-relative properties-slide slick-slide-single-{{ loop.index }}">
  112.                                 {% for picture in property.pictures|slice(0,3) %}
  113.                                     {#                                    <img class="img-100" src="{{ picture.url }}">#}
  114.                                     {% set url = 'http' in picture.url ? picture.url : asset('uploads/images/properties/'~property.id~'/'~picture.url) %}
  115.                                     <div class="img" style="background-image: url('{{ url }}')"  onclick="location.href='{{ path('property-detail', {'id': property.id}) }}'">
  116.                                     </div>
  117.                                 {% endfor %}
  118.                             </div>
  120.                         {% else %}
  121.                             <div class="img" style="background-image: url('{{ asset('build/Hudson_Ontario2.png') }}')"></div>
  122.                         {% endif %}
  123.                         <a href="{{ path('property-detail', {'id': property.id}) }}">
  124.                         <div class="row col-md-12 justify-content-between infos-list">
  125.                             <ul class="col-md-4 items">
  126.                                 <li class="item surface">
  127.                                     <img src="{{ asset('img/surface.svg') }}" class="surface-logo"> {{ property.area.value == null ? '' : property.area.value ~ areaConversion(property.area.unit) }}
  128.                                 </li>
  129.                             </ul>
  130.                             <div class="col-md-8 properties-price d-flex justify-content-end">
  131.                                 {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value|number_format(2, ',', ' ') ~  property.price.currency|replace({"EUR": " €"})  }}
  132.                             </div>
  133.                         </div>
  134.                         <p class="city">{{ property.city.name }}</p>
  135.                         <p class="project-name">{{ getTypeProperty(property.type) }}</p>
  136.                         </a>
  137.                     </div>
  138.                 {% endfor %}
  139.             </div>
  140.             <div id="link-none" class="col-lg-12 mx-auto other-property-link div-svg-header d-flex justify-content-end" style="margin-top:0;">
  141.                 <div>
  142.                     <a id="link-none-a d-flex" class="property-span-arrow" href="{{ path('properties', {'keyword': 'vente'}) }}">Découvrir plus
  143.                         <svg class="svg-inline--fa fa-arrow-right fa-w-14 property-arrow" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg><!-- <i class="fas fa-arrow-right property-arrow"></i> Font Awesome fontawesome.com -->
  144.                     </a>
  145.                 </div>
  146.             </div>
  147.         </div>
  148.     </section>
  150.     <section style="background:#F7F7F7" class="pt-5 pb-5">
  151.         <div class="col-lg-8 mx-auto">
  152.             <div class="col-lg-5 title-vendre-other">
  153.                 <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  154.                     <path id="Tracé_76" data-name="Tracé 76" d="M682.759,232.441h-9.089v14.77l9.089-1.931Z" transform="translate(-673.669 -232.441)" fill="#f6a400"></path>
  155.                 </svg>
  156.                 <h1 class="project-title">
  157.                     NOS biens disponibles<br> À la <span style="color:#F6A400">location</span>
  158.                 </h1>
  159.             </div>
  160.             <div id="propertiesOther" class="col-lg-12 mt-5" style="display: flex; flex-wrap: wrap; flex-direction: row">
  161.                 {% for property in rentsProperties %}
  162.                     <div  class="other col-xl-4 col-lg-6 col-md-12 col-sm-12 div-img-hover-2" style="cursor: pointer">
  163.                         {% if property.pictures is not empty %}
  164.                             <div class="position-relative properties-slide slick-slide-rent-{{ loop.index }}">
  165.                                 {% for picture in property.pictures|slice(0,3) %}
  166.                                     {#                                    <img class="img-100" src="{{ picture.url }}">#}
  167.                                     {% set url = 'http' in picture.url ? picture.url : asset('uploads/images/properties/'~property.id~'/'~picture.url) %}
  168.                                     <div class="img" style="background-image: url('{{ url }}')"  onclick="location.href='{{ path('property-detail', {'id': property.id}) }}'">
  169.                                     </div>
  170.                                 {% endfor %}
  171.                             </div>
  173.                         {% else %}
  174.                             <div class="img" style="background-image: url('{{ asset('build/Hudson_Ontario2.png') }}')"></div>
  175.                         {% endif %}
  176.                         <a href="{{ path('property-detail', {'id': property.id}) }}">
  177.                         <div class="row col-md-12 justify-content-between infos-list">
  178.                             <ul class="col-md-4 items">
  179.                                 {% if property.area.value %}
  180.                                     <li class="item surface">
  181.                                         <img src="{{ asset('img/surface.svg') }}" class="surface-logo"> {{ property.area.value == null ? '' : property.area.value ~ areaConversion(property.area.unit) }}
  182.                                     </li>
  183.                                 {% endif %}
  184.                             </ul>
  185.                             <div class="col-md-8 properties-price d-flex justify-content-end">
  186.                                 {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value|number_format(2, ',', ' ') ~  property.price.currency|replace({"EUR": " €"})  }}
  187.                             </div>
  188.                         </div>
  189.                         <p class="city" {% if not property.area.value %}style="margin-top:-30px;"{% endif %}>{{ property.city.name }}</p>
  190.                         <p class="project-name">{{ getTypeProperty(property.type) }}</p>
  191.                         </a>
  192.                     </div>
  193.                 {% endfor %}
  194.             </div>
  195.             <div id="link-none" class="col-lg-12 mx-auto other-property-link div-svg-header d-flex justify-content-end" style="margin-top:0;">
  196.                 <div>
  197.                     <a id="link-none-a d-flex" class="property-span-arrow" href="{{ path('properties', {'keyword': 'location'}) }}">Découvrir plus
  198.                         <svg class="svg-inline--fa fa-arrow-right fa-w-14 property-arrow" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg><!-- <i class="fas fa-arrow-right property-arrow"></i> Font Awesome fontawesome.com -->
  199.                     </a>
  200.                 </div>
  201.             </div>
  202.         </div>
  203.     </section>
  206.     <script>
  207.         const arrowPrev = `<svg xmlns="http://www.w3.org/2000/svg" width="7.985" height="13.211" viewBox="0 0 7.985 13.211">
  208.                                 <path id="np_arrow-up_888648_000000" d="M13.211,1.381l-6.606,6.6L0,1.381,1.381,0,6.606,5.022h0L11.83,0Z" transform="translate(7.985) rotate(90)" fill="#fff"/>
  209.                             </svg>`;
  210.         const arrowNext= `<svg xmlns="http://www.w3.org/2000/svg" width="7.985" height="13.211" viewBox="0 0 7.985 13.211">
  211.                             <path id="np_arrow-up_888648_000000" d="M13.211,1.381l-6.606,6.6L0,1.381,1.381,0,6.606,5.022h0L11.83,0Z" transform="translate(7.985) rotate(90)" fill="#fff"/>
  212.                         </svg>`;
  214.         var countProperties = '{{ salesProperties|length }}';
  215.         var loopProp = 1;
  216.         while (loopProp <= countProperties) {
  217.             $('.slick-slide-single-'+loopProp).slick({
  218.                 'slidesToShow': 1,
  219.                 'prevArrow': `<div class="arrow-left square-black d-flex justify-content-center align-items-center position-absolute">${arrowPrev}</div>`,
  220.                 'nextArrow': `<div class="arrow-right square-black d-flex justify-content-center align-items-center position-absolute">${arrowNext}</div>`
  221.             });
  222.             loopProp++;
  223.         }
  225.         var countPropertiesRent = '{{ rentsProperties|length }}';
  226.         var loopPropRent = 1;
  227.         while (loopPropRent <= countPropertiesRent) {
  228.             $('.slick-slide-rent-'+loopPropRent).slick({
  229.                 'slidesToShow': 1,
  230.                 'prevArrow': `<div class="arrow-left square-black d-flex justify-content-center align-items-center position-absolute">${arrowPrev}</div>`,
  231.                 'nextArrow': `<div class="arrow-right square-black d-flex justify-content-center align-items-center position-absolute">${arrowNext}</div>`
  232.             });
  233.             loopPropRent++;
  234.         }
  236.     </script>
  237.     <script>
  238.         document.querySelector('.selectdiv').style.display = 'none';
  239.         document.getElementById('contact_form_message').style.height = '276px';
  240.     </script>
  241. {% endblock %}