templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Accueil
  4. {% endblock %}
  6. {% block body %}
  7.         <!-- Masthead-->
  8.         <header class="masthead">
  9.             <div class="container px-4 px-lg-5 d-flex h-100 align-items-center justify-content-center">
  10.                 <div class="d-flex justify-content-center">
  11.                     <div class="text-center">
  12.                         <h1 class="mx-auto my-0 text-uppercase">Vincent</h1>
  13.                         <h2 class="text-white-50 mx-auto mt-2 mb-5">Les bases.</h2>
  14.                         <a class="btn btn-primary" href="#about">Commencer</a>
  15.                     </div>
  16.                 </div>
  17.             </div>
  18.         </header>
  19.         <!-- About-->
  20.         <section class="about-section text-center" id="about">
  21.             <div class="container px-4 px-lg-5">
  22.                 <div class="row gx-4 gx-lg-5 justify-content-center">
  23.                     <div class="col-lg-8">
  24.                         <h2 class="text-white mb-4">Ici les elements de page d'accueil</h2>
  25.                         <p class="text-white-50">
  26.                             On pourra y lister les seminaires (ou revoir la nomenclature)<br />
  27.                             Pour le moment, un semin aire c'est un global contenant au moins un lieu<br />
  28.                             Chaque lieu contient une conference<br />
  29.                             Chaque conference contient une liste d'intervenant<br />
  30.                             Un intervenant pose un programme (ses documents, son lien zoom le cas échéant)
  31.                         </p>
  32.                     </div>
  33.                 </div>
  34.                 <img class="img-fluid" src="{{ asset('img/ipad.png') }}" alt="..." />
  35.             </div>
  36.         </section>
  37.         <section class="about-section text-center" id="about">
  38.             <div class="container px-4 px-lg-5">
  39.                 <div class="row gx-4 gx-lg-5 justify-content-center">
  40.                     <div class="col-lg-8">
  41.                         <h2 class="text-white mb-4">Les seminaires</h2>
  42.                         <div class="text-white-50"><hr /></div>
  43.                         {% for seminaire in lesseminaires %}
  44.                         <div class="text-white-50">
  45.                         <img src="/uploads/illustrations/{{ seminaire.illustration }}" width="150px"/>
  46.                             <h2>{{ seminaire.name }}</h2> se deroulera le <i>{{ seminaire.dateStart|date('d-m-Y') }}</i><br />
  47.                             {{ seminaire.description | raw }}<br />
  48.                                 <ul>
  49.                                     {% for confer in seminaire.getSeminaires %}
  50.                                             <li>{{ confer.name }} ou : {{ confer.getLieu().name }}</li>
  51.                                     {% endfor %}
  52.                                 </ul>
  53.                             <hr />
  54.                         </div>
  55.                         {% endfor %}
  56.                     </div>
  57.                 </div>
  58.             </div>
  59.         </section>
  60.         <section class="signup-section" id="signup">
  61.             <div class="container px-4 px-lg-5">
  62.                 <div class="row gx-4 gx-lg-5">
  63.                     <div class="col-md-10 col-lg-8 mx-auto text-center">
  64.                         <i class="far fa-paper-plane fa-2x mb-2 text-white"></i>
  65.                         <h2 class="text-white mb-5">Être averti des prochains séminaire</h2>
  66.                         <!-- * * * * * * * * * * * * * * *-->
  67.                         <!-- * * SB Forms Contact Form * *-->
  68.                         <!-- * * * * * * * * * * * * * * *-->
  69.                         <!-- This form is pre-integrated with SB Forms.-->
  70.                         <!-- To make this form functional, sign up at-->
  71.                         <!-- https://startbootstrap.com/solution/contact-forms-->
  72.                         <!-- to get an API token!-->
  73.                         <form class="form-signup" id="contactForm" data-sb-form-api-token="API_TOKEN">
  74.                             <!-- Email address input-->
  75.                             <div class="row input-group-newsletter">
  76.                                 <div class="col"><input class="form-control" id="emailAddress" type="email" placeholder="Enter email address..." aria-label="Enter email address..." data-sb-validations="required,email" /></div>
  77.                                 <div class="col-auto"><button class="btn btn-primary disabled" id="submitButton" type="submit">Notify Me!</button></div>
  78.                             </div>
  79.                             <div class="invalid-feedback mt-2" data-sb-feedback="emailAddress:required">An email is required.</div>
  80.                             <div class="invalid-feedback mt-2" data-sb-feedback="emailAddress:email">Email is not valid.</div>
  81.                             <!-- Submit success message-->
  82.                             <!---->
  83.                             <!-- This is what your users will see when the form-->
  84.                             <!-- has successfully submitted-->
  85.                             <div class="d-none" id="submitSuccessMessage">
  86.                                 <div class="text-center mb-3 mt-2 text-white">
  87.                                     <div class="fw-bolder">Form submission successful!</div>
  88.                                     To activate this form, sign up at
  89.                                     <br />
  90.                                     <a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
  91.                                 </div>
  92.                             </div>
  93.                             <!-- Submit error message-->
  94.                             <!---->
  95.                             <!-- This is what your users will see when there is-->
  96.                             <!-- an error submitting the form-->
  97.                             <div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3 mt-2">Error sending message!</div></div>
  98.                         </form>
  99.                     </div>
  100.                 </div>
  101.             </div>
  102.         </section>
  103.         <!-- Contact-->
  104.         <section class="contact-section bg-black">
  105.             <div class="container px-4 px-lg-5">
  106.                 <div class="row gx-4 gx-lg-5">
  107.                     <div class="col-md-4 mb-3 mb-md-0">
  108.                         <div class="card py-4 h-100">
  109.                             <div class="card-body text-center">
  110.                                 <i class="fas fa-map-marked-alt text-primary mb-2"></i>
  111.                                 <h4 class="text-uppercase m-0">Site</h4>
  112.                                 <hr class="my-4 mx-auto" />
  113.                                 <div class="small text-black-50"><a href="https://vincent.com">vincent.com</a></div>
  114.                             </div>
  115.                         </div>
  116.                     </div>
  117.                     <div class="col-md-4 mb-3 mb-md-0">
  118.                         <div class="card py-4 h-100">
  119.                             <div class="card-body text-center">
  120.                                 <i class="fas fa-envelope text-primary mb-2"></i>
  121.                                 <h4 class="text-uppercase m-0">Email</h4>
  122.                                 <hr class="my-4 mx-auto" />
  123.                                 <div class="small text-black-50"><a href="#!">contact@vincent.com</a></div>
  124.                             </div>
  125.                         </div>
  126.                     </div>
  127.                     <div class="col-md-4 mb-3 mb-md-0">
  128.                         <div class="card py-4 h-100">
  129.                             <div class="card-body text-center">
  130.                                 <i class="fas fa-mobile-alt text-primary mb-2"></i>
  131.                                 <h4 class="text-uppercase m-0">Phone</h4>
  132.                                 <hr class="my-4 mx-auto" />
  133.                                 <div class="small text-black-50">+336 00 00 00 00</div>
  134.                             </div>
  135.                         </div>
  136.                     </div>
  137.                 </div>
  138.                 <div class="social d-flex justify-content-center">
  139.                     <a class="mx-2" href="#!"><i class="fab fa-twitter"></i></a>
  140.                     <a class="mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
  141.                     <a class="mx-2" href="#!"><i class="fab fa-github"></i></a>
  142.                 </div>
  143.             </div>
  144.         </section>
  145. {% endblock %}