templates/front-office/home.html.twig line 1

Open in your IDE?
  1. {% extends "front-office/_base.html.twig" %}
  3. {% block link %}
  4.     <link rel="stylesheet" href="{{ asset('assets/owlcarousel/owl.carousel.min.css') }}">
  5.     <link rel="stylesheet" href="{{ asset('assets/owlcarousel/owl.theme.default.min.css') }}">
  6. {% endblock %}
  8. {% block script %}
  9.     <script src="{{ asset('assets/owlcarousel/owl.carousel.min.js') }}"></script>
  10.     <script>
  11.         
  12.         document.addEventListener("DOMContentLoaded",()=>{
  13.             /**
  14.              * Carousel
  15.               */ 
  16.             $('.owl-carousel').owlCarousel({
  17.                 loop:true,
  18.                 nav:true,
  19.                 items:1
  20.             })
  21.         });
  22.         
  23.     </script>
  24. {% endblock %}
  26. {% block content %}
  28.     {# SECTION TOP #}
  29.     <section class="home-top">
  31.         {# CAROUSEL #}
  32.         <section class="home-top-carousel">
  33.             {% if studio is not null %}
  35.                 <div class=" carousel-content meli-section-60">
  37.                     <div class="owl-carousel owl-theme">
  38.                         {% if studio.video %}
  39.                             <div class="meli-center-center">
  40.                                 {{ studio.video|raw }}
  41.                             </div>
  42.                         {% endif %}
  43.                         {% if studio.picture %}
  44.                             <div>
  45.                                 <img src="{{ asset('uploads/studios/studio-'~studio.id~'/'~studio.picture) }}" alt="{{ studio.pictureAlt }}">
  46.                             </div>
  47.                         {% endif %}
  48.                         {% for g in studio.gallery %}
  49.                             <div>
  50.                                 <img src="{{ asset('uploads/studios/studio-'~studio.id~'/gallery-'~g.id~'/'~g.picture) }}" alt="{{ g.pictureAlt }}">
  51.                             </div>
  52.                         {% endfor %}
  53.                     </div>
  54.                 </div>
  55.             {% else %}
  56.                 <div class="img-box">
  57.                     <img src="{{ asset('assets/img/logo/studio-p-white.png') }}" alt="Logo Studio-p">
  58.                 </div>
  59.             {% endif %}
  61.         </section>
  64.         {# PRESENTATION #}
  65.         <section class="home-top-presentation">
  66.             <div class="content meli-section-80 meli-between-start">
  67.                 <div class="meli-width-70">
  68.                     <p class="txt-center txt-bold">
  69.                         Bienvenue aux Studios P de Mathieu Pichoff <br>
  70.                         Unité de production audiovisuelle (cinéma, documentaires, TV, photos) <br>
  71.                         Réalisateur - Producteur installé sur le Bassin d'Arcachon, Mathieu Pichoff vous propose certains services à la location,
  72.                         tels que des locaux, du matériel et des équipes de tournage, dont vous trouverez ici la description
  73.                     </p>
  74.                 </div>
  76.                 <div class="meli-width-20">
  77.                     <img src="{{ asset('assets/img/logo/studio-p.png') }}" alt="Studios P">
  78.                 </div>
  79.             </div>
  80.         </section>
  83.     </section>
  85.     {# SECTION MIDDLE #}
  86.     <section class="home-middle">
  88.         {# NUMBER PHONE #}
  89.         <section class="home-phone">
  91.             <p class="txt-center txt-white txt-bold">Vous avez des questions ? Un projet ? Contactez ce numéro</p>
  92.             <p class="txt-center txt-blue txt-bold">06 68 41 79 12</p>
  94.         </section>
  96.         {# NEED ? #}
  97.         <div class="home-need">
  98.             <h2 class="txt-bold txt-center title">BESOIN DE MATERIELS ?</h2>
  100.             <div class="meli-between-start meli-section-80 home-need-materials">
  101.                 {% for m in materials %}
  102.                     <div class="meli-width-45 home-need-material-bloc meli-center-center">
  103.                         <img src="{{ asset('uploads/materials/material-'~m.id~'/'~m.picture) }}" alt="{{ m.pictureAlt }}">
  104.                         <div class="infos">
  105.                             <h3 class="subtitle txt-bold txt-center txt-white">{{ m.name }}</h3>
  106.                         </div>
  107.                     </div>
  108.                 {% endfor %}
  110.             </div>
  111.             <div class="button-box meli-center-center">
  112.                 <a href="{{ path('material_list') }}">
  113.                     <button class="kit-btn">Voir les produits</button>
  114.                 </a>
  115.             </div>
  117.         </div>
  119.         {# SPONSORS #}
  120.         <div class="home-sponsors">
  121.             <h2 class="txt-bold txt-center title">Partenaires et collaborateurs</h2>
  122.             <div class="meli-between-center meli-section-80">
  123.                 <div class="meli-width-20 meli-center-center">
  124.                     <img src="{{ asset('assets/img/static/sponsor/aerovid.jpg') }}" alt="aerovid">
  125.                 </div>
  126.                 <div class="meli-width-20 meli-center-center">
  127.                     <img src="{{ asset('assets/img/static/sponsor/autofilmgendpol.png') }}" alt="autofilmgendpol">
  128.                 </div>
  129.                 <div class="meli-width-20 meli-center-center">
  130.                     <img src="{{ asset('assets/img/static/sponsor/mathieu-pichoff-realisateur.jpg') }}" alt="mathieu pichoff realisateur">
  131.                 </div>
  132.                 <div class="meli-width-20 meli-center-center">
  133.                     <img src="{{ asset('assets/img/static/sponsor/sam-ramassamy.jpg') }}" alt="sam ramassamy">
  134.                 </div>
  135.             </div>
  136.         </div>
  138.     </section>
  141.     <div class="divider-red"></div>
  144.     {# SECTION BOTTOM #}
  145.     <section class="home-bottom">
  146.         <h2 class="title txt-center txt-bold">Suivez les différents projets</h2>
  147.         <div class="home-social-img-container meli-between-center meli-section-40">
  148.             <div class="img-box meli-width-5">
  149.                 <a href="https://twitter.com/templarscreed_" target="_blank">
  150.                     <img src="{{ asset('assets/img/social/twitter.png') }}" alt="twitter">
  151.                 </a>
  153.             </div>
  154.             <div class="img-box meli-width-5">
  155.                 <a href="https://www.facebook.com/Studiosdeproductionpichoff/" target="_blank">
  156.                     <img src="{{ asset('assets/img/social/facebook.png') }}" alt="facebook">
  157.                 </a>
  158.             </div>
  159.             <div class="img-box meli-width-5">
  160.                 <a href="https://www.instagram.com/mathieupichoff/">
  161.                     <img src="{{ asset('assets/img/social/instagram.png') }}" alt="instagram">
  162.                 </a>
  163.             </div>
  164.             <div class="img-box meli-width-5">
  165.                 <a href="https://vimeo.com/user71678312" target="_blank">
  166.                     <img src="{{ asset('assets/img/social/vimeo.png') }}" alt="vimeo">
  167.                 </a>
  168.             </div>
  169.             <div class="img-box meli-width-5">
  170.                 <a href="https://www.youtube.com/@TemplarscreedLefilm" target="_blank">
  171.                     <img src="{{ asset('assets/img/social/youtube.png') }}" alt="youtube">
  172.                 </a>
  173.             </div>
  174.         </div>
  175.     </section>
  180. {% endblock %}