templates/FrontBundle/Page/notre-histoire.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 %}3076{% endblock %}
  12. {% block stylesheets %}
  13.     <link href="/front/css/owl.carousel.min.css" rel="stylesheet">
  14.     <link href="/front/css/owl.theme.default.min.css" rel="stylesheet">
  15. {% endblock %}
  17. {% block json_ld %}
  18.     <script type="application/ld+json">
  19.         {
  20.           "@context": "https://schema.org",
  21.           "@type": "WebPage",
  22.           "name": "{{ page.metaTitle | escape('js') }}",
  23.           "description": "{{ page.metaDescription | escape('js') }}",
  24.           "thumbnailUrl": "{{ asset ('/front/img/histoire-slider2.jpg') }}"
  25.          }
  26.     </script>
  27. {% endblock %}
  31. {% block body %}
  34.     <section class="histoire-header" style="background-image: url('/front/img/histoire-bg.jpg');">
  35.         <div class="content">
  36.           <h1>{{ 'histoire_title'|tr(tr)|raw }}</h1>
  37.           <p>{{ 'histoire_subtitle'|tr(tr)|raw }}</p>
  38.           <p class="quote">{{ 'histoire_desc'|tr(tr)|raw }}</p>
  39.         </div>
  40.     </section>
  42.     <section class="espace-content histoire-content">
  44.             <div class="owl-carousel histoire">
  45.             {% for i in 1..15 %}
  46.                 <div class="item"><img src="/front/img/histoire-slider{{i}}.jpg" alt="histoire slider {{i}}" /></div>
  47.               {% endfor %}
  48.             </div>
  50.                     <div class="horizontal-bar-container">
  51.                         <div class="horizontal-bar"></div>
  52.                         <div class="horizontal-bar-ctrl purple"></div>
  53.                     </div>
  55.             <a href="#next" class="next-arrow"><img src="/front/img/espaces-arrow-b-l.svg" alt="suivant" /></a>
  56.             
  57.             <div class="row">
  58.                 <div class="col-md-12">        
  59.                     <h2 id="next" class="no-bar">{{ 'histoire_s1_title'|tr(tr)|raw }}<span class="full-bar"></span></h2>
  60.                 </div>
  61.             </div>
  62.             <div class="row">
  63.                 <div class="col-md-7">
  64.                     
  65.                     <p class="text-dark" style="padding-right: 60px;">
  66.                         {{ 'histoire_s1_desc'|tr(tr)|raw }}
  67.                     </p>
  69.                 </div>
  70.                 <div class="col-md-5 equipe">
  71.                     <img src="/front/img/histoire-equipe.jpg" alt="equipe" />
  72.                     <span>{{ 'histoire_s1_famille'|tr(tr)|raw }}</span>
  73.                 </div>
  74.             </div>
  75.         </section>
  77.         <section class="histoire-slider pl-0 pr-0">
  78.             <div class="owl-carousel histoire-date">
  79.             <div class="item"><span>1980</span><span>1980</span><p>{{ 'histoire_date1'|tr(tr)|raw }}</p></div>
  80.             <div class="item"><span>1982</span><span>1982</span><p>{{ 'histoire_date2'|tr(tr)|raw }}</p></div>
  81.             <div class="item"><span>1989</span><span>1989</span><p>{{ 'histoire_date3'|tr(tr)|raw }}</p></div>
  82.             <div class="item"><span>1996</span><span>1996</span><p>{{ 'histoire_date4'|tr(tr)|raw }}</p></div>
  83.             <div class="item"><span>2014</span><span>2014</span><p>{{ 'histoire_date5'|tr(tr)|raw }}</p></div>
  84.             <div class="item"><span>2015</span><span>2015</span><p>{{ 'histoire_date6'|tr(tr)|raw }}</p></div>
  85.             <div class="item"><span>&nbsp;</span><span>&nbsp;</span></div>
  86.             </div>
  87.         </section>
  90. {# 
  91.         <section class="histoire-bg2" style="background-image: url('/front/img/histoire-bg2.jpg');">
  92.             <div class="container">
  94.             </div>
  95.         </section>
  96.  #}
  99.     <section class="espace-content histoire-content histoire-slider-small">
  100.             <div class="container">
  101.         <div class="owl-carousel histoire-big">
  102.             {% for i in 1..10 %}
  103.                 <div class="item" style="background-image: url(/front/img/histoire-slider-small{{i}}.jpg);"> </div>
  104.               {% endfor %}
  105.         </div>
  107.             <div class="owl-carousel histoire-small">
  108.                 {% for i in 1..10 %}
  109.                 <div class="item" style="background-image: url(/front/img/histoire-slider-small{{i}}.jpg);"> </div>
  110.               {% endfor %}
  111.         </div>
  112.       </div>
  115.         </section>
  118.     <section class="espace-content second histoire-restauration" id="restauration">
  119.             <h2 id="" class="no-bar">{{ 'histoire_s2_title'|tr(tr)|raw }}<span class="full-bar"></span></h2>
  120.         </section>
  122.         <div class="row histoire-restauration-links">
  123.             <div class="col">
  124.                 <div class="bg">
  125.                     <a href="/{{app.request.locale }}/le-majestic" class="link">LE MAJESTIC <img src="/front/img/message-arrow-single.svg" alt="majestic"></a>
  126.                 </div>
  127.                 
  128.             </div>
  129.             <div class="col">
  130.                 <div class="bg">
  131.                     <a href="/{{app.request.locale }}/le-versailles" class="link">LE VERSAILLES <img src="/front/img/message-arrow-single.svg" alt="majestic"></a>
  132.                 </div>
  133.                 
  134.             </div>
  135.             <div class="col">
  136.                 <div class="bg">
  137.                     <a href="/{{app.request.locale }}/lounge-club" class="link">LE LOUNGE <img src="/front/img/message-arrow-single.svg" alt="majestic"></a>
  138.                 </div>
  139.                 
  140.             </div>
  141.             <div class="col">
  142.                 <div class="bg">
  143.                     <a href="/{{app.request.locale }}/la-salle" class="link">{{ 'espaces_salle'|tr(tr)|raw }} <img src="/front/img/message-arrow-single.svg" alt="majestic"></a>
  144.                 </div>
  145.                 
  146.             </div>
  147.         </div>
  149. {#         <div class="row entreprise-restauration-desc" style="margin-bottom: 180px;">
  150.             <div class="col" style="width: 22%">
  151.                 <p class="title">LE MAJESTIC</p>
  152.             </div>
  153.             <div class="col" style="width: 26%">
  154.                 <p class="title">LE VERSAILLES</p>
  155.             </div>
  156.             <div class="col" style="width: 26%">
  157.                 <p class="title">LE LOUNGE</p>
  158.             </div>
  159.             <div class="col" style="width: 26%">
  160.                 <p class="title">LA SALLE de spéctacle</p>
  161.             </div>
  162.         </div>
  163.  #}
  166.         {% include 'FrontBundle/Partial/footer.html.twig' %}
  168. {% endblock %}
  170. {% block javascripts %}
  172.   <script src="/front/js/owl.carousel.min.js"></script>
  174.   <script type="text/javascript">
  176.     $( document ).ready(function() {
  177.         $('.owl-carousel.histoire-date').css('left', $('.espace-content').offset().left+'px');
  178.     });
  181.     var owl = $('.owl-carousel.histoire');
  182.     owl.owlCarousel({
  183.         loop:false,
  184.         margin:0,
  185.         nav:true,
  186.         dots:false,
  187.         responsive:{
  188.             0:{
  189.                 items:1
  190.             },
  191.             600:{
  192.                 items:4
  193.             },
  194.             1920:{
  195.                 items:4
  196.             }
  197.         }
  198.         });
  200.     owl.on('changed.owl.carousel', function(event) {
  202.       var itemsNbr = owl.data()['owl.carousel'].settings.items;
  203.       var itemsTotal = event.item.count;
  205.       var itemsIndex = event.item.index;
  207.       var pagesNbr = itemsTotal - itemsNbr;
  209.             var horizontalBar = $('.horizontal-bar').outerWidth();
  210.             var horizontalBarCtrl = $('.horizontal-bar-ctrl').outerWidth();
  212.             var courseLength = $('.horizontal-bar').outerWidth() - $('.horizontal-bar-ctrl').outerWidth();
  214.             var left = itemsIndex * 100 / pagesNbr; // percent
  216.             left = left * courseLength / 100;
  218.       $('.horizontal-bar-ctrl').css('left', left+'px');
  219.       
  220.     });
  222.     var margin = 250;
  224.     if( window.innerWidth <= 1400){
  225.       margin = 100;
  226.     }
  228.         $('.owl-carousel.histoire-date').owlCarousel({
  229.         loop:false,
  230.         margin:margin,
  231.         nav:true,
  232.         dots:false,
  233.         responsive:{
  234.             0:{
  235.                 items:1
  236.             },
  237.             768:{
  238.                 items:3
  239.             },
  240.             1920:{
  241.                 items:4
  242.             }
  243.         }
  244.         });
  247.         var owlSmall = $('.owl-carousel.histoire-small').owlCarousel({
  248.         loop:false,
  249.         margin:34,
  250.         nav:true,
  251.         dots:false,
  252.         responsive:{
  253.             0:{
  254.                 items:1
  255.             },
  256.             768:{
  257.                 items:2
  258.             },
  259.             1920:{
  260.                 items:4
  261.             }
  262.         }
  263.         });
  265.         var owlBig = $('.owl-carousel.histoire-big');
  266.         owlBig.owlCarousel({
  267.         loop:false,
  268.         margin:0,
  269.         nav:false,
  270.         dots:false,
  271.         responsive:{
  272.             0:{
  273.                 items:1
  274.             },
  275.             600:{
  276.                 items:1
  277.             },
  278.             1920:{
  279.                 items:1
  280.             }
  281.         }
  282.         });
  284.         owlSmall.on('changed.owl.carousel', function(event) {
  285.           owlBig.trigger('to.owl.carousel', event.item.index);
  286.         })
  288.         owlBig.on('changed.owl.carousel', function(event) {
  289.           owlSmall.trigger('to.owl.carousel', event.item.index);
  290.         })
  292.         $(document).on('click', '.owl-carousel.histoire-small .owl-item', function() {
  293.           owlIndex = $(this).index();
  294.           owlBig.trigger('to.owl.carousel', owlIndex);
  295.         });
  298.     </script>
  301. {% endblock %}