templates/histoire/histoire.html.twig line 1

Open in your IDE?
  1. {% set section = 'history' %}
  2. {% extends 'base.html.twig' %}
  3. {% block title %}Pitch - Brioche Pasquier{% endblock %}
  4. {% block body %}
  5. <div data-controller="history">
  7. <div id="histoire" class="container-xxxl p-0">
  8. <div id="histoire-container">
  9. <div id="histoire-select">
  10. <div class="dropdown">
  11. <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownDate" data-bs-toggle="dropdown" aria-expanded="false">Sélectionne une date</button>
  12. <ul class="dropdown-menu" aria-labelledby="dropdownDate">
  13. <li><a class="dropdown-item" href="{{ path('history') }}#1986">1986</a></li>
  14. <li><a class="dropdown-item" href="{{ path('history') }}#1987">1987</a></li>
  15. <li><a class="dropdown-item" href="{{ path('history') }}#1988">1988</a></li>
  16. <li><a class="dropdown-item" href="{{ path('history') }}#1990s">Les années 1990</a></li>
  17. <li><a class="dropdown-item" href="{{ path('history') }}#2000s">Les années 2000</a></li>
  18. <li><a class="dropdown-item" href="{{ path('history') }}#2010">2010</a></li>
  19. <li><a class="dropdown-item" href="{{ path('history') }}#2011">2011</a></li>
  20. <li><a class="dropdown-item" href="{{ path('history') }}#2012">2012</a></li>
  21. <li><a class="dropdown-item" href="{{ path('history') }}#2013-2017">2013 à 2017</a></li>
  22. <li><a class="dropdown-item" href="{{ path('history') }}#2015">2015</a></li>
  23. <li><a class="dropdown-item" href="{{ path('history') }}#2016">2016</a></li>
  24. <li><a class="dropdown-item" href="{{ path('history') }}#2018">2018</a></li>
  25. <li><a class="dropdown-item" href="{{ path('history') }}#2019">2019</a></li>
  26. <li><a class="dropdown-item" href="{{ path('history') }}#2020">2020</a></li>
  27. <li><a class="dropdown-item" href="{{ path('history') }}#2021">2021</a></li>
  28. <li><a class="dropdown-item" href="{{ path('history') }}#2022">2022</a></li>
  29. <li><a class="dropdown-item" href="{{ path('history') }}#2023">2023</a></li>
  30. <li><a class="dropdown-item" href="{{ path('history') }}#2024">2024</a></li>
  31. </ul>
  32. </div>
  33. </div>
  34. <div id="histoire-slider" class="swiper">
  35. <div class="swiper-wrapper">
  37. <!-- 1986 -->
  38. <div class="swiper-slide" data-hash="1986">
  39. <img src="build/images/history/1986-01.png" width="1280" height="1684" alt="1986 / 01" class="swiper-lazy" />
  40. <img src="build/images/history/date-1986.svg" width="920" height="720" alt="1986" class="swiper-date swiper-lazy" />
  41. <div class="swiper-lazy-preloader"></div>
  42. </div>
  43. <div class="swiper-slide" data-hash="1986">
  44. <img src="build/images/history/1986-02.png" width="1280" height="1684" alt="1986 / 02" class="swiper-lazy" />
  45. <img src="build/images/history/date-1986.svg" width="920" height="720" alt="1986" class="swiper-date swiper-lazy" />
  46. <div class="swiper-lazy-preloader"></div>
  47. </div>
  49. <!-- 1987 -->
  50. <div class="swiper-slide" data-hash="1987">
  51. <img src="build/images/history/1987-01.png" width="1280" height="1684" alt="1987 / 01" class="swiper-lazy" />
  52. <img src="build/images/history/date-1987.svg" width="920" height="720" alt="1987" class="swiper-date swiper-lazy" />
  53. <div class="swiper-lazy-preloader"></div>
  54. </div>
  55. <div class="swiper-slide" data-hash="1987">
  56. <img src="build/images/history/1987-02.png" width="1280" height="1684" alt="1987 / 02" class="swiper-lazy" />
  57. <img src="build/images/history/date-1987.svg" width="920" height="720" alt="1987" class="swiper-date swiper-lazy" />
  58. <div class="swiper-lazy-preloader"></div>
  59. </div>
  61. <!-- 1988 -->
  62. <div class="swiper-slide" data-hash="1988">
  63. <img src="build/images/history/1988-01.png" width="1280" height="1684" alt="1988 / 01" class="swiper-lazy" />
  64. <img src="build/images/history/date-1988.svg" width="920" height="720" alt="1988" class="swiper-date swiper-lazy" />
  65. <div class="swiper-lazy-preloader"></div>
  66. </div>
  67. <div class="swiper-slide" data-hash="1988">
  68. <img src="build/images/history/1988-02.png" width="1280" height="1684" alt="1988 / 02" class="swiper-lazy" />
  69. <img src="build/images/history/date-1988.svg" width="920" height="720" alt="1988" class="swiper-date swiper-lazy" />
  70. <div class="swiper-lazy-preloader"></div>
  71. </div>
  73. <!-- 1990s -->
  74. <div class="swiper-slide" data-hash="1990s">
  75. <img src="build/images/history/1990s-01.png" width="1280" height="1684" alt="Les années 90 / 01" class="swiper-lazy" />
  76. <img src="build/images/history/date-1990s.svg" width="920" height="720" alt="Les années 90" class="swiper-date swiper-lazy" />
  77. <div class="swiper-lazy-preloader"></div>
  78. </div>
  79. <div class="swiper-slide" data-hash="1990s">
  80. <img src="build/images/history/1990s-02.png" width="1280" height="1684" alt="Les années 90 / 02" class="swiper-lazy" />
  81. <a href="https://www.ina.fr/ina-eclaire-actu/publicite/pub1587078068/pitch-oh-mon-pitch" target="_blank"></a>
  82. <img src="build/images/history/date-1990s.svg" width="920" height="720" alt="Les années 90" class="swiper-date swiper-lazy" />
  83. <div class="swiper-lazy-preloader"></div>
  84. </div>
  86. <!-- 2000s -->
  87. <div class="swiper-slide" data-hash="2000s">
  88. <img src="build/images/history/2000s-01.png" width="1280" height="1684" alt="Les années 2000 / 01" class="swiper-lazy" />
  89. <img src="build/images/history/date-2000s.svg" width="920" height="720" alt="Les années 2000" class="swiper-date swiper-lazy" />
  90. <div class="swiper-lazy-preloader"></div>
  91. </div>
  92. <div class="swiper-slide" data-hash="2000s">
  93. <img src="build/images/history/2000s-02.png" width="1280" height="1684" alt="Les années 2000 / 02" class="swiper-lazy" />
  94. <img src="build/images/history/date-2000s.svg" width="920" height="720" alt="Les années 2000" class="swiper-date swiper-lazy" />
  95. <div class="swiper-lazy-preloader"></div>
  96. </div>
  98. <!-- 2010 -->
  99. <div class="swiper-slide" data-hash="2010">
  100. <img src="build/images/history/2010-01.png" width="1280" height="1684" alt="2010 / 01" class="swiper-lazy" />
  101. <img src="build/images/history/date-2010.svg" width="920" height="720" alt="2010" class="swiper-date swiper-lazy" />
  102. <div class="swiper-lazy-preloader"></div>
  103. </div>
  104. <div class="swiper-slide" data-hash="2010">
  105. <img src="build/images/history/2010-02.png" width="1280" height="1684" alt="2010 / 02" class="swiper-lazy" />
  106. <img src="build/images/history/date-2010.svg" width="920" height="720" alt="2010" class="swiper-date swiper-lazy" />
  107. <div class="swiper-lazy-preloader"></div>
  108. </div>
  110. <!-- 2011 -->
  111. <div class="swiper-slide" data-hash="2011">
  112. <img src="build/images/history/2011-01.png" width="1280" height="1684" alt="2011 / 01" class="swiper-lazy" />
  113. <img src="build/images/history/date-2011.svg" width="920" height="720" alt="2011" class="swiper-date swiper-lazy" />
  114. <div class="swiper-lazy-preloader"></div>
  115. </div>
  116. <div class="swiper-slide" data-hash="2011">
  117. <img src="build/images/history/2011-02.png" width="1280" height="1684" alt="2011 / 02" class="swiper-lazy" />
  118. <img src="build/images/history/date-2011.svg" width="920" height="720" alt="2011" class="swiper-date swiper-lazy" />
  119. <div class="swiper-lazy-preloader"></div>
  120. </div>
  122. <!-- 2012 -->
  123. <div class="swiper-slide" data-hash="2012">
  124. <img src="build/images/history/2012-01.png" width="1280" height="1684" alt="2012 / 01" class="swiper-lazy" />
  125. <img src="build/images/history/date-2012.svg" width="920" height="720" alt="2012" class="swiper-date swiper-lazy" />
  126. <div class="swiper-lazy-preloader"></div>
  127. </div>
  128. <div class="swiper-slide" data-hash="2012">
  129. <img src="build/images/history/2012-02.png" width="1280" height="1684" alt="2012 / 02" class="swiper-lazy" />
  130. <img src="build/images/history/date-2012.svg" width="920" height="720" alt="2012" class="swiper-date swiper-lazy" />
  131. <div class="swiper-lazy-preloader"></div>
  132. </div>
  134. <!-- 2013-2017 -->
  135. <div class="swiper-slide" data-hash="2013-2017">
  136. <img src="build/images/history/2013-2017-01.png" width="1280" height="1684" alt="2013-2017 / 01" class="swiper-lazy" />
  137. <img src="build/images/history/date-2013-2017.svg" width="920" height="720" alt="2013-2017" class="swiper-date swiper-lazy" />
  138. <div class="swiper-lazy-preloader"></div>
  139. </div>
  140. <div class="swiper-slide" data-hash="2013-2017">
  141. <img src="build/images/history/2013-2017-02.png" width="1280" height="1684" alt="2013-2017 / 02" class="swiper-lazy" />
  142. <img src="build/images/history/date-2013-2017.svg" width="920" height="720" alt="2013-2017" class="swiper-date swiper-lazy" />
  143. <div class="swiper-lazy-preloader"></div>
  144. </div>
  146. <!-- 2015 -->
  147. <div class="swiper-slide" data-hash="2015">
  148. <img src="build/images/history/2015-01.png" width="1280" height="1684" alt="2015 / 01" class="swiper-lazy" />
  149. <img src="build/images/history/date-2015.svg" width="920" height="720" alt="2015" class="swiper-date swiper-lazy" />
  150. <div class="swiper-lazy-preloader"></div>
  151. </div>
  152. <div class="swiper-slide" data-hash="2015">
  153. <img src="build/images/history/2015-02.png" width="1280" height="1684" alt="2015 / 02" class="swiper-lazy" />
  154. <img src="build/images/history/date-2015.svg" width="920" height="720" alt="2015" class="swiper-date swiper-lazy" />
  155. <div class="swiper-lazy-preloader"></div>
  156. </div>
  158. <!-- 2016 -->
  159. <div class="swiper-slide" data-hash="2016">
  160. <img src="build/images/history/2016-01.png" width="1280" height="1684" alt="2016 / 01" class="swiper-lazy" />
  161. <img src="build/images/history/date-2016.svg" width="920" height="720" alt="2016" class="swiper-date swiper-lazy" />
  162. <div class="swiper-lazy-preloader"></div>
  163. </div>
  164. <div class="swiper-slide" data-hash="2016">
  165. <img src="build/images/history/2016-02.png" width="1280" height="1684" alt="2016 / 02" class="swiper-lazy" />
  166. <img src="build/images/history/date-2016.svg" width="920" height="720" alt="2016" class="swiper-date swiper-lazy" />
  167. <div class="swiper-lazy-preloader"></div>
  168. </div>
  170. <!-- 2018 -->
  171. <div class="swiper-slide" data-hash="2018">
  172. <img src="build/images/history/2018-01.png" width="1280" height="1684" alt="2018 / 01" class="swiper-lazy" />
  173. <img src="build/images/history/date-2018.svg" width="920" height="720" alt="2018" class="swiper-date swiper-lazy" />
  174. <div class="swiper-lazy-preloader"></div>
  175. </div>
  176. <div class="swiper-slide" data-hash="2018">
  177. <img src="build/images/history/2018-02.png" width="1280" height="1684" alt="2018 / 02" class="swiper-lazy" />
  178. <img src="build/images/history/date-2018.svg" width="920" height="720" alt="2018" class="swiper-date swiper-lazy" />
  179. <div class="swiper-lazy-preloader"></div>
  180. </div>
  182. <!-- 2019 -->
  183. <div class="swiper-slide" data-hash="2019">
  184. <img src="build/images/history/2019-01.png" width="1280" height="1684" alt="2019 / 01" class="swiper-lazy" />
  185. <img src="build/images/history/date-2019.svg" width="920" height="720" alt="2019" class="swiper-date swiper-lazy" />
  186. <div class="swiper-lazy-preloader"></div>
  187. </div>
  188. <div class="swiper-slide" data-hash="2019">
  189. <img src="build/images/history/2019-02.png" width="1280" height="1684" alt="2019 / 02" class="swiper-lazy" />
  190. <img src="build/images/history/date-2019.svg" width="920" height="720" alt="2019" class="swiper-date swiper-lazy" />
  191. <div class="swiper-lazy-preloader"></div>
  192. </div>
  194. <!-- 2020 -->
  195. <div class="swiper-slide" data-hash="2020">
  196. <img src="build/images/history/2020-01.png" width="1280" height="1684" alt="2020 / 01" class="swiper-lazy" />
  197. <img src="build/images/history/date-2020.svg" width="920" height="720" alt="2020" class="swiper-date swiper-lazy" />
  198. <div class="swiper-lazy-preloader"></div>
  199. </div>
  200. <div class="swiper-slide" data-hash="2020">
  201. <img src="build/images/history/2020-02.png" width="1280" height="1684" alt="2020 / 02" class="swiper-lazy" />
  202. <img src="build/images/history/date-2020.svg" width="920" height="720" alt="2020" class="swiper-date swiper-lazy" />
  203. <div class="swiper-lazy-preloader"></div>
  204. </div>
  206. <!-- 2021 -->
  207. <div class="swiper-slide" data-hash="2021">
  208. <img src="build/images/history/2021-01.png" width="1280" height="1684" alt="2021 / 01" class="swiper-lazy" />
  209. <img src="build/images/history/date-2021.svg" width="920" height="720" alt="2021" class="swiper-date swiper-lazy" />
  210. <div class="swiper-lazy-preloader"></div>
  211. </div>
  212. <div class="swiper-slide" data-hash="2021">
  213. <img src="build/images/history/2021-02.png" width="1280" height="1684" alt="2021 / 02" class="swiper-lazy" />
  214. <a href="#" data-bs-toggle="modal" data-bs-target="#videoModal"></a>
  215. <img src="build/images/history/date-2021.svg" width="920" height="720" alt="2021" class="swiper-date swiper-lazy" />
  216. <div class="swiper-lazy-preloader"></div>
  217. </div>
  219. <!-- 2022 -->
  220. <div class="swiper-slide" data-hash="2022">
  221. <img src="build/images/history/2022-01.png" width="1280" height="1684" alt="2022 / 01" class="swiper-lazy" />
  222. <img src="build/images/history/date-2022.svg" width="920" height="720" alt="2022" class="swiper-date swiper-lazy" />
  223. <div class="swiper-lazy-preloader"></div>
  224. </div>
  225. <div class="swiper-slide" data-hash="2022">
  226. <img src="build/images/history/2022-02.png" width="1280" height="1684" alt="2022 / 02" class="swiper-lazy" />
  227. <img src="build/images/history/date-2022.svg" width="920" height="720" alt="2022" class="swiper-date swiper-lazy" />
  228. <div class="swiper-lazy-preloader"></div>
  229. </div>
  231. <!-- 2023 -->
  232. <div class="swiper-slide" data-hash="2023">
  233. <img src="build/images/history/2023-01.png" width="1280" height="1684" alt="2023 / 01" class="swiper-lazy" />
  234. <img src="build/images/history/date-2023.svg" width="920" height="720" alt="2023" class="swiper-date swiper-lazy" />
  235. <div class="swiper-lazy-preloader"></div>
  236. </div>
  237. <div class="swiper-slide" data-hash="2023">
  238. <img src="build/images/history/2023-02.png" width="1280" height="1684" alt="2023 / 02" class="swiper-lazy" />
  239. <img src="build/images/history/date-2023.svg" width="920" height="720" alt="2023" class="swiper-date swiper-lazy" />
  240. <div class="swiper-lazy-preloader"></div>
  241. </div>
  243. <!-- 2024 -->
  244. <div class="swiper-slide" data-hash="2024">
  245. <img src="build/images/history/2024-01.png" width="1280" height="1684" alt="2024 / 01" class="swiper-lazy" />
  246. <img src="build/images/history/date-2024.svg" width="920" height="720" alt="2024" class="swiper-date swiper-lazy" />
  247. <div class="swiper-lazy-preloader"></div>
  248. </div>
  249. <div class="swiper-slide" data-hash="2024">
  250. <img src="build/images/history/2024-02.png" width="1280" height="1684" alt="2024 / 02" class="swiper-lazy" />
  251. <img src="build/images/history/date-2024.svg" width="920" height="720" alt="2024" class="swiper-date swiper-lazy" />
  252. <div class="swiper-lazy-preloader"></div>
  253. </div>
  255. </div>
  256. <div class="swiper-button-prev"></div>
  257. <div class="swiper-button-next"></div>
  258. </div>
  259. <div id="histoire-back">
  260. <a href="/"class="btn btn-primary swup-link" role="button">Retour</a>
  261. </div>
  262. </div>
  263. </div>
  264. <div class="modal fade modal-video" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  265. <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
  266. <div class="modal-content">
  267. <div class="modal-header pt-3">
  268. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  269. </div>
  270. <div class="modal-body">
  271. <div class="video-player">
  272. <video
  273. id="video-pub"
  274. class="video-js vjs-fluid"
  275. controls
  276. preload="auto"
  277. poster="/build/images/news/video-poster.jpg"
  278. data-setup='{}'>
  279. <source src="/build/videos/news/pitch-pub.mp4" type="video/mp4"></source>
  280. </video>
  281. </div>
  282. </div>
  283. </div>
  284. </div>
  285. </div>
  286. </div>
  287. {% endblock %}