templates/front/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ parent() }}{% endblock %}
  5. {% block body %}
  7.     <section class="hpslider">
  8.         <div class="swiper-container">
  9.             <!-- Additional required wrapper -->
  10.             <div class="swiper-wrapper">
  11.                 <!-- Slides -->
  12.                 {% set slidesArr = ["CCCCCC", "FFAAAA", "AAFFAA", "AAAAFF", "FFFFAA", "FFAAFF"] %}
  13.                 {% set slidesArr2 = ["AAAAAA", "DD8888", "88DD88", "8888DD", "DDDD88", "DD88DD"] %}
  14.                 {% for i in 1..5 %}
  15.                     <div class="swiper-slide py-5" style="background: #{{ slidesArr[i] }}">
  16.                         <div class="d-block w-100 heroImg"
  17.                              style="background-image: url('https://via.placeholder.com/1000/{{ slidesArr[i] }}/{{ slidesArr2[i] }}');"></div>
  18.                         <div class="caption first">
  19.                             <div class="container">
  20.                                 <div class="row align-items-center">
  21.                                     <div class="col-lg-5 col-md-8 pt-md-5 pt-lg-0">
  22.                                         <h1>Titre</h1>
  23.                                         <h2>Sous-titre sous le titre</h2>
  25.                                         <p>
  26.                                             Trois lignes de texte <br>
  27.                                             Ad alias aliquam commodi ipsa iusto <br>
  28.                                             maiores minus officiis omnis pariatur quidem.
  29.                                         </p>
  30.                                         <p>
  31.                                             <a class="cta" href="#">Appel to action</a>
  32.                                         </p>
  33.                                     </div>
  34.                                 </div>
  35.                             </div>
  36.                         </div>
  37.                     </div>
  38.                 {% endfor %}
  39.             </div>
  41.         </div>
  42.         <!-- If we need pagination -->
  43.         <div class="swiper-pagination"></div>
  45.         <!-- If we need navigation buttons -->
  46.         <div class="swiper-button-prev">&nbsp;</div>
  47.         <div class="swiper-button-next">&nbsp;</div>
  48.     </section>
  49.     <section class="pt-5">
  50.         <div class="container">
  51.             <div class="row">
  52.                 <div class="col-12">
  53.                     <div class="row">
  54.                         <article class="col-12 col-sm-6 col-md-4 pb-5">
  55.                             <a class="img" href="#"><img src="https://via.placeholder.com/400" alt="image"
  56.                                                          class="img-fluid mb-4"></a>
  57.                             <h3><a href="#">Titre</a></h3>
  58.                             <div class="pb-2">Lorem ipsum dolor sit amet, consectetur.</div>
  59.                         </article>
  60.                         <article class="col-12 col-sm-6 col-md-4 pb-5">
  61.                             <a class="img" href="#"><img src="https://via.placeholder.com/400" alt="image"
  62.                                                          class="img-fluid mb-4"></a>
  63.                             <h3><a href="#">Titre</a></h3>
  64.                             <div class="pb-2">Lorem ipsum dolor sit amet, consectetur.</div>
  65.                         </article>
  66.                         <article class="col-12 col-sm-6 col-md-4 pb-5">
  67.                             <a class="img" href="#"><img src="https://via.placeholder.com/400" alt="image"
  68.                                                          class="img-fluid mb-4"></a>
  69.                             <h3><a href="#">Titre</a></h3>
  70.                             <div class="pb-2">Lorem ipsum dolor sit amet, consectetur.</div>
  71.                         </article>
  72.                     </div>
  73.                 </div>
  74.             </div>
  75.         </div>
  77.     </section>
  79.     <section style="background: #EEE" class="mb-5">
  81.         <div class="container">
  83.             <div class="row">
  84.                 <div class="col pb-4 pb-md-5"><span class="section-title line">Actualités</span></div>
  85.             </div>
  86.             <div class="row">
  87.                 <div class="col-12 col-lg-6 order-last order-lg-first">
  88.                     <div class="row">
  89.                         <div class="col-12 {#col-lg-10 offset-0 offset-lg-2#} pb-4 pb-lg-5">
  90.                             <h2>Titre actu</h2>
  91.                             <img src="https://via.placeholder.com/400" alt="image article"
  92.                                  class="img-fluid d-block d-md-none pb-4" style="width: 100%;">
  93.                             <div>
  94.                                 <p><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius,
  95.                                         odio!</strong></p>
  96.                                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta natus nemo
  97.                                     perferendis quasi tenetur. Accusamus aliquam at deleniti inventore, libero
  98.                                     necessitatibus neque nostrum odit quae repellendus tempore tenetur, unde vitae.</p>
  99.                                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid corporis esse
  100.                                     magnam nulla odio tempore! A deserunt quae vero.</p>
  101.                             </div>
  102.                             <p class="text-center text-md-left">
  103.                                 <a href="https://www.mediprema.com/fr/news/2020-04-15/information-coronavirus">
  104.                                     Lire plus
  105.                                 </a>
  106.                             </p>
  107.                         </div>
  108.                         <div class="col pb-4 text-center text-md-left offset-lg-0">
  109.                             <a class="cta" href="https://www.mediprema.com/fr/actualites">Toutes les actualités</a>
  110.                         </div>
  111.                     </div>
  112.                 </div>
  113.                 <div class="col-12 {#col-lg-5#}col-lg-6 d-none d-md-block order-first order-lg-last pb-3">
  114.                     <img src="https://via.placeholder.com/400" alt="image article" class="img-fluid pb-3"
  115.                          style="width: 100%;"></div>
  116.             </div>
  117.         </div>
  119.     </section>
  121.     <section class="container pb-5">
  122.         <h1>Titre</h1>
  124.         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum cupiditate dicta, dolor doloremque esse ex
  125.             facilis
  126.             fugiat illo illum inventore labore minus mollitia, nemo non officiis tempore temporibus, ullam vero.</p>
  128.         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad dolor enim esse facilis odit quidem
  129.             ratione repellat, suscipit? A assumenda blanditiis consequatur cupiditate fugit molestiae, neque tenetur
  130.             veniam
  131.             vitae?</p>
  134.         <p>This friendly message is coming from:</p>
  135.         <ul>
  136.             <li>Your controller at <code><a
  137.                             href="{{ 'C:/wamp64/www/socleSF5/src/Controller/FrontController.php'|file_link(0) }}">src/Controller/FrontController.php</a></code>
  138.             </li>
  139.             <li>Your template at <code><a
  140.                             href="{{ 'C:/wamp64/www/socleSF5/templates/front/index.html.twig'|file_link(0) }}">templates/front/index.html.twig</a></code>
  141.             </li>
  142.         </ul>
  144.         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum cupiditate dicta, dolor doloremque esse ex
  145.             facilis
  146.             fugiat illo illum inventore labore minus mollitia, nemo non officiis tempore temporibus, ullam vero.</p>
  147.     </section>
  148.     <section class="defaultslider">
  149.         <div class="container">
  150.             <h2>Slider</h2>
  151.         </div>
  153.         <div class="swiper-container">
  154.             <!-- Additional required wrapper -->
  155.             <div class="swiper-wrapper">
  156.                 <!-- Slides -->
  157.                 {% for i in 1..5 %}
  158.                     <div class="swiper-slide">
  159.                         <div class="pb-3">
  160.                             <img src="https://via.placeholder.com/272x338" alt="">
  161.                         </div>
  162.                         <div class="text">
  163.                             <div>
  164.                                 <h3>Title</h3>
  165.                                 <p>
  166.                                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid atque doloribus
  167.                                     eius ipsa libero natus officiis repellat.
  168.                                 </p>
  169.                             </div>
  170.                             <p>
  171.                                 <a href="#" class="external white" target="_blank">
  172.                                     {{ 'Découvrir'|trans }}
  173.                                 </a>
  174.                             </p>
  175.                         </div>
  176.                     </div>
  177.                 {% endfor %}
  178.             </div>
  179.         </div>
  180.     </section>
  181. {% endblock %}