templates/FrontBundle/Page/le-versailles.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 active"><a href="/{{app.request.locale }}/le-versailles">Le Versailles</a></li>
  19.         <li><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 class="active gold"><a href="/{{app.request.locale }}/le-versailles">Le Versailles</a></li>
  39.           <li><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>
  44.     <section class="espace-header" style="background-image: url('/front/img/espaces-le-versailles.jpg');">
  45.          <div class="shadow-60"></div>
  46.         <div class="container">
  47.           <h1>Le versailles</h1>
  48.           <p>{{ 'versailles_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 class="active"><a href="/{{app.request.locale }}/le-versailles">Le Versailles</a></li>
  55.           <li><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 versailles esp">
  63.             {% for i in 1..5 %}
  64.                 <div class="item"><img src="/front/img/versailles-slider{{i}}.jpg" alt="versailles 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 gold"></div>
  71.             </div>
  73.             <a href="#next" class="next-arrow"><img src="/front/img/espaces-arrow-b-v.svg" alt="suivant" /></a>
  75.             <h2 id="next" class="no-bar" style="padding-top: 160px;">{{ 'versailles_s1_title'|tr(tr)|raw }} <span class="full-bar"></span></h2>
  77.             <p class="quote pt-0 mt-5">{{ 'versailles_s1'|tr(tr)|raw }}</p>
  79.         </section>
  82.         <section class="espace-tarifs" style="background-image: url('/front/img/versailles-bg2.jpg');">
  83.             <div class="container">
  84.                 <img class="bubble" src="/front/img/maitre2.png" alt="maitre cuisinier" />
  85.         <img class="bubble bubble2" src="/front/img/maitre3.png" alt="maitre cuisinier" />
  86.                 <div class="link">
  87.                     <a href="/{{app.request.locale }}/menus-tarifs/le-versailles">{{ 'majestic_s2_title'|tr(tr)|raw }} <img src="/front/img/espaces-arrow-link.svg" alt="suivant" /></a>
  88.                 </div>
  89.             </div>
  90.         </section>
  93.     <section class="espace-content second">
  95.             <h2 id="" class="no-bar">{{ 'versailles_s3_title'|tr(tr)|raw }}<span class="full-bar"></span></h2>
  97.             <p class="pt-0 mt-5">{{ 'versailles_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 gold"></div>
  105.         <div class="gallery-container">
  106.           <div class="col1">
  107.             <div class="col1-1" style="background-image: url('/front/img/versailles1.jpg'); height: 746px; width: 100%; margin-bottom: 30px;"></div>
  108.             <div class="col1-2" style="background-image: url('/front/img/versailles4.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/versailles2.jpg'); height: 498px; width: 100%; margin-bottom: 30px;"></div>
  112.             <div class="col2-2" style="background-image: url('/front/img/versailles3.jpg'); height: 498px; width: 100%; margin-bottom: 30px;"></div>
  113.             <div class="col2-3" style="background-image: url('/front/img/versailles5.jpg'); height: 466px; width: 40%; margin-bottom: 30px; float: left;"></div>
  114.             <div class="col2-4" style="background-image: url('/front/img/versailles6.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/versailles7.jpg'); height: 854px; width: 100%;;"></div>
  119.           </div>
  120.         </div>
  122.         </section>
  124.         {% include 'FrontBundle/Partial/footer.html.twig' %}
  126. {% endblock %}
  128. {% block javascripts %}
  130.   <script src="/front/js/owl.carousel.min.js"></script>
  132.   <script type="text/javascript">
  134.       var owl = $('.owl-carousel');
  135.     owl.owlCarousel({
  136.         loop:false,
  137.         margin:30,
  138.         nav:true,
  139.         responsive:{
  140.             0:{
  141.                 items:1
  142.             },
  143.             600:{
  144.                 items:3
  145.             },
  146.             1920:{
  147.                 items:3
  148.             }
  149.         }
  150.         });
  152.         // HEADER IMAGE SWITCH
  153.     carouselIndex = 0;
  154.     $('.owl-carousel.esp img').mousedown(function() {
  155.         setTimeout(function() { carouselIndex = owl.data()['owl.carousel']._current }, 220);
  156.     });
  158.     $('.owl-carousel.esp img').on('click', function(e){
  159.       e.preventDefault();
  160.       if( carouselIndex == owl.data()['owl.carousel']._current ){
  161.           $('.espace-header').attr('style', 'background-image: url("'+$(this).attr('src')+'");') ;
  162.       }
  163.     });
  164.     // END HEADER IMAGE SWITCH
  166.     if( $('.project-bar-ctrl').length >0 ) {
  168.       offset = $('.project-bar-ctrl').offset().top;
  169.       $('.gallery-container').scroll(function(){
  170.         var pos = $('.gallery-container').scrollTop();
  171.         var top = pos * 706 / 1790;
  173.         $('.project-bar-ctrl').css('top', top+'px');
  174.       });
  176.     }
  178.     owl.on('changed.owl.carousel', function(event) {
  180.       var itemsNbr = owl.data()['owl.carousel'].settings.items;
  181.       var itemsTotal = event.item.count;
  183.       var itemsIndex = event.item.index;
  185.       var pagesNbr = itemsTotal - itemsNbr;
  187.             var horizontalBar = $('.horizontal-bar').outerWidth();
  188.             var horizontalBarCtrl = $('.horizontal-bar-ctrl').outerWidth();
  190.             var courseLength = $('.horizontal-bar').outerWidth() - $('.horizontal-bar-ctrl').outerWidth();
  192.             var left = itemsIndex * 100 / pagesNbr; // percent
  194.             left = left * courseLength / 100;
  196.       $('.horizontal-bar-ctrl').css('left', left+'px');
  197.       
  198.     });
  199.     </script>
  202. {% endblock %}