templates/front/front_home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/layouts_front/base_front.html.twig' %}
  2. {% block javascripts %}
  3.     <script type="text/javascript">
  4.         /* curator-feed-default-feed-layout */
  5.         (function () {
  6.             var i, e, d = document, s = "script";
  7.             i = d.createElement("script");
  8.             i.async = 1;
  9.             i.charset = "UTF-8";
  10.             i.src = "https://cdn.curator.io/published/b6061316-54f0-4a57-bba3-233098292e9d.js";
  11.             e = d.getElementsByTagName(s)[0];
  12.             e.parentNode.insertBefore(i, e);
  13.         })();
  14.     </script>
  15.     {# DOC DU SLIDER   https://swiperjs.com/demos#autoplay #}
  16.     <script>
  17.         var swiper = new Swiper(".mySwiper", {
  18.             slidesPerView: 3,
  19.             cssMode: true,
  20.             autoplay: {
  21.                 delay: 2500,
  22.                 disableOnInteraction: false,
  23.             },
  24.             spaceBetween: 80,
  25.             navigation: {
  26.                 nextEl: ".swiper-button-next",
  27.                 prevEl: ".swiper-button-prev",
  28.             },
  29.             pagination: {
  30.                 el: ".swiper-pagination",
  31.             },
  32.             mousewheel: true,
  33.             keyboard: true,
  34.             breakpoints: {
  35.                 1: {
  36.                     slidesPerView: 1,
  37.                     spaceBetween: 100,
  38.                 },
  39.                 390: {
  40.                     slidesPerView: 1,
  41.                     spaceBetween: 100,
  42.                 },
  43.                 640: {
  44.                     slidesPerView: 1,
  45.                     spaceBetween: 100,
  46.                 },
  47.                 768: {
  48.                     slidesPerView: 1,
  49.                     spaceBetween: 100,
  50.                 },
  51.                 1024: {
  52.                     slidesPerView: 2,
  53.                     spaceBetween: 100,
  55.                 },
  56.                 1720: {
  57.                     slidesPerView: 3,
  58.                     spaceBetween: 10,
  60.                 },
  61.             },
  63.         });
  64.     </script>
  65. {% endblock %}
  66. {% block content %}
  68.     {# -------------------------
  69.      -- AUTOPROMO 1 -> VIDEO --
  70.      ------------------------ -#}
  71.     {% if tabPromoZone1 | length > 0 %}
  72.         {% include 'front/front_home/autopromo_zone.html.twig' with {'tabPromoZone': tabPromoZone1, 'iDtabPromoZone': 'tabPromoZone1', 'size': 'full'} %}
  73.     {% else %}
  74.         <section data-bs-version="5.1" class="image1 cid-sYsNd1RSoJ mbr-fullscreen"
  75.                  data-bg-video="https://vimeo.com/428046504" id="image1-1o">
  76.             <div class="mbr-overlay mh-100" style="opacity: 0; background-color: rgb(248, 248, 248);">
  77.             </div>
  78.         </section>
  79.     {% endif %}
  82.     {#- ------------------------
  83.     -- AUTOPROMO 2 & 3 --
  84.     ------------------------ -#}
  85.     {% if tabPromoZone2 | length > 0 %}
  86.         {% include 'front/front_home/autopromo_zone.html.twig' with {'tabPromoZone': tabPromoZone2, 'iDtabPromoZone': 'tabPromoZone2', 'size': '12'} %}
  87.     {% endif %}
  89.     {#    bloc section 3 #}
  90.     <section id="MontagneEnNeige">
  91.     </section>
  92.     <section id="RessourceSection">
  93.         <div class="d-flex" style="width: 100%;height: 600px;">
  94.             <div id="cercleResource">
  95.                 <svg version="1.1" id="Calque_2" xmlns="http://www.w3.org/2000/svg"
  96.                      xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  97.                      viewBox="0 0 137 113.9" style="enable-background:new 0 0 137 113.9;" xml:space="preserve">
  98.                 <style type="text/css">
  99.                     .st0 {
  100.                         fill: none;
  101.                         stroke-linecap: round;
  102.                         stroke-linejoin: round;
  103.                         stroke-miterlimit: 10;
  104.                     }
  105.                 </style>
  106.                     <path class="st0" d="M98.5,2.8c0,0,11.7,3.2,18.4,11.1c6.7,8,9.1,14.5,10.7,22.7c1.6,8.2,6.8,35.6,6.8,35.6h-12.3
  107.                     c0,0,1,12.3-2.5,19.3S109.4,99.2,100,99c-9.3-0.1-9.3-0.1-9.3-0.1v11.7h-45V73.4c0,0,11.2,14.8,24.2,14.7s19.1-6.8,19.1-6.8
  108.                     S84.6,70.8,77,66.9c-7.6-4-7.6-4-7.6-4s-3.7,4.2-10,5.7c-6.3,1.5-13.8,1.5-13.8,1.5s-9.3-0.1-12.7-1.4s-10.2-5.8-10.2-5.8
  109.                     s-9.9,3.3-13.8,8.6c-3.9,5.3-6.2,9.7-6.2,9.7s6.8,6.9,18.2,6.1s17.1-5.2,20.3-9.7c3.2-4.5,4.4-9.5,4.4-9.5s-0.8-13.3,4.7-19.2
  110.                     c2-2.2,4.3-4.4,6.7-6.2c4.2-3.2,8.8-5.5,13.6-5.1c7.6,0.5,7.6,0.5,7.6,0.5s0.8,9.7-2.4,15.6c-3.2,5.9-4,8.4-11.5,12.3
  111.                     c-7.5,3.9-12.1,3.9-21,3.5s-14.7-1.6-19.8-5.3c-5.1-3.7-8-10.2-9.5-14.8s-0.3-11.9-0.3-11.9s12.1,0,17.6,3.3c5.4,3.3,2,1,2,1
  112.                     s5.1-11.9,8.8-14.5c3.8-2.7,3.8-2.7,3.8-2.7s4,2.8,7.7,9.7c3.8,6.9,3.4,9.2,3.4,9.2s-3.8,3.3-6.8,6.9s-3.6,9-3.6,9
  113.                     s-4.9-9.5-8.2-13.4s-3.9-4.9-3.9-4.9s3.5-9.6,8.2-13.1s6.6-4.2,6.6-4.2S60.1,8.7,67.9,5.4s7.9-3.3,7.9-3.3"/>
  114.                     <path class="st0" d="M113,78.3c0,0,2.7,3.3,7.5,3.8"/>
  115.                 </svg>
  117.             </div>
  118.             <div id="titreResources">
  119.                 <h2>Se ressourcer</h2>
  120.                 <h3>Une station thermale à taille humaine</h3>
  121.                 <p>Profitez des eaux thérapeutiques de Barèges ! L’eau, l’air, la terre et le soleil sont réunis à
  122.                     Barèges pour votre séjour thermal à 1250 mètres</p>
  123.                 <a href="{{ url('front_page',{'name': 'thermes'}) }}">
  124.                     <button>en savoir plus</button>
  125.                 </a>
  126.             </div>
  127.         </div>
  129.         <div id="respirerBlocImg" class="d-flex align-items-center flex-wrap">
  130.             <div id="textRespirer" class="d-flex justify-content-end ">
  131.                 <div class="contentRespirer">
  132.                     <h2>Respirer</h2>
  133.                     <h3>un cadre privilégié pour votre santé</h3>
  134.                     <p> Entouré du Pic du Midi, du Cirque de Gavarnie, de l’architecture Napoléonienne et des richesses
  135.                         locales culturelles et artisanales vous goûterez aux plaisirs du mieux-être et des joies
  136.                         pyrénéennes.</p>
  137.                     <div class="respirerPlus d-flex justify-content-end">
  138.                         <a href="{{ url('front_page',{'name': 'tourisme'}) }}">
  139.                             <button>en savoir plus</button>
  140.                         </a>
  141.                     </div>
  142.                 </div>
  143.             </div>
  145.             <div class="montageLacBloc para " data-value="4">
  146.             </div>
  147.         </div>
  148.         <div id="profiter">
  149.             <img id="soleil" src="{{ websiteroot }}{{ asset('/medias_front/common/soleil.svg') }}" alt="Soleil">
  150.             <h2>Profiter</h2>
  151.             <h3>d'activités nature & bien-être</h3>
  152.             <p>Découvrez de nombreuses activités à proximité : randonnées, balades, vélo, etc. Profitez de la vallée
  153.                 grâce au plus grand domaine skiable des Pyrénées françaises (Grand Tourmalet - Barèges /La Mongie)</p>
  154.             <div id="imageGalerieFin">
  155.                 <div id="photosFin">
  156.                     <a href="{{ websiteroot }}{{ asset('/medias_front/bareges-img03.jpg') }}" data-fancybox
  157.                        aria-label="BatimentMontagne">
  158.                         <div id="BatimentMontagne"></div>
  159.                     </a>
  160.                     <a href="{{ websiteroot }}{{ asset('/medias_front/bareges-img02.jpg') }}" data-fancybox
  161.                        aria-label="randoner">
  162.                         <div id="randoner"></div>
  163.                     </a>
  164.                     <a href="{{ websiteroot }}{{ asset('/medias_front/bareges-img01.jpg') }}" data-fancybox
  165.                        aria-label="sauna">
  166.                         <div id="sona"></div>
  167.                     </a>
  170.                 </div>
  171.                 <div class="d-flex">
  172.                     <a href="{{ url('front_page',{'name': 'tourisme'}) }}" class="w-100 d-flex"
  173.                        aria-label="Barèges et ses alentours">
  174.                         <button>Découvrir Barèges et ses alentours</button>
  175.                     </a>
  176.                 </div>
  177.             </div>
  179.         </div>
  180.     </section>
  181.     <section class="d-flex align-items-center justify-content-center" id="montagneFin">
  182.         <img id="flecheHaut" src="{{ websiteroot }}{{ asset('/medias_front/common/flèche_suivante.svg') }}"
  183.              alt="fleche">
  184.     </section>
  185. {% endblock %}