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') %}
  9.     {% if headerContent.picture is defined and headerContent.picture is not empty %}
  10.         {% set backgroundImage = headerContent.picture[0].path %}
  11.     {% else %}
  12.         {% set backgroundImage = 'empty' %}
  13.     {% endif %}
  14.     <header class="header-habiter col-lg-8 mx-auto" style="background-image: url({{ asset('img/vente.png') }}); height: 480px">
  15.         <div class="container-fluid">
  16.             <div class="col-lg-8 mx-auto div-svg-header">
  17.                 <div class="header-habiter-div">
  18.                 </div>
  19.             </div>
  20.         </div>
  21.     </header>
  23.     <div class="container-fluid" style="margin-top: 60px; margin-bottom: 80px">
  24.         {% set contactContent = content('Contact', 'Section-1') %}
  25.         <div class="col-lg-8 mx-auto div-svg-header pre-section">
  26.             <div class="col-lg-4" style="font-size: 2.3em;display: flex;flex-direction: column;margin-left: 10px;">
  27.                 <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  28.                     <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"/>
  29.                 </svg>
  30.                 <h1 class="project-title contact">VENDEZ AVEC NOUS</h1>
  31.             </div>
  32.             <div class="separator"></div>
  33.             <div class="col-lg-6 pre-section-content">
  34.                 Que vous souhaitiez vendre, acheter ou louer, n’hésitez pas à nous contacter pour toute information.
  35.             </div>
  36.         </div>
  39.         {{ form_start(form) }}
  40.         <div id="div-form-contact" class="form-group col-lg-8 mx-auto" style="display: flex;">
  41.             <div class="col-lg-4" style="display: flex; flex-direction: column; margin-right: 50px">
  42.                 <div class="form-material floating contact">
  43.                     {{ form_widget(form.name, {'attr': { 'class':'form-control', 'placeholder': 'Nom*'}}) }}
  44.                     {{ form_errors(form.name) }}
  45.                 </div>
  46.                 <div class="form-material floating contact">
  47.                     {{ form_widget(form.firstname, {'attr': { 'class':'form-control', 'placeholder': 'Prénom'}}) }}
  48.                     {{ form_errors(form.firstname) }}
  49.                 </div>
  50.                 <div class="form-material floating contact">
  51.                     {{ form_widget(form.mail, {'attr': { 'class':'form-control', 'placeholder': 'Mail*'}}) }}
  52.                     {{ form_errors(form.mail) }}
  53.                 </div>
  54.                 <div class="form-material floating contact">
  55.                     {{ form_widget(form.phone, {'attr': { 'class':'form-control', 'placeholder': 'Téléphone'}}) }}
  56.                     {{ form_errors(form.phone) }}
  57.                 </div>
  58.                 <div class="form-material floating contact position-relative">
  59.                     {{ form_widget(form.file, {'attr': { 'class':'form-control file-select', 'placeholder': 'Joindre un fichier &nbsp (.doc, .pdf, .jpeg / max. 5mo) '}}) }}
  60.                     {{ form_errors(form.file) }}
  61.                     <div style="height:35px;width:35px;background: #707070;right:0;top:0;" class="position-absolute">
  62.                         <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35">
  63.                             <g id="Groupe_4187" data-name="Groupe 4187" transform="translate(-695 -829)">
  64.                                 <rect id="Rectangle_139" data-name="Rectangle 139" width="35" height="35" transform="translate(695 829)" fill="#5f5f5f"/>
  65.                                 <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"/>
  66.                             </g>
  67.                         </svg>
  68.                     </div>
  69.                 </div>
  70.             </div>
  71.             <div class="col-lg-6" style="display: flex; flex-direction: column">
  72.                 <div class="form-material floating contact selectdiv">
  73.                     {{ form_widget(form.object, {'attr': { 'class':'form-control'}}) }}
  74.                     {{ form_errors(form.object) }}
  75.                 </div>
  76.                 <div class="form-material floating contact">
  77.                     {{ form_widget(form.message, {'attr': { 'class':'form-control', 'placeholder': 'Votre message'}}) }}
  78.                     {{ form_errors(form.message) }}
  79.                 </div>
  80.             </div>
  81.             <div class="col-lg-1">
  82.                 <div class="submit-contact-button">
  83.                     <div>
  84.                         <button id="login_user" class="col-lg-12 offset-lg-4btn btn-primary" type="submit" style="background-color: #f6a400; border-color: #f6a400;">
  85.                             <?xml version="1.0" encoding="UTF-8"?>
  86.                             <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>
  87.                         </button>
  88.                     </div>
  89.                 </div>
  90.             </div>
  92.             {{ form_end(form) }}
  93.         </div>
  94.     </div>
  96.     <section style="background:#F7F7F7" class="pt-5 pb-5">
  97.         <div class="col-lg-8 mx-auto">
  98.             <div class="col-lg-5 title-vendre-other">
  99.                 <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  100.                     <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>
  101.                 </svg>
  102.                 <h1 class="project-title">
  103.                     NOS biens disponibles<br> À la <span style="color:#F6A400">vente</span>
  104.                 </h1>
  105.             </div>
  106.             <div id="propertiesOther" class="vendre col-lg-12 mt-5" style="display: flex; flex-wrap: wrap; flex-direction: row">
  107.                 {% for property in salesProperties %}
  108.                     <div  class="col-xl-4 col-lg-6 col-md-12 col-sm-12 div-img-hover-2" style="cursor: pointer">
  109.                         {% if property.pictures is not empty %}
  110.                             <div class="position-relative properties-slide slick-slide-single-{{ loop.index }}">
  111.                                 {% for picture in property.pictures|slice(0,3) %}
  112.                                     {#                                    <img class="img-100" src="{{ picture.url }}">#}
  113.                                     <div class="img" style="background-image: url('{{ picture.url }}')"  onclick="location.href='{{ path('property-detail', {'id': property.id}) }}'">
  114.                                     </div>
  115.                                 {% endfor %}
  116.                             </div>
  118.                         {% else %}
  119.                             <div class="img" style="background-image: url('{{ asset('build/Hudson_Ontario2.png') }}')"></div>
  120.                         {% endif %}
  121.                         <div class="row col-md-12 justify-content-between infos-list">
  122.                             <ul class="col-md-4 items">
  123.                                 <li class="item surface">
  124.                                     <img src="{{ asset('img/surface.svg') }}" class="surface-logo"> {{ property.area.value == null ? '' : property.area.value ~ areaConversion(property.area.unit) }}
  125.                                 </li>
  126.                             </ul>
  127.                             <div class="col-md-8 properties-price d-flex justify-content-end">
  128.                                 {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value|number_format(2, ',', ' ') ~  property.price.currency|replace({"EUR": " €"})  }}
  129.                             </div>
  130.                         </div>
  131.                         <p class="city">{{ property.city.name }}</p>
  132.                         <p class="project-name">{{ property.reference }}</p>
  133.                     </div>
  134.                 {% endfor %}
  135.             </div>
  136.             <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;">
  137.                 <div>
  138.                     <a id="link-none-a d-flex" class="property-span-arrow" href="{{ path('properties', {'keyword': 'vente'}) }}">Découvrir plus
  139.                         <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 -->
  140.                     </a>
  141.                 </div>
  142.             </div>
  143.         </div>
  144.     </section>
  146.     <section style="background:#F7F7F7" class="pt-5 pb-5">
  147.         <div class="col-lg-8 mx-auto">
  148.             <div class="col-lg-5 title-vendre-other">
  149.                 <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  150.                     <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>
  151.                 </svg>
  152.                 <h1 class="project-title">
  153.                     NOS biens disponibles<br> À la <span style="color:#F6A400">location</span>
  154.                 </h1>
  155.             </div>
  156.             <div id="propertiesOther" class="col-lg-12 mt-5" style="display: flex; flex-wrap: wrap; flex-direction: row">
  157.                 {% for property in rentsProperties %}
  158.                     <div  class="col-xl-4 col-lg-6 col-md-12 col-sm-12 div-img-hover-2" style="cursor: pointer">
  159.                         {% if property.pictures is not empty %}
  160.                             <div class="position-relative properties-slide slick-slide-rent-{{ loop.index }}">
  161.                                 {% for picture in property.pictures|slice(0,3) %}
  162.                                     {#                                    <img class="img-100" src="{{ picture.url }}">#}
  163.                                     <div class="img" style="background-image: url('{{ picture.url }}')"  onclick="location.href='{{ path('property-detail', {'id': property.id}) }}'">
  164.                                     </div>
  165.                                 {% endfor %}
  166.                             </div>
  168.                         {% else %}
  169.                             <div class="img" style="background-image: url('{{ asset('build/Hudson_Ontario2.png') }}')"></div>
  170.                         {% endif %}
  171.                         <div class="row col-md-12 justify-content-between infos-list">
  172.                             <ul class="col-md-4 items">
  173.                                 <li class="item surface">
  174.                                     <img src="{{ asset('img/surface.svg') }}" class="surface-logo"> {{ property.area.value == null ? '' : property.area.value ~ areaConversion(property.area.unit) }}
  175.                                 </li>
  176.                             </ul>
  177.                             <div class="col-md-8 properties-price d-flex justify-content-end">
  178.                                 {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value|number_format(2, ',', ' ') ~  property.price.currency|replace({"EUR": " €"})  }}
  179.                             </div>
  180.                         </div>
  181.                         <p class="city">{{ property.city.name }}</p>
  182.                         <p class="project-name">{{ property.reference }}</p>
  183.                     </div>
  184.                 {% endfor %}
  185.             </div>
  186.             <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;">
  187.                 <div>
  188.                     <a id="link-none-a d-flex" class="property-span-arrow" href="{{ path('properties', {'keyword': 'location'}) }}">Découvrir plus
  189.                         <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 -->
  190.                     </a>
  191.                 </div>
  192.             </div>
  193.         </div>
  194.     </section>
  197.     <script>
  198.         const arrowPrev = `<svg xmlns="http://www.w3.org/2000/svg" width="7.985" height="13.211" viewBox="0 0 7.985 13.211">
  199.                                 <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"/>
  200.                             </svg>`;
  201.         const arrowNext= `<svg xmlns="http://www.w3.org/2000/svg" width="7.985" height="13.211" viewBox="0 0 7.985 13.211">
  202.                             <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"/>
  203.                         </svg>`;
  205.         var countProperties = '{{ salesProperties|length }}';
  206.         var loopProp = 1;
  207.         while (loopProp <= countProperties) {
  208.             $('.slick-slide-single-'+loopProp).slick({
  209.                 'slidesToShow': 1,
  210.                 'prevArrow': `<div class="arrow-left square-black d-flex justify-content-center align-items-center position-absolute">${arrowPrev}</div>`,
  211.                 'nextArrow': `<div class="arrow-right square-black d-flex justify-content-center align-items-center position-absolute">${arrowNext}</div>`
  212.             });
  213.             loopProp++;
  214.         }
  216.         var countPropertiesRent = '{{ rentsProperties|length }}';
  217.         var loopPropRent = 1;
  218.         while (loopPropRent <= countPropertiesRent) {
  219.             $('.slick-slide-rent-'+loopPropRent).slick({
  220.                 'slidesToShow': 1,
  221.                 'prevArrow': `<div class="arrow-left square-black d-flex justify-content-center align-items-center position-absolute">${arrowPrev}</div>`,
  222.                 'nextArrow': `<div class="arrow-right square-black d-flex justify-content-center align-items-center position-absolute">${arrowNext}</div>`
  223.             });
  224.             loopPropRent++;
  225.         }
  227.     </script>
  228. {% endblock %}