templates/pitchos-bavards/pitchos/inventeur-du-stylo-magique.html.twig line 1

Open in your IDE?
  1. {% set section = 'pitchos-persos' %}
  2. {% extends 'base.html.twig' %}
  3. {% block title %}Pitchos Bavards - Pitch - Brioche Pasquier{% endblock %}
  4. {% block body %}
  5. <div data-controller="pitchos-persos">
  7. {% include '_elements/page-header.html.twig'
  8. with {
  9. breadcrumb: [
  10. { path:'home', label:"Accueil"},
  11. { path:'pitchos-bavards', label: "Pitchos bavards" },
  12. { label: "Inventeur du stylo magique" }
  13. ],
  14. back: [
  15. { path:'pitchos-bavards' }
  16. ]
  17. }
  18. %}
  19. <div id="pitchos-content">
  20. <div id="pitchos-title" class="row">
  21. <div class="col-12 col-lg-5 col-md-4 col-sm-12">
  22. <div class="pitchos-card">
  23. <span>
  24. {% include '_elements/image.html.twig'
  25. with {src: "/build/images/pitchos-bavards/persos/perso-04.svg", mode: "width", lazy:true} %}
  26. </span>
  27. </div>
  28. </div>
  29. <div class="col-12 col-lg-7 col-md-8 col-sm-12">
  30. <h1 style="background: rgb(129,175,86); background: linear-gradient(0deg, rgba(129,175,86,1) 50%, rgba(146,193,98,1) 50%);">Inventeur du stylo magique</h1>
  31. <h2>Né de l’imagination de nos Pitchos, c’est le créateur d’un stylo très spécial, qui aide à ne pas faire de faute d’ortographe.</h2>
  32. </div>
  33. </div>
  34. <div id="pitchos-player">
  35. <div id="pitchos-player-header">{% include 'pitchos-bavards/themes/ecoute.svg' %}</div>
  37. <div id="pitchos-mp3-player" class="access" data-mp3="eaae5e9c06a80d192ded5cf7409880eb">
  38. <p>Clique sur le bouton pour écouter l’histoire du Pitchos</p>
  39. <div class="bottom-container">
  40. <div class="time-container">
  41. <span class="current-time">
  42. <span class="amplitude-current-minutes"></span>:<span class="amplitude-current-seconds"></span>
  43. </span>
  44. <span class="duration">
  45. <span class="amplitude-duration-minutes"></span>:<span class="amplitude-duration-seconds"></span>
  46. </span>
  47. </div>
  48. <div class="progress-bar"><progress class="amplitude-song-played-progress" id="song-played-progress"></progress></div>
  49. <div class="control-container">
  50. <div class="amplitude-play-pause" id="play-pause"></div>
  51. <div class="amplitude-prev" id="prev"></div>
  52. </div>
  53. </div>
  54. </div>
  55. <div id="pitchos-nuage">
  56. {% include '_elements/image.html.twig'
  57. with {src: "/build/images/pitchos-bavards/persos/nuage-04.svg", mode: "width", lazy:true} %}
  58. </div>
  59. </div>
  60. </div>
  61. <div id="pitchos-cta-jeux">
  62. <div class="content">
  63. <h3><span>Jeux</span></h3>
  64. <p>Découvre plein de mini-jeux pour jouer avec ta figurine</p>
  65. <a href="/pitchos-bavards/mini-jeux" class="btn btn--blue swup-link" data-swup-color="rgb(5,186,238)">Je joue</a>
  66. </div>
  67. </div>
  68. <div id="pitchos-nav">
  69. <h3>Découvre aussi&nbsp;:</h3>
  70. {% include 'pitchos-bavards/pitchos/swiper.html.twig' %}
  71. </div>
  72. <div class="footer">
  73. <div id="menu-perso">
  74. {% include 'pitchos-bavards/nav/pitchos-persos-nav.svg' %}
  75. </div>
  76. </div>
  77. </div>
  78. {% endblock %}
  80. {% block modals %}
  81. {{ parent() }}
  82. {% endblock %}