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. <li><a class="dropdown-item" href="{{ path('history') }}#2025">2025</a></li>
  32. <li><a class="dropdown-item" href="{{ path('history') }}#2026">2026</a></li>
  33. </ul>
  34. </div>
  35. </div>
  36. <div id="histoire-slider" class="swiper">
  37. <div class="swiper-wrapper">
  39. <!-- 1986 -->
  40. <div class="swiper-slide" data-hash="1986">
  41. <img src="build/images/history/1986-01.png" width="1280" height="1684" alt="1986 / 01" class="swiper-lazy" />
  42. <img src="build/images/history/date-1986.svg" width="920" height="720" alt="1986" class="swiper-date swiper-lazy" />
  43. <div class="swiper-lazy-preloader"></div>
  44. </div>
  45. <div class="swiper-slide" data-hash="1986">
  46. <img src="build/images/history/1986-02.png" width="1280" height="1684" alt="1986 / 02" class="swiper-lazy" />
  47. <img src="build/images/history/date-1986.svg" width="920" height="720" alt="1986" class="swiper-date swiper-lazy" />
  48. <div class="swiper-lazy-preloader"></div>
  49. </div>
  51. <!-- 1987 -->
  52. <div class="swiper-slide" data-hash="1987">
  53. <img src="build/images/history/1987-01.png" width="1280" height="1684" alt="1987 / 01" class="swiper-lazy" />
  54. <img src="build/images/history/date-1987.svg" width="920" height="720" alt="1987" class="swiper-date swiper-lazy" />
  55. <div class="swiper-lazy-preloader"></div>
  56. </div>
  57. <div class="swiper-slide" data-hash="1987">
  58. <img src="build/images/history/1987-02.png" width="1280" height="1684" alt="1987 / 02" class="swiper-lazy" />
  59. <img src="build/images/history/date-1987.svg" width="920" height="720" alt="1987" class="swiper-date swiper-lazy" />
  60. <div class="swiper-lazy-preloader"></div>
  61. </div>
  63. <!-- 1988 -->
  64. <div class="swiper-slide" data-hash="1988">
  65. <img src="build/images/history/1988-01.png" width="1280" height="1684" alt="1988 / 01" class="swiper-lazy" />
  66. <img src="build/images/history/date-1988.svg" width="920" height="720" alt="1988" class="swiper-date swiper-lazy" />
  67. <div class="swiper-lazy-preloader"></div>
  68. </div>
  69. <div class="swiper-slide" data-hash="1988">
  70. <img src="build/images/history/1988-02.png" width="1280" height="1684" alt="1988 / 02" class="swiper-lazy" />
  71. <img src="build/images/history/date-1988.svg" width="920" height="720" alt="1988" class="swiper-date swiper-lazy" />
  72. <div class="swiper-lazy-preloader"></div>
  73. </div>
  75. <!-- 1990s -->
  76. <div class="swiper-slide" data-hash="1990s">
  77. <img src="build/images/history/1990s-01.png" width="1280" height="1684" alt="Les années 90 / 01" class="swiper-lazy" />
  78. <img src="build/images/history/date-1990s.svg" width="920" height="720" alt="Les années 90" class="swiper-date swiper-lazy" />
  79. <div class="swiper-lazy-preloader"></div>
  80. </div>
  81. <div class="swiper-slide" data-hash="1990s">
  82. <img src="build/images/history/1990s-02.png" width="1280" height="1684" alt="Les années 90 / 02" class="swiper-lazy" />
  83. <a href="https://www.ina.fr/ina-eclaire-actu/publicite/pub1587078068/pitch-oh-mon-pitch" target="_blank"></a>
  84. <img src="build/images/history/date-1990s.svg" width="920" height="720" alt="Les années 90" class="swiper-date swiper-lazy" />
  85. <div class="swiper-lazy-preloader"></div>
  86. </div>
  88. <!-- 2000s -->
  89. <div class="swiper-slide" data-hash="2000s">
  90. <img src="build/images/history/2000s-01.png" width="1280" height="1684" alt="Les années 2000 / 01" class="swiper-lazy" />
  91. <img src="build/images/history/date-2000s.svg" width="920" height="720" alt="Les années 2000" class="swiper-date swiper-lazy" />
  92. <div class="swiper-lazy-preloader"></div>
  93. </div>
  94. <div class="swiper-slide" data-hash="2000s">
  95. <img src="build/images/history/2000s-02.png" width="1280" height="1684" alt="Les années 2000 / 02" class="swiper-lazy" />
  96. <img src="build/images/history/date-2000s.svg" width="920" height="720" alt="Les années 2000" class="swiper-date swiper-lazy" />
  97. <div class="swiper-lazy-preloader"></div>
  98. </div>
  100. <!-- 2010 -->
  101. <div class="swiper-slide" data-hash="2010">
  102. <img src="build/images/history/2010-01.png" width="1280" height="1684" alt="2010 / 01" class="swiper-lazy" />
  103. <img src="build/images/history/date-2010.svg" width="920" height="720" alt="2010" class="swiper-date swiper-lazy" />
  104. <div class="swiper-lazy-preloader"></div>
  105. </div>
  106. <div class="swiper-slide" data-hash="2010">
  107. <img src="build/images/history/2010-02.png" width="1280" height="1684" alt="2010 / 02" class="swiper-lazy" />
  108. <img src="build/images/history/date-2010.svg" width="920" height="720" alt="2010" class="swiper-date swiper-lazy" />
  109. <div class="swiper-lazy-preloader"></div>
  110. </div>
  112. <!-- 2011 -->
  113. <div class="swiper-slide" data-hash="2011">
  114. <img src="build/images/history/2011-01.png" width="1280" height="1684" alt="2011 / 01" class="swiper-lazy" />
  115. <img src="build/images/history/date-2011.svg" width="920" height="720" alt="2011" class="swiper-date swiper-lazy" />
  116. <div class="swiper-lazy-preloader"></div>
  117. </div>
  118. <div class="swiper-slide" data-hash="2011">
  119. <img src="build/images/history/2011-02.png" width="1280" height="1684" alt="2011 / 02" class="swiper-lazy" />
  120. <img src="build/images/history/date-2011.svg" width="920" height="720" alt="2011" class="swiper-date swiper-lazy" />
  121. <div class="swiper-lazy-preloader"></div>
  122. </div>
  124. <!-- 2012 -->
  125. <div class="swiper-slide" data-hash="2012">
  126. <img src="build/images/history/2012-01.png" width="1280" height="1684" alt="2012 / 01" class="swiper-lazy" />
  127. <img src="build/images/history/date-2012.svg" width="920" height="720" alt="2012" class="swiper-date swiper-lazy" />
  128. <div class="swiper-lazy-preloader"></div>
  129. </div>
  130. <div class="swiper-slide" data-hash="2012">
  131. <img src="build/images/history/2012-02.png" width="1280" height="1684" alt="2012 / 02" class="swiper-lazy" />
  132. <img src="build/images/history/date-2012.svg" width="920" height="720" alt="2012" class="swiper-date swiper-lazy" />
  133. <div class="swiper-lazy-preloader"></div>
  134. </div>
  136. <!-- 2013-2017 -->
  137. <div class="swiper-slide" data-hash="2013-2017">
  138. <img src="build/images/history/2013-2017-01.png" width="1280" height="1684" alt="2013-2017 / 01" class="swiper-lazy" />
  139. <img src="build/images/history/date-2013-2017.svg" width="920" height="720" alt="2013-2017" class="swiper-date swiper-lazy" />
  140. <div class="swiper-lazy-preloader"></div>
  141. </div>
  142. <div class="swiper-slide" data-hash="2013-2017">
  143. <img src="build/images/history/2013-2017-02.png" width="1280" height="1684" alt="2013-2017 / 02" class="swiper-lazy" />
  144. <img src="build/images/history/date-2013-2017.svg" width="920" height="720" alt="2013-2017" class="swiper-date swiper-lazy" />
  145. <div class="swiper-lazy-preloader"></div>
  146. </div>
  148. <!-- 2015 -->
  149. <div class="swiper-slide" data-hash="2015">
  150. <img src="build/images/history/2015-01.png" width="1280" height="1684" alt="2015 / 01" class="swiper-lazy" />
  151. <img src="build/images/history/date-2015.svg" width="920" height="720" alt="2015" class="swiper-date swiper-lazy" />
  152. <div class="swiper-lazy-preloader"></div>
  153. </div>
  154. <div class="swiper-slide" data-hash="2015">
  155. <img src="build/images/history/2015-02.png" width="1280" height="1684" alt="2015 / 02" class="swiper-lazy" />
  156. <img src="build/images/history/date-2015.svg" width="920" height="720" alt="2015" class="swiper-date swiper-lazy" />
  157. <div class="swiper-lazy-preloader"></div>
  158. </div>
  160. <!-- 2016 -->
  161. <div class="swiper-slide" data-hash="2016">
  162. <img src="build/images/history/2016-01.png" width="1280" height="1684" alt="2016 / 01" class="swiper-lazy" />
  163. <img src="build/images/history/date-2016.svg" width="920" height="720" alt="2016" class="swiper-date swiper-lazy" />
  164. <div class="swiper-lazy-preloader"></div>
  165. </div>
  166. <div class="swiper-slide" data-hash="2016">
  167. <img src="build/images/history/2016-02.png" width="1280" height="1684" alt="2016 / 02" class="swiper-lazy" />
  168. <img src="build/images/history/date-2016.svg" width="920" height="720" alt="2016" class="swiper-date swiper-lazy" />
  169. <div class="swiper-lazy-preloader"></div>
  170. </div>
  172. <!-- 2018 -->
  173. <div class="swiper-slide" data-hash="2018">
  174. <img src="build/images/history/2018-01.png" width="1280" height="1684" alt="2018 / 01" class="swiper-lazy" />
  175. <img src="build/images/history/date-2018.svg" width="920" height="720" alt="2018" class="swiper-date swiper-lazy" />
  176. <div class="swiper-lazy-preloader"></div>
  177. </div>
  178. <div class="swiper-slide" data-hash="2018">
  179. <img src="build/images/history/2018-02.png" width="1280" height="1684" alt="2018 / 02" class="swiper-lazy" />
  180. <img src="build/images/history/date-2018.svg" width="920" height="720" alt="2018" class="swiper-date swiper-lazy" />
  181. <div class="swiper-lazy-preloader"></div>
  182. </div>
  184. <!-- 2019 -->
  185. <div class="swiper-slide" data-hash="2019">
  186. <img src="build/images/history/2019-01.png" width="1280" height="1684" alt="2019 / 01" class="swiper-lazy" />
  187. <img src="build/images/history/date-2019.svg" width="920" height="720" alt="2019" class="swiper-date swiper-lazy" />
  188. <div class="swiper-lazy-preloader"></div>
  189. </div>
  190. <div class="swiper-slide" data-hash="2019">
  191. <img src="build/images/history/2019-02.png" width="1280" height="1684" alt="2019 / 02" class="swiper-lazy" />
  192. <img src="build/images/history/date-2019.svg" width="920" height="720" alt="2019" class="swiper-date swiper-lazy" />
  193. <div class="swiper-lazy-preloader"></div>
  194. </div>
  196. <!-- 2020 -->
  197. <div class="swiper-slide" data-hash="2020">
  198. <img src="build/images/history/2020-01.png" width="1280" height="1684" alt="2020 / 01" class="swiper-lazy" />
  199. <img src="build/images/history/date-2020.svg" width="920" height="720" alt="2020" class="swiper-date swiper-lazy" />
  200. <div class="swiper-lazy-preloader"></div>
  201. </div>
  202. <div class="swiper-slide" data-hash="2020">
  203. <img src="build/images/history/2020-02.png" width="1280" height="1684" alt="2020 / 02" class="swiper-lazy" />
  204. <img src="build/images/history/date-2020.svg" width="920" height="720" alt="2020" class="swiper-date swiper-lazy" />
  205. <div class="swiper-lazy-preloader"></div>
  206. </div>
  208. <!-- 2021 -->
  209. <div class="swiper-slide" data-hash="2021">
  210. <img src="build/images/history/2021-01.png" width="1280" height="1684" alt="2021 / 01" class="swiper-lazy" />
  211. <img src="build/images/history/date-2021.svg" width="920" height="720" alt="2021" class="swiper-date swiper-lazy" />
  212. <div class="swiper-lazy-preloader"></div>
  213. </div>
  214. <div class="swiper-slide" data-hash="2021">
  215. <img src="build/images/history/2021-02.png" width="1280" height="1684" alt="2021 / 02" class="swiper-lazy" />
  216. <a href="#" data-bs-toggle="modal" data-bs-target="#videoModal"></a>
  217. <img src="build/images/history/date-2021.svg" width="920" height="720" alt="2021" class="swiper-date swiper-lazy" />
  218. <div class="swiper-lazy-preloader"></div>
  219. </div>
  221. <!-- 2022 -->
  222. <div class="swiper-slide" data-hash="2022">
  223. <img src="build/images/history/2022-01.png" width="1280" height="1684" alt="2022 / 01" class="swiper-lazy" />
  224. <img src="build/images/history/date-2022.svg" width="920" height="720" alt="2022" class="swiper-date swiper-lazy" />
  225. <div class="swiper-lazy-preloader"></div>
  226. </div>
  227. <div class="swiper-slide" data-hash="2022">
  228. <img src="build/images/history/2022-02.png" width="1280" height="1684" alt="2022 / 02" class="swiper-lazy" />
  229. <img src="build/images/history/date-2022.svg" width="920" height="720" alt="2022" class="swiper-date swiper-lazy" />
  230. <div class="swiper-lazy-preloader"></div>
  231. </div>
  233. <!-- 2023 -->
  234. <div class="swiper-slide" data-hash="2023">
  235. <img src="build/images/history/2023-01.png" width="1280" height="1684" alt="2023 / 01" class="swiper-lazy" />
  236. <img src="build/images/history/date-2023.svg" width="920" height="720" alt="2023" class="swiper-date swiper-lazy" />
  237. <div class="swiper-lazy-preloader"></div>
  238. </div>
  239. <div class="swiper-slide" data-hash="2023">
  240. <img src="build/images/history/2023-02.png" width="1280" height="1684" alt="2023 / 02" class="swiper-lazy" />
  241. <img src="build/images/history/date-2023.svg" width="920" height="720" alt="2023" class="swiper-date swiper-lazy" />
  242. <div class="swiper-lazy-preloader"></div>
  243. </div>
  245. <!-- 2024 -->
  246. <div class="swiper-slide" data-hash="2024">
  247. <img src="build/images/history/2024-01.png" width="1280" height="1684" alt="2024 / 01" class="swiper-lazy" />
  248. <img src="build/images/history/date-2024.svg" width="920" height="720" alt="2024" class="swiper-date swiper-lazy" />
  249. <div class="swiper-lazy-preloader"></div>
  250. </div>
  251. <div class="swiper-slide" data-hash="2024">
  252. <img src="build/images/history/2024-02.png" width="1280" height="1684" alt="2024 / 02" class="swiper-lazy" />
  253. <img src="build/images/history/date-2024.svg" width="920" height="720" alt="2024" class="swiper-date swiper-lazy" />
  254. <div class="swiper-lazy-preloader"></div>
  255. </div>
  257. <!-- 2025 -->
  258. <div class="swiper-slide" data-hash="2025">
  259. <img src="build/images/history/2025-01.png" width="1280" height="1684" alt="2025 / 01" class="swiper-lazy" />
  260. <img src="build/images/history/date-2025.svg" width="920" height="720" alt="2025" class="swiper-date swiper-lazy" />
  261. <div class="swiper-lazy-preloader"></div>
  262. </div>
  263. <div class="swiper-slide" data-hash="2025">
  264. <img src="build/images/history/2025-02.png" width="1280" height="1684" alt="2025 / 02" class="swiper-lazy" />
  265. <img src="build/images/history/date-2025.svg" width="920" height="720" alt="2025" class="swiper-date swiper-lazy" />
  266. <div class="swiper-lazy-preloader"></div>
  267. <div class="video-player" id="video-history-cholet">
  268. <video
  269. id="video-cholet"
  270. class="video-js vjs-fluid"
  271. controls="false"
  272. preload="auto"
  273. muted
  274. autoplay
  275. loop
  276. poster="/build/images/history/cholet.jpg"
  277. data-setup='{}'>
  278. <source src="/build/videos/history/cholet.mp4" type="video/mp4"></source>
  279. </video>
  280. </div>
  281. </div>
  283. <!-- 2026 -->
  284. <div class="swiper-slide" data-hash="2026">
  285. <img src="build/images/history/2026-01.png" width="1280" height="1684" alt="2026 / 01" class="swiper-lazy" />
  286. <img src="build/images/history/date-2026.svg" width="920" height="720" alt="2026" class="swiper-date swiper-lazy" />
  287. <div class="swiper-lazy-preloader"></div>
  288. </div>
  289. <div class="swiper-slide" data-hash="2026">
  290. <img src="build/images/history/2026-02.png" width="1280" height="1684" alt="2026 / 02" class="swiper-lazy" />
  291. <img src="build/images/history/date-2026.svg" width="920" height="720" alt="2026" class="swiper-date swiper-lazy" />
  292. <div class="swiper-lazy-preloader"></div>
  293. </div>
  295. </div>
  296. <div class="swiper-button-prev"></div>
  297. <div class="swiper-button-next"></div>
  298. </div>
  299. <div id="histoire-back">
  300. <a href="/"class="btn btn-primary swup-link" role="button">Retour</a>
  301. </div>
  302. </div>
  303. </div>
  304. <div class="modal fade modal-video" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  305. <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
  306. <div class="modal-content">
  307. <div class="modal-header pt-3">
  308. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  309. </div>
  310. <div class="modal-body">
  311. <div class="video-player">
  312. <video
  313. id="video-pub"
  314. class="video-js vjs-fluid"
  315. controls
  316. preload="auto"
  317. poster="/build/images/news/video-poster.jpg"
  318. data-setup='{}'>
  319. <source src="/build/videos/news/pitch-pub.mp4" type="video/mp4"></source>
  320. </video>
  321. </div>
  322. </div>
  323. </div>
  324. </div>
  325. </div>
  326. </div>
  327. {% endblock %}