templates/bdnf/accueil.html.twig line 1

Open in your IDE?
  1. {% extends 'bdnf/base.html.twig' %}
  2. {% block body %}
  3.     <div id="index-banner" class="parallax-container">
  4.         <div class="section no-pad-bot">
  5.             <div class="container">
  6.                 <div class="row">
  7.                     <div class="col s12">
  8.                         <h1 class="header white-text" style="">{{ 'home.title'|trans }}</h1>
  9.                     </div>
  10.                 </div>
  11.                 <div class="row" style="">
  12.                     <a href="#telechargement" id="download-button" class="btn-large waves-effect waves-light red-bg-bdnf">{{ 'home.download'|trans }}</a>
  13.                     <div></div>
  16.                     <!-- Modal Video -->
  17.                     <div id="modal-video" class="modal">
  18.                         <div class="modal-content">
  19.                             <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
  20.                         </div>
  21.                     </div>
  23.                 </div>
  24.                 <br><br>
  26.             </div>
  27.         </div>
  28.         <div class="parallax"><img src="{{ asset('assets/img/iPad_V1_03b.png') }}" alt="Unsplashed background img 1"><div class="hide-on-med-and-down" style="width:15%;position: absolute;top: 25%;background: url({{ asset('assets/img/iPad_V1_03b_logo.png') }});height: 75%;background-size: 100%;background-repeat: no-repeat;"></div></div>
  29.     </div>
  31.     <div class="section">
  32.         <div class="container">
  33.             <div id="qui-quoi-pourquoi" class="section">
  35.                 <!--   Icon Section   -->
  36.                 <div class="video-container">
  37.                     <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="{{ 'home.video_presentation'|trans  }}" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
  38.                 </div>
  39.             </div>
  40.         </div>
  42.     </div>
  44.     <div class="gris-light-bg-bdnf">
  45.         <div class="container">
  47.             <div class="section">
  49.                 <div class="row">
  50.                     <div class="col s4 m2">
  51.                         <img src="{{ asset('assets/img/Personnage2-Pose1-Fille-Neutre.png') }}" width="100%" alt="" />
  52.                     </div>
  53.                     <div class="col s6 m3">
  54.                         <h4 class="typo-bangers red-bdnf" style="margin-top:0">{{ 'home.sections.section1.title'|trans }}</h4>
  55.                         <p class="left-align light">
  56.                             {{ 'home.sections.section1.content'|trans | raw}}
  58.                         </p>
  59.                     </div>
  60.                     <div class="col s12 m6" style="padding-right:0">
  61.                         <img src="{{ asset('assets/img/TROIS_01b.jpg') }}" width="100%" alt="" />
  62.                     </div>
  63.                 </div>
  65.                 <div class="row">
  66.                     <div class="col s12 m6" style="padding-left:0">
  67.                         <img src="{{ asset('assets/img/CP1.png') }}" width="100%" alt="" />
  68.                     </div>
  69.                     <div class="col s12 m6">
  70.                         <h4 class="typo-bangers red-bdnf" style="margin-top:0">{{ 'home.sections.section2.title'| trans | raw}}</h4>
  71.                         <p class="left-align light" style="font-weight:bold;">
  72.                             {{ 'home.sections.section2.content'| trans | raw}}
  73.                         <br>
  75.                     </div>
  76.                 </div>
  78.                 <div class="row">
  79.                     <div class="col s12 m6" style="padding-left:0">
  80.                         <h4 class="typo-bangers red-bdnf"  style="margin-top:0">{{ 'home.sections.section3.title'| trans | raw}}</h4>
  81.                         <p>{{ 'home.sections.section3.content'| trans | raw}}</p>
  82.                     </div>
  83.                     <div class="col s12 m6" style="padding-right:0">
  84.                         <img src="{{ asset('assets/img/Ipad_Enfant_03.jpg') }}" width="100%" alt="" />
  85.                     </div>
  86.                 </div>
  88.             </div>
  89.         </div>
  90.     </div>
  95.     <div class="section">
  97.         <div class="row">
  98.             <h4 class="center-align red-bdnf titre-section">{{ 'home.sections.section4.title'| trans | raw}}</h4>
  101.             <div class="row">
  103.                 <div class="carousel">
  104.                     <a class="carousel-item" href="#one!"><h5 align="center">{{ 'home.sections.section4.instagram'| trans | raw}}</h5><img src="{{ asset('assets/img/Insta_stories.png') }}" class="materialboxed" width="100%" alt=""></a>
  105.                     <a class="carousel-item" href="#two!"><h5 align="center">{{ 'home.sections.section4.meme'| trans | raw}}</h5><img src="{{ asset('assets/img/vroom_Gil_Blondel.png') }}" class="materialboxed" width="100%" alt=""></a>
  106.                     <a class="carousel-item" href="#three!"><h5 align="center">{{ 'home.sections.section4.two_cases'| trans | raw}}</h5><img src="{{ asset('assets/img/duo.png') }}" class="materialboxed" width="100%" alt=""></a>
  107.                     <a class="carousel-item" href="#four!"><h5 align="center">{{ 'home.sections.section4.comic_strip'| trans | raw}}</h5><img src="{{ asset('assets/img/comic_strip_Gilblondel.jpg') }}" class="materialboxed" width="100%" alt=""></a>
  108.                     <a class="carousel-item" href="#five!"><h5 align="center">{{ 'home.sections.section4.planche'| trans | raw}}</h5><img src="{{ asset('assets/img/ECO.png') }}" class="materialboxed" width="100%" alt=""></a>
  109.                 </div>
  111.             </div>
  112.         </div>
  114.         <div class="gris-light-bg-bdnf section">
  115.             <div class="container ">
  116.                 <div class="row bloc-featured">
  117.                     <div class="col s12 m5 l4" style="padding:0;">
  118.                         <img src="{{ asset('assets/img/ordi.jpg') }}" width="100%" alt="" />
  119.                     </div>
  120.                     <div class="col s12 m7 l8">
  121.                         <div class="bloc-featured-contenu">
  122.                             <h5 class="">{{ 'home.sections.section5.title'| trans | raw}}</h5>
  123.                             {{ 'home.sections.section5.content'| trans | raw}}
  124.                             <a href="{{ path('bibliotheque-pedagogique') }}" id="download-button" class="btn waves-effect red-bg-bdnf">{{ 'home.sections.section5.btn.discover'| trans | raw}}</a>
  125.                         </div>
  126.                     </div>
  127.                 </div>
  128.             </div>
  129.         </div>
  131.         <div class="gris-light-bg-bdnf section">
  132.             <div class="container">
  134.                 <div class="section">
  136.                     <div class="row">
  137.                         <h4 class="center-align titre-section scrollspy" id="telechargement">{{ 'home.sections.section6.title'| trans | raw}}</h4>
  138.                         <p>{{ 'home.sections.section6.content'| trans({'%cookies%': path('cookies'), '%cgu%': path('cgu')}) | raw }}</p>
  139.                         <div class="col s6 m3">
  140.                             <div class="bloc-app center-align">
  141.                                 <div class="logo-store">
  143.                                     <object data="{{ asset('/assets/img/windows.svg') }}"
  144.                                             width="84"
  145.                                             height="84"
  146.                                             image-rendering="auto"
  147.                                             type="image/svg+xml"
  148.                                             style="pointer-events: none; fill: #A4C639;">
  150.                                         <img src="{{ asset('/assets/img/windows.png') }}" alt="">
  152.                                     </object>
  155.                                 </div>
  156.                                 <h5>Windows</h5>
  157.                                 <p>PC</p>
  158.                                 <a href="{{ applications.windows.downloadLink }}" onclick="return marqueXiti(this, 'windows')" class="waves-effect waves-light btn-large red-bg-bdnf white-text"><i class="material-icons">file_download</i> {{ 'home.sections.section6.btn.download'| trans | raw}}</a>
  159.                             </div>
  160.                         </div>
  162.                         <div class="col s6 m3">
  163.                             <div class="bloc-app center-align">
  164.                                 <div class="logo-store">
  166.                                     <object data="{{ asset('/assets/img/apple.svg') }}"
  167.                                             width="84"
  168.                                             height="84"
  169.                                             image-rendering="auto"
  170.                                             type="image/svg+xml"
  171.                                             style="pointer-events: none; fill: #A4C639;">
  173.                                         <img src="{{ asset('/assets/img/ios.png') }}" alt="">
  175.                                     </object>
  177.                                 </div>
  178.                                 <h5>MacOS</h5>
  179.                                 <p>{{ 'home.sections.section6.computer'| trans | raw}}</p>
  180.                                 <a href="{{ applications.macos.downloadLink }}" onclick="return marqueXiti(this, 'macos')" class="waves-effect waves-light btn-large red-bg-bdnf white-text"> {{ 'home.sections.section6.btn.download'| trans | raw}}</a>
  181.                             </div>
  182.                         </div>
  185.                         <div class="col s6 m3">
  186.                             <div class="bloc-app center-align">
  187.                                 <div class="logo-store">
  191.                                     <object data="{{ asset('/assets/img/android.svg') }}"
  192.                                             width="84"
  193.                                             height="84"
  194.                                             image-rendering="auto"
  195.                                             type="image/svg+xml"
  196.                                             style="pointer-events: none; fill: #A4C639;">
  198.                                         <img src="{{ asset('/assets/img/android.png') }}" alt="">
  200.                                     </object>
  202.                                 </div>
  203.                                 <h5>Android</h5>
  204.                                 <p>{{ 'home.sections.section6.tablet'| trans | raw}}</p>
  205.                                 <a href="{{ applications.android_tablette.downloadLink }}" onclick="return marqueXiti(this, 'playstore')" class="waves-effect waves-light btn-large red-bg-bdnf white-text">Play Store</a>
  206.                             </div>
  207.                         </div>
  209.                         <div class="col s6 m3">
  210.                             <div class="bloc-app center-align">
  211.                                 <div class="logo-store">
  214.                                     <object data="{{ asset('/assets/img/apple.svg') }}"
  215.                                             width="84"
  216.                                             height="84"
  217.                                             image-rendering="auto"
  218.                                             type="image/svg+xml"
  219.                                             style="pointer-events: none; fill: #A4C639;">
  221.                                         <img src="{{ asset('/assets/img/ios.png') }}" alt="">
  223.                                     </object>
  225.                                 </div>
  226.                                 <h5>iOS</h5>
  227.                                 <p>{{ 'home.sections.section6.tablet'| trans | raw}}</p>
  229.                                 <a href="{{ applications.ios_tablette.downloadLink }}" onclick="return marqueXiti(this, 'appstore')" class="waves-effect waves-light btn-large red-bg-bdnf white-text">App Store</a>
  230.                             </div>
  231.                         </div>
  234.                         <div class="col s6 m3">
  235.                             <div class="bloc-app center-align">
  236.                                 <div class="logo-store">
  240.                                     <object data="{{ asset('/assets/img/android.svg') }}"
  241.                                             width="84"
  242.                                             height="84"
  243.                                             image-rendering="auto"
  244.                                             type="image/svg+xml"
  245.                                             style="pointer-events: none; fill: #A4C639;">
  247.                                         <img src="{{ asset('/assets/img/android.png') }}" alt="">
  249.                                     </object>
  251.                                 </div>
  252.                                 <h5>Android</h5>
  253.                                 <p>Mobile</p>
  254.                                 <a href="{{ applications.android_mobile.downloadLink }}" onclick="return marqueXiti(this, 'playstore')" class="waves-effect waves-light btn-large red-bg-bdnf white-text">Play Store</a>
  255.                             </div>
  256.                         </div>
  260.                         <div class="col s6 m3">
  261.                             <div class="bloc-app center-align">
  262.                                 <div class="logo-store">
  265.                                     <object data="{{ asset('/assets/img/apple.svg') }}"
  266.                                             width="84"
  267.                                             height="84"
  268.                                             image-rendering="auto"
  269.                                             type="image/svg+xml"
  270.                                             style="pointer-events: none; fill: #A4C639;">
  272.                                         <img src="{{ asset('/assets/img/ios.png') }}" alt="">
  274.                                     </object>
  276.                                 </div>
  277.                                 <h5>iOS</h5>
  278.                                 <p>Mobile</p>
  279.                                 <a href="{{ applications.ios_mobile.downloadLink }}" onclick="return marqueXiti(this, 'appstore')" class="waves-effect waves-light btn-large red-bg-bdnf white-text">App Store</a>
  280.                             </div>
  281.                         </div>
  283.                         <div class="col s6 m3">
  284.                             <div class="bloc-app center-align">
  285.                                 <div class="logo-store">
  288.                                     <object data="{{ asset('/assets/img/linux.svg') }}"
  289.                                             width="84"
  290.                                             height="84"
  291.                                             image-rendering="auto"
  292.                                             type="image/svg+xml"
  293.                                             style="pointer-events: none; fill: #A4C639;">
  295.                                         <img src="{{ asset('/assets/img/linux.png') }}" alt="">
  297.                                     </object>
  299.                                 </div>
  300.                                 <h5>Linux</h5>
  301.                                 <p>{{ 'home.sections.section6.desktop'| trans | raw}}</p>
  302.                                 <a href="{{ applications.linux.downloadLink }}" onclick="return marqueXiti(this, 'Linux')" class="waves-effect waves-light btn-large red-bg-bdnf white-text"><i class="material-icons">file_download</i> Télécharger</a>
  303.                             </div>
  304.                         </div>
  305.                     </div>
  306.                 </div>
  308.             </div>
  309.         </div>
  310.         <div class="container">
  311.             <div id="qui-quoi-pourquoi" class="section">
  313.                 <!--   Icon Section   -->
  314.                 <div class="video-container">
  315.                     <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="{{ 'home.sections.section6.video' | trans }}" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
  316.                 </div>
  317.             </div>
  318.         </div>
  320.     </div>
  321. {% endblock %}