templates/FrontBundle/Page/le-majestic.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 %}
  12. {% block sub_header %}
  14.     <div class="sub-header">
  15.     <ul>
  16.         <li class="active"><a href="/{{app.request.locale }}/le-majestic">Le Majestic</a></li>
  17.         <li class="versailles"><a href="/{{app.request.locale }}/le-versailles">Le Versailles</a></li>
  18.         <li><a href="/{{app.request.locale }}/la-salle">{{ 'espaces_salle'|tr(tr)|raw }}</a></li>
  19.         <li class="lounge"><a href="/{{app.request.locale }}/lounge-club">Lounge club</a></li>
  20.     </ul>
  21.   </div>
  23. {% endblock %}
  26. {% block stylesheets %}
  27.     <link href="/front/css/owl.carousel.min.css" rel="stylesheet">
  28.     <link href="/front/css/owl.theme.default.min.css" rel="stylesheet">
  29. {% endblock %}
  31. {% block body %}
  33.     <section class="info-header">
  34.       <ul>
  35.           <li class="active"><a href="/{{app.request.locale }}/le-majestic">Le Majestic</a></li>
  36.           <li><a href="/{{app.request.locale }}/le-versailles">Le Versailles</a></li>
  37.           <li><a href="/{{app.request.locale }}/la-salle">{{ 'espaces_salle'|tr(tr)|raw }}</a></li>
  38.           <li><a href="/{{app.request.locale }}/lounge-club">Lounge club</a></li>
  39.       </ul>
  40.     </section>
  42.     <section class="espace-header" style="background-image: url('/front/img/espaces-le-majestic.jpg');">
  43.         <div class="shadow-60"></div>
  44.         <div class="container">
  45.           <h1>Le majestic</h1>
  46.           <p>{{ 'majestic_desc'|tr(tr)|raw }}</p>
  47.         </div>
  48.         <a href="/{{app.request.locale }}/{{ 'reservation'|getUrl(app.request.locale) }}" class="order-btn-link">{{ 'general_reserver'|tr(tr)|raw }}</a>
  50.       <ul>
  51.           <li class="active"><a href="/{{app.request.locale }}/le-majestic">Le Majestic</a></li>
  52.           <li><a href="/{{app.request.locale }}/le-versailles">Le Versailles</a></li>
  53.           <li><a href="/{{app.request.locale }}/la-salle">{{ 'espaces_salle'|tr(tr)|raw }}</a></li>
  54.           <li><a href="/{{app.request.locale }}/lounge-club">Lounge club</a></li>
  55.       </ul>
  56.     </section>
  58.     <section class="espace-content">
  60.             <div class="owl-carousel esp">
  61.             {% for i in 1..15 %}
  62.                 <div class="item"><img src="/front/img/majestic-slider{{i}}.jpg" alt="majestic slider {{i}}" /></div>
  63.               {% endfor %}
  64.             </div>
  66.             <div class="horizontal-bar-container">
  67.                 <div class="horizontal-bar"></div>
  68.                 <div class="horizontal-bar-ctrl"></div>
  69.             </div>
  71.             <a href="#next" class="next-arrow"><img src="/front/img/espaces-arrow-b.svg" alt="suivant" /></a>
  73.             <h2 id="next" class="no-bar" style="padding-top: 160px;">{{ 'majestic_s1_title'|tr(tr)|raw }}<span class="full-bar"></span></h2>
  75.             <p class="quote pt-0 mt-5">{{ 'majestic_s1'|tr(tr)|raw }}</p>
  77.         </section>
  80.         <section class="espace-tarifs" style="background-image: url('/front/img/majestic-bg2.jpg');">
  81.             <div class="container">
  82.                 <img class="bubble" src="/front/img/maitre.png" alt="maitre cuisinier" />
  83.                 <div class="link">
  84.                     <a href="/{{app.request.locale }}/{{ 'menus-tarifs'|getUrl(app.request.locale) }}/le-majestic">{{ 'majestic_s2_title'|tr(tr)|raw }} <img src="/front/img/espaces-arrow-link.svg" alt="suivant" /></a>
  85.                 </div>
  86.             </div>
  87.         </section>
  90.     <section class="espace-content second">
  92.             <h2 id="" class="no-bar">{{ 'majestic_s3_title'|tr(tr)|raw }}<span class="full-bar"></span></h2>
  94.             <p class="pt-0 mt-5">{{ 'majestic_s3'|tr(tr)|raw }}
  95.             </p>
  97.         </section>
  99.         <section class="espace-gallery second" style="margin-bottom: 180px;">
  100.                 <div class="project-bar"></div>
  101.                 <div class="project-bar-ctrl"></div>
  102.                 <div class="gallery-container">
  103.                     <div class="col1">
  104.             <div class="col1-1" style="background-image: url('/front/img/majestic1.jpg'); height: 746px; width: 100%; margin-bottom: 30px;"></div>
  105.             <div class="col1-2" style="background-image: url('/front/img/majestic4.jpg'); height: 746px; width: 100%; margin-bottom: 30px;"></div>
  106.                     </div>
  107.                     <div class="col2">
  108.             <div class="col2-1" style="background-image: url('/front/img/majestic2.jpg'); height: 498px; width: 100%; margin-bottom: 30px;"></div>
  109.             <div class="col2-2" style="background-image: url('/front/img/majestic3.jpg'); height: 498px; width: 100%; margin-bottom: 30px;"></div>
  110.             <div class="col2-3" style="background-image: url('/front/img/majestic5.jpg'); height: 466px; width: 40%; margin-bottom: 30px; float: left;"></div>
  111.             <div class="col2-4" style="background-image: url('/front/img/majestic6.jpg'); height: 466px; margin-bottom: 30px; float: right; width: calc(60% - 30px); margin-left: 30px;"></div>
  112.                     </div>
  114.           <div class="col3" style="width:100%; display: table;">
  115.             <div class="col3-1" style="background-image: url('/front/img/majestic7.jpg'); height: 854px; width: 100%;;"></div>
  116.           </div>
  117.                 </div>
  118.         </section>
  120.         {% include 'FrontBundle/Partial/footer.html.twig' %}
  122. {% endblock %}
  124. {% block javascripts %}
  126.   <script src="/front/js/owl.carousel.min.js"></script>
  128.   <script type="text/javascript">
  130.       var owl = $('.owl-carousel');
  131.     owl.owlCarousel({
  132.         loop:false,
  133.         margin:30,
  134.         nav:true,
  135.         responsive:{
  136.             0:{
  137.                 items:1
  138.             },
  139.             600:{
  140.                 items:3
  141.             },
  142.             1920:{
  143.                 items:3
  144.             }
  145.         }
  146.         });
  148.         // HEADER IMAGE SWITCH
  149.     carouselIndex = 0;
  150.     $('.owl-carousel.esp img').mousedown(function() {
  151.         setTimeout(function() { carouselIndex = owl.data()['owl.carousel']._current }, 220);
  152.     });
  154.     $('.owl-carousel.esp img').on('click', function(e){
  155.       e.preventDefault();
  156.       if( carouselIndex == owl.data()['owl.carousel']._current ){
  157.           $('.espace-header').attr('style', 'background-image: url("'+$(this).attr('src')+'");') ;
  158.       }
  159.     });
  160.     // END HEADER IMAGE SWITCH
  162.     if( $('.project-bar-ctrl').length >0 ) {
  164.       offset = $('.project-bar-ctrl').offset().top;
  165.       $('.gallery-container').scroll(function(){
  166.         var pos = $('.gallery-container').scrollTop();
  167.         var top = pos * 706 / 1790;
  169.         $('.project-bar-ctrl').css('top', top+'px');
  170.       });
  172.     }
  174.     owl.on('changed.owl.carousel', function(event) {
  176.       var itemsNbr = owl.data()['owl.carousel'].settings.items;
  177.       var itemsTotal = event.item.count;
  179.       var itemsIndex = event.item.index;
  181.       var pagesNbr = itemsTotal - itemsNbr;
  183.             var horizontalBar = $('.horizontal-bar').outerWidth();
  184.             var horizontalBarCtrl = $('.horizontal-bar-ctrl').outerWidth();
  186.             var courseLength = $('.horizontal-bar').outerWidth() - $('.horizontal-bar-ctrl').outerWidth();
  188.             var left = itemsIndex * 100 / pagesNbr; // percent
  190.             left = left * courseLength / 100;
  192.       $('.horizontal-bar-ctrl').css('left', left+'px');
  193.       
  194.     });
  195.     </script>
  198. {% endblock %}