templates/main/index.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  6.         <meta http-equiv="x-ua-compatible" content="ie=edge" />
  7.         <title>Mandèh</title>
  8.         {% block stylesheets %}
  9.             <!-- MDB icon -->
  10.             <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
  11.             <!-- Font Awesome -->
  12.             <link rel="stylesheet"
  13.               href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/>
  14.             <!-- Google Fonts Roboto -->
  15.             <link rel="stylesheet"
  16.               href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"/>
  17.             <!-- MDB -->
  18.             <link rel="stylesheet" href="css/styles.css" />
  19.             <link rel="stylesheet" href="css/mdb.min.css" />
  20.         {% endblock %}
  21.     
  22.         {% block javascripts %}
  23.             <script type="text/javascript" src="js/mdb.min.js"></script>
  24.             <!-- Custom scripts -->
  25.             <script type="text/javascript"></script>
  26.         {% endblock %}
  27.     </head>
  28.     <body style="background-color:#000;">
  29.         {% block body %}
  30.             <header>
  31.                 <nav class="navbar navbar-expand-lg navbar-dark bg-black" style="font-style:italic; font-size:18px;font-weight:700;">
  32.                     <div class="container">
  33.                         <a class="navbar-brand" href="#">Mandèh</a>
  34.                         <a class="nav-link" aria-current="page" href="#">Accueil</a>
  35.                         <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarNavAltMarkup"  aria-controls="navbarNavAltMarkup"
  36.                                 aria-expanded="false" aria-label="Toggle navigation">
  37.                             <i class="fas fa-bars"></i>
  38.                         </button>
  39.                         <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  40.                           <div class="navbar-nav" style="margin-left:auto;" >
  41.                             <a class="nav-link" href="#About">A propos</a>
  42.                             <a class="nav-link" href="#book1">Généralités</a>
  43.                           </div>
  44.                         </div>
  45.                     </div>
  46.                 </nav>
  47.                 <!-- Background image -->
  48.                 <div class="p-2 text-center bg-image" id="intro" >
  49.                     <div class="mask" style="background-color: rgba(0, 10, 10, 0.2);">
  50.                         <div class="d-flex justify-content-center align-items-center h-100">
  51.                             <div class="text-white">
  52.                                 <h1 class="mb-3" style="padding:1px;font-weight:900;font-style:italic;">LE SITE DES AMIS DE GUIGLO</h1>
  53.                                  <marquee scrollamount="20" scrolldelay="200" style="padding:1px;font-size:20px;font-weight:900;font-style:italic;color:khaki;">
  54.                                      BANGOLO - BLOLEQUIN - DUEKOUE - GUIGLO - TAI - TOULEPLEU</marquee>
  55.                                 <a class="btn btn-outline-light btn-lg m-2" href="#!" role="button" style="text-style:italic;">Visiteurs non membres</a>
  56.                                 <a class="btn btn-outline-light btn-lg m-2" href="{{ path('app_accueil_membre') }}" role="button">Membres de Mandèh</a>
  57.                             </div>
  58.                         </div>
  59.                     </div>
  60.                 </div>
  61.                 <!-- Background image --> 
  62.             </header>
  63.             <main>
  64.                 <div class="containerd-fluid px-0">
  65.                     <section class="divider pt-2">
  66.                         <div class="row justify-content-center align-items-center">
  67.                             <div class="col-md-4 ">
  68.                                 <h2 style="text-align:right;padding-right:5px;">INTRODUCTION</h2>
  69.                             </div>
  70.                             <div class="col-md-4">
  71.                                 <p style="text-align:justify;">MANDEH est une association des amis de Guiglo. 
  72.                                    Elle regroupe tous les hommes qui ont vécu à Guiglo ou qui y ont des amis ou des intérêts. Mandèh, 
  73.                                    l'association des amis de Guiglo est une association appolitique. 
  74.                                    Elle a été officiellement créée le 11 mai 2021 à Guiglo. Les membres de Mandèh sont de Guiglo, 
  75.                                    Taî, Bloléquin, Toulépleu, Duékoué, Bangolo.</br></br>
  76.                                    
  77.                                    Le site comprend deux parties essentielles : La partie des visiteurs et celle des membres. Pour la partie des membres, 
  78.                                    il s'agira de présenter toutes les activités de l'association. Pour y accéder, il faut un code et un nom de connexion.</p>
  79.                             </div>
  80.                         </div>
  81.                     </section>
  82.                     <section id="About" class="text-center text-white">
  83.                         <h2 class="my-5">NOTRE HISTOIRE</h2>
  84.                         <div class="row justify-content-center align-items-center"> 
  85.                             <div class="col-md-4">
  86.                                 <h1>Les débuts</h1>
  87.                                 <p style="text-align:justify;">MANDEH</p>
  88.                             </div>    
  89.                             <div class="col-md-4">
  90.                                 <img src="images/hotelDuekoue2.png" alt="Bonjour" class="img-fluid">
  91.                             </div>    
  92.                         </div>
  93.                         <div class="row justify-content-center align-items-center">
  94.                             <div class="col-md-4">
  95.                                 <h1>La création</h1>
  96.                                 <p style="text-align:justify;">MANDEH </p>
  97.                             </div>    
  98.                             <div class="col-md-4">
  99.                                 <img src="images/hotelDuekoue3.png" alt="Bonjour" class="img-fluid">
  100.                             </div>    
  101.                         </div>
  102.                         <div class="row justify-content-center align-items-center">
  103.                             <div class="col-md-4">
  104.                                 <h1>Nos objectifs</h1>
  105.                                 <p style="text-align:justify;">MANDEH</p>
  106.                             </div>    
  107.                             <div class="col-md-4">
  108.                                 <img src="images/Prison_Guiglo.jpg" alt="Bonjour" class="img-fluid">
  109.                             </div>    
  110.                         </div>
  111.                         
  112.                     </section>
  113.                     <section  id="book1">
  114.                         <div class="p-2 text-center bg-image" id="book" >
  115.                             <div class="mask" style="background-color: rgba(0, 10, 10, 0.2);">
  116.                                 <div class="d-flex justify-content-center align-items-center h-100">
  117.                                     <!--
  118.                                     <div class="text-white">
  119.                                         <a class="btn btn-outline-light btn-lg m-2" href="#!" role="button">A compléter</a>
  120.                                     </div>
  121.                                     -->
  122.                                 </div>
  123.                             </div>
  124.                         </div>
  125.                     </section>
  126.                     <section id="membres" class="text-center">
  127.                         <h1 class="my-5 text-white ">Les dirigeants de MANDEH</h1>
  128.                         <div class="row">
  129.                             <div class="col-md-4">
  130.                                 <div class="card mb-3" style="max-width: 540px;">
  131.                                   <div class="row g-0">
  132.                                     <div class="col-md-4">
  133.                                       <img src="images/Gnenessio01.jpg" alt="Trendy Pants and Shoes" class="img-fluid rounded-start"/>
  134.                                     </div>
  135.                                     <div class="col-md-8">
  136.                                       <div class="card-body">
  137.                                         <h5 class="card-title">GNENESSIO Robert</h5>
  138.                                         <p class="card-text"> Sécretaire général de l'association Mandèh.</p>
  139.                                       </div>
  140.                                     </div>
  141.                                   </div>
  142.                                 </div> 
  143.                             </div>
  144.                             <div class="col-md-4">
  145.                                 <div class="card mb-3" style="max-width: 540px;">
  146.                                   <div class="row g-0">
  147.                                     <div class="col-md-4">
  148.                                       <img src="https://mdbcdn.b-cdn.net/wp-content/uploads/2020/06/vertical.webp" alt="Trendy Pants and Shoes" class="img-fluid rounded-start"/>
  149.                                     </div>
  150.                                     <div class="col-md-8">
  151.                                       <div class="card-body">
  152.                                         <h5 class="card-title">GNON Jules</h5>
  153.                                         <p class="card-text">Président de l'association Mandèh</p>
  154.                                        </div>
  155.                                     </div>
  156.                                   </div>
  157.                                 </div> 
  158.                             </div>
  159.                             <div class="col-md-4">
  160.                                 <div class="card mb-3" style="max-width: 540px;">
  161.                                   <div class="row g-0">
  162.                                     <div class="col-md-4">
  163.                                       <img src="https://mdbcdn.b-cdn.net/wp-content/uploads/2020/06/vertical.webp" alt="Trendy Pants and Shoes" class="img-fluid rounded-start"/>
  164.                                     </div>
  165.                                     <div class="col-md-8">
  166.                                       <div class="card-body">
  167.                                         <h5 class="card-title">CISCO</h5>
  168.                                         <p class="card-text">Trésorier général de Mandèh</p>
  169.                                       </div>
  170.                                     </div>
  171.                                   </div>
  172.                                 </div> 
  173.                             </div>
  174.                         </div>
  175.                     </section>
  176.                 </div>
  177.             </main>
  178.             <footer class="bg-dark text-center text-white">
  179.                 <!-- Copyright -->
  180.                 <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
  181.                         © 2020 Copyright:
  182.                 <a class="text-white" href="https://mdbootstrap.com/">rgnenessio.com</a>
  183.                 </div>
  184.                 <!-- Copyright -->
  185.             </footer>
  186.         {% endblock %}
  187.     </body>
  188. </html>