templates/FrontBundle/Page/la-salle.html.twig line 1

Open in your IDE?
  1. {% extends 'FrontBundle/layout.html.twig' %}
  3. {% block title %}{{ app_sitename }} - {{ page.metaTitle }}{% endblock %}
  4. {% block description %}{{ page.metaDescription }}{% endblock %}
  8. {% block extra_class %}native{% endblock %}
  9. {# {% block menu_min %}200{% endblock %} #}
  10. {% block menu_max %}2252{% endblock %}
  13. {% block sub_header %}
  15.     <div class="sub-header">
  16.     <ul>
  17.         <li><a href="/{{app.request.locale }}/le-majestic">Le Majestic</a></li>
  18.         <li class="versailles"><a href="/{{app.request.locale }}/le-versailles">Le Versailles</a></li>
  19.         <li class="active"><a href="/{{app.request.locale }}/la-salle">{{ 'espaces_salle'|tr(tr)|raw }}</a></li>
  20.         <li class="lounge"><a href="/{{app.request.locale }}/lounge-club">Lounge club</a></li>
  21.     </ul>
  22.   </div>
  24. {% endblock %}
  27. {% block stylesheets %}
  28.     <link href="/front/css/owl.carousel.min.css" rel="stylesheet">
  29.     <link href="/front/css/owl.theme.default.min.css" rel="stylesheet">
  30. {% endblock %}
  32. {% block body %}
  35.     <section class="info-header">
  36.       <ul>
  37.           <li><a href="/{{app.request.locale }}/le-majestic">Le Majestic</a></li>
  38.           <li><a href="/{{app.request.locale }}/le-versailles">Le Versailles</a></li>
  39.           <li class="active"><a href="/{{app.request.locale }}/la-salle">{{ 'espaces_salle'|tr(tr)|raw }}</a></li>
  40.           <li><a href="/{{app.request.locale }}/lounge-club">Lounge club</a></li>
  41.       </ul>
  42.     </section>
  43.     
  44.     <section class="espace-header" style="background-image: url('/front/img/salle-slider1.jpg');">
  45.         <div class="shadow-60"></div>
  46.         <div class="container">
  47.           <h1>{{ 'espaces_salle'|tr(tr)|raw }}</h1>
  48.           <p>{{ 'salle_desc'|tr(tr)|raw }}</p>
  49.         </div>
  50.       <a href="/{{app.request.locale }}/{{ 'reservation'|getUrl(app.request.locale) }}" class="order-btn-link">{{ 'general_reserver'|tr(tr)|raw }}</a>
  52.       <ul>
  53.           <li><a href="/{{app.request.locale }}/le-majestic">Le Majestic</a></li>
  54.           <li><a href="/{{app.request.locale }}/le-versailles">Le versailles</a></li>
  55.           <li class="active"><a href="/{{app.request.locale }}/la-salle">{{ 'espaces_salle'|tr(tr)|raw }}</a></li>
  56.           <li><a href="/{{app.request.locale }}/lounge-club">Lounge club</a></li>
  57.       </ul>
  58.     </section>
  60.     <section class="espace-content ">
  62.             <div class="owl-carousel esp">
  63.                 {% for i in 1..13 %}
  64.                 <div class="item"><img src="/front/img/salle-slider{{i}}.jpg?v=1" alt="salle slider {{i}}" /></div>
  65.               {% endfor %}
  66.             </div>
  68.             <div class="horizontal-bar-container">
  69.                 <div class="horizontal-bar"></div>
  70.                 <div class="horizontal-bar-ctrl"></div>
  71.             </div>
  72.             
  73.             <a href="#next" class="next-arrow"><img src="/front/img/espaces-arrow-b.svg" alt="suivant" /></a>
  75.             <h2 id="next"class="no-bar" style="padding-top: 160px;">{{ 'salle_s1_title'|tr(tr)|raw }}<span class="full-bar"></span></h2>
  77.             <p class="quote pt-0 mt-5">{{ 'salle_s1'|tr(tr)|raw }}</p>
  79.         </section>
  82.         <section class="espace-tarifs salle" style="background-image: url('/front/img/salle-bg2.jpg');">
  83.             <div class="container">
  84.                 <div class="link">
  85.                     <a href="/{{app.request.locale }}/{{ 'reservation'|getUrl(app.request.locale) }}">{{ 'salle_s2'|tr(tr)|raw }}</a>
  86.                     <a href="/front/deroulement-spectacle.pdf" target="_blank" style="margin-bottom: 32px;">{{ 'salle_s22'|tr(tr)|raw }} <img src="/front/img/espaces-down-link.svg" alt="download" /></a>
  87.           <a href="#" class="plan-open">{{ 'tunnel_section6_plan'|tr(tr)|raw }}</a>
  88.                 </div>
  89.             </div>
  90.         </section>
  93.     <section class="espace-content second">
  95.             <h2 id="" class="no-bar">{{ 'salle_s3_title'|tr(tr)|raw }}<span class="full-bar"></span></h2>
  97.             <p class="pt-0 mt-5">{{ 'salle_s3'|tr(tr)|raw }}
  98.             </p>
  100.         </section>
  102.         <section class="espace-gallery second" style="margin-bottom: 180px;">
  103.                 <div class="project-bar"></div>
  104.                 <div class="project-bar-ctrl"></div>
  105.         <div class="gallery-container">
  106.           <div class="col1">
  107.             <div class="col1-1" style="background-image: url('/front/img/salle1.jpg'); height: 746px; width: 100%; margin-bottom: 30px;"></div>
  108.             <div class="col1-2" style="background-image: url('/front/img/salle4.jpg'); height: 746px; width: 100%; margin-bottom: 30px;"></div>
  109.           </div>
  110.           <div class="col2">
  111.             <div class="col2-1" style="background-image: url('/front/img/salle2.jpg'); height: 498px; width: 100%; margin-bottom: 30px;"></div>
  112.             <div class="col2-2" style="background-image: url('/front/img/salle3.jpg'); height: 498px; width: 100%; margin-bottom: 30px;"></div>
  113.             <div class="col2-3" style="background-image: url('/front/img/salle5.jpg'); height: 466px; width: 40%; margin-bottom: 30px; float: left;"></div>
  114.             <div class="col2-4" style="background-image: url('/front/img/salle6.jpg'); height: 466px; margin-bottom: 30px; float: right; width: calc(60% - 30px); margin-left: 30px;"></div>
  115.           </div>
  117.           <div class="col3" style="width:100%; display: table;">
  118.             <div class="col3-1" style="background-image: url('/front/img/salle7.jpg'); height: 854px; width: 100%;;"></div>
  119.           </div>
  120.         </div>
  121.         </section>
  123.     <div class="page_reservation-tunnel">
  124.     <div class="plan-salle">
  125.       <div class="plan-salle-container">
  127.         <a href="/front/img/plan-salle1.jpg?v=1" target="_blank"><img id="plan-salle1" alt="plan-salle" class="pls" src="/front/img/plan-salle1.jpg?v=2" /></a>
  129.         <span class="plan-close"><img alt="close" src="/front/img/calendar-cross.svg"></span>
  131.         <p class="text-xs text-center mb-0">{{ 'tunnel_section6_plan2'|tr(tr)|raw }}</p>
  133.       </div>
  134.     </div>
  135.     </div>
  137.         {% include 'FrontBundle/Partial/footer.html.twig' %}
  139. {% endblock %}
  141. {% block javascripts %}
  143.   <script src="/front/js/owl.carousel.min.js"></script>
  145.   <script type="text/javascript">
  147.     $(document).ready(function() {
  149.       $("body").delegate('.plan-open', 'click', function(e){
  150.         e.preventDefault();
  151.         $('.plan-salle').css("display", "flex").hide().fadeIn();
  152.       });
  154.       
  155.       $("body").delegate('.plan-salle .plan-close', 'click', function(e){
  156.         e.preventDefault();
  157.         $('.plan-salle').fadeOut();
  158.       });
  160.     });
  165.       var owl = $('.owl-carousel');
  166.     owl.owlCarousel({
  167.         loop:false,
  168.         margin:30,
  169.         nav:true,
  170.         responsive:{
  171.             0:{
  172.                 items:1
  173.             },
  174.             600:{
  175.                 items:3
  176.             },
  177.             1920:{
  178.                 items:3
  179.             }
  180.         }
  181.         });
  183.         // HEADER IMAGE SWITCH
  184.     carouselIndex = 0;
  185.     $('.owl-carousel.esp img').mousedown(function() {
  186.         setTimeout(function() { carouselIndex = owl.data()['owl.carousel']._current }, 220);
  187.     });
  189.     $('.owl-carousel.esp img').on('click', function(e){
  190.       e.preventDefault();
  191.       if( carouselIndex == owl.data()['owl.carousel']._current ){
  192.           $('.espace-header').attr('style', 'background-image: url("'+$(this).attr('src')+'");') ;
  193.       }
  194.     });
  195.     // END HEADER IMAGE SWITCH
  197.     if( $('.project-bar-ctrl').length >0 ) {
  199.       offset = $('.project-bar-ctrl').offset().top;
  200.       $('.gallery-container').scroll(function(){
  201.         var pos = $('.gallery-container').scrollTop();
  202.         var top = pos * 706 / 1790;
  204.         $('.project-bar-ctrl').css('top', top+'px');
  205.       });
  207.     }
  209.     owl.on('changed.owl.carousel', function(event) {
  211.       var itemsNbr = owl.data()['owl.carousel'].settings.items;
  212.       var itemsTotal = event.item.count;
  214.       var itemsIndex = event.item.index;
  216.       var pagesNbr = itemsTotal - itemsNbr;
  218.             var horizontalBar = $('.horizontal-bar').outerWidth();
  219.             var horizontalBarCtrl = $('.horizontal-bar-ctrl').outerWidth();
  221.             var courseLength = $('.horizontal-bar').outerWidth() - $('.horizontal-bar-ctrl').outerWidth();
  223.             var left = itemsIndex * 100 / pagesNbr; // percent
  225.             left = left * courseLength / 100;
  227.       $('.horizontal-bar-ctrl').css('left', left+'px');
  228.       
  229.     });
  230.     </script>
  233. {% endblock %}