templates/home/home.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Eglise Evangelique du Cameroun PAROISSE DE SOA{% endblock %}
  5. {% block body %}
  6.     <!-- Carousel Start -->
  7.     <div class="container-fluid px-0 carousel_home">
  8.         <div id="carouselId" class="carousel slide" data-bs-ride="carousel">
  9.             <ol class="carousel-indicators">
  10.                 <li data-bs-target="#carouselId" data-bs-slide-to="0" class="active" aria-current="true" aria-label="First slide"></li>
  11.                 <li data-bs-target="#carouselId" data-bs-slide-to="1" aria-label="Second slide"></li>
  12.                 <li data-bs-target="#carouselId" data-bs-slide-to="2" aria-label="troisieme slide"></li>
  13.             </ol>
  14.             <div class="carousel-inner" role="listbox">
  15.                 <div class="carousel-item active">
  16.                     <img src="{{asset('assets/img/carousel-4.jpg')}}" class="img-fluid w-100" alt="First slide">
  17.                     <div class="carousel-caption">
  18.                         <div class="container carousel-content">
  19.                             <h1 class="text-white text-uppercase animated fadeInUp">Église Évangelique du Cameroun  <br> PAROISSE DE SOA</h1>
  20.                             <h5 class="text-secondary display-5 mb-4 animated fadeInRight">« Il n'est rien que l'amour ne puisse affronter : il n'existe pas de limite à sa foi, à son espérance, à son endurance »</h5>
  21.                             {# <p class=" text-dark mb-4 text-white fs-5 animated text-dark fadeInDown">Lorem ipsum dolor sit amet elit. Sed efficitur quis purus ut interdum. Pellentesque aliquam dolor eget urna ultricies tincidunt.</p> #}
  22.                             <a href="" class="me-2"><button type="button" class="px-4 py-sm-3 px-sm-5 btn btn-success-eec rounded-pill  animated fadeInLeft">Faire un don</button></a>
  23.                         </div>
  24.                     </div>
  25.                 </div>
  26.                 <div class="carousel-item">
  27.                     <img src="{{asset('assets/img/img-galerie-5.webp')}}" class="img-fluid w-100" alt="Second slide">
  28.                     <div class="carousel-caption">
  29.                         <div class="container carousel-content">
  30.                             {# <h6 class="text-secondary h4 animated fadeInUp"></h6> #}
  31.                             <h1 class="text-white display-3 mb-4 animated fadeInLeft">Enseignements bibliques & Etudes bibliques  </h1>
  32.                             {# <p class=" text-dark mb-4 text-white fs-5 animated text-dark fadeInDown">Lorem ipsum dolor sit amet elit. Sed efficitur quis purus ut interdum. Pellentesque aliquam dolor eget urna ultricies tincidunt.</p> #}
  33.                             <a href="" class="me-2"><button type="button" class="px-4 py-sm-3 px-sm-5 btn btn-success-eec rounded-pill  animated fadeInLeft">Faire un don</button></a>
  34.                         </div>
  35.                     </div>
  36.                 </div>
  37.                 <div class="carousel-item">
  38.                     <img src="{{asset('assets/img/carousel-4.jpg')}}" class="img-fluid w-100" alt="troisieme slide">
  39.                     <div class="carousel-caption">
  40.                         <div class="container carousel-content">
  41.                             {# <h6 class="text-secondary h4 animated fadeInUp"></h6> #}
  42.                             <h1 class="text-white mb-4 display-3 animated fadeInLeft">Conseils bibliques - Réponses aux questions bibliques</h1>
  43.                             {# <p class=" text-dark mb-4 text-white fs-5 animated text-dark fadeInDown">Lorem ipsum dolor sit amet elit. Sed efficitur quis purus ut interdum. Pellentesque aliquam dolor eget urna ultricies tincidunt.</p> #}
  44.                             <a href="" class="me-2"><button type="button" class="px-4 py-sm-3 px-sm-5 btn btn-success-eec rounded-pill  animated fadeInLeft">Faire un don</button></a>
  45.                         </div>
  46.                     </div>
  47.                 </div>
  48.             </div>
  49.             <button class="carousel-control-prev" type="button" data-bs-target="#carouselId" data-bs-slide="prev">
  50.                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  51.                 <span class="visually-hidden">Previous</span>
  52.             </button>
  53.             <button class="carousel-control-next" type="button" data-bs-target="#carouselId" data-bs-slide="next">
  54.                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  55.                 <span class="visually-hidden">Next</span>
  56.             </button>
  57.         </div>
  58.     </div>
  59.     <!-- Carousel End -->
  62.     <!-- Facts Start -->
  63.     <div class="container-fluid facts pt-lg-0">
  64.         <div class="container py-5 pt-lg-0">
  65.             <div class="row gx-0">
  66.                 <div class="col-lg-3 wow zoomIn p" data-wow-delay="0.1s">
  67.                     <div class="bg-success-eec shadow d-flex align-items-center justify-content-center p-1" style="height: 80px;">
  68.                         <div class="">
  69.                             <h2 class="text-white mb-0">18h30 - 20h</h2>
  70.                             <h3 class="text-white mb-0">Prière tous les Mardis</h3>
  71.                         </div>
  72.                     </div>
  73.                 </div>
  74.                 <div class="col-lg-3 wow zoomIn" data-wow-delay="0.3s">
  75.                     <div class="bg-light shadow d-flex align-items-center justify-content-center p-1" style="height: 80px;">
  76.                         
  77.                         <div class="">
  78.                             <h2 class="text-success-eec mb-0">9h - 11h30</h2>
  79.                             <h4 class="mb-0">Culte ordinaire Chaque Dimanche</h4>
  80.                         </div>
  81.                     </div>
  82.                 </div>
  83.                 <div class="col-lg-3 wow zoomIn" data-wow-delay="0.6s">
  84.                     <div class="bg-success-eec shadow d-flex align-items-center justify-content-center p-1" style="height: 80px;">
  85.                         <div class="">
  86.                             <h2 class="text-white mb-0">9h - 11h</h2>
  87.                             <h4 class="text-white mb-0" data-toggle="counter-up">Culte d'enfant chaque Dimanche</h4>
  88.                         </div>
  89.                     </div>
  90.                 </div>
  91.                 <div class="col-lg-3 wow zoomIn" data-wow-delay="0.6s">
  92.                     <div class="bg-white shadow d-flex align-items-center justify-content-center p-1" style="height: 80px;">
  93.                         <div class="">
  94.                             <h2 class="text-dark mb-0">9h - 12h00</h2>
  95.                             <h5 class="text-dark mb-0" data-toggle="counter-up">Culte de sainte Cène chaque deuxième dimanche du mois</h5>
  96.                         </div>
  97.                     </div>
  98.                 </div>
  99.             </div>
  100.         </div>
  101.     </div>
  102.     <!-- Facts Start -->
  104.     <!-- About Start -->
  105.     <div class="container-fluid  my-3">
  106.         <div class="container">
  107.             <div class="row g-5">
  108.                 <div class="col-lg-5 col-md-6 col-sm-12 wow fadeIn" data-wow-delay=".3s">
  109.                     <div class="h-100 position-relative">
  110.                         <img src="{{asset('assets/img/bible2.jpg')}}" class="img-fluid w-75 rounded wow zoomIn" data-wow-delay="0.1s" alt="" style="margin-bottom: 25%;">
  111.                         <div class="position-absolute w-75" style="top: 25%; left: 25%;">
  112.                             <img src="{{asset('assets/img/bible2.jpg')}}" class="img-fluid w-100 rounded wow zoomIn" data-wow-delay="0.3s" alt="">
  113.                         </div>
  114.                     </div>
  115.                 </div>
  116.                 <div class="col-lg-7 col-md-6 col-sm-12 wow fadeIn" data-wow-delay=".5s">
  117.                     <h2 class="mb-4">Prédication du dimanche 16/05/2024</h2>
  118.                     <p class=" text-dark text-justify">Lorem ipsum dol text-darkor sit amet, consectetur adipiscing elit. Sed efficitur quis purus ut interdum. Pellentesque aliquam dolor eget urna ultricies tincidunt. Nam volutpat libero sit amet leo cursus, ac viverra eros tristique. Morbi quis 
  119.                         quam mi. Cras vel gravida eros. Proin scelerisque quam nec elementum viverra. Suspendisse viverra hendrerit diam in tempus. Etiam gravida justo nec erat vestibulum, et malesuada augue laoreet.</p>
  120.                     <p class=" text-dark mb-4 text-justify">Pellentesq text-darkue aliquam dolor eget urna ultricies tincidunt. 
  121.                         Nam volutpat libero sit amet leo cursus, ac viverra eros tristique. 
  122.                         Morbi quis quam mi. Cras vel gravida eros. Proin scelerisque quam 
  123.                         nec elementum viverra. Suspendisse viverra hendrerit diam in tempus... <a href="">Lire plus</a></p>
  124.                     <a href="" class="btn btn-success-eec btn-sm rounded-pill px-5 py-2 text-white"><i class=" bi bi-download"></i> Téléchager la brochure</a>
  125.                 </div>
  126.             </div>
  127.         </div>
  128.     </div>
  129.     <!-- About End -->
  130.     <!-- Project Start -->
  131.     
  132.     <div class="bg-2">
  133.         <div class="container-fluid pt-4">
  134.             <div class="">
  135.                 <div class="text-center mx-auto wow fadeIn" data-wow-delay=".3s">
  136.                     <h1 class=" mt-3 text-white">Chaque mardi de 18h30 à 20h</h1>
  137.                     <h3 class="mb-3 text-white">Une de ces rubrique est au programme</h3>
  138.                     <div class="container">
  139.                         <div class="row">
  140.                             <div class="col-lg-3 wow fadeIn" data-wow-delay=".1s">
  141.                                 <div class="d-flex counter">
  142.                                     <h1 class="me-3 text-success"><i class=" fa fa-hand-o-right"></i></h1>
  143.                                     <h3 class="text-white mt-1">Étude biblique</h3>
  144.                                 </div>
  145.                             </div>
  146.                             <div class="col-lg-3 wow fadeIn" data-wow-delay=".3s">
  147.                                 <div class="d-flex counter">
  148.                                     <h1 class="me-3 text-success"><i class=" fa fa-hand-o-right"></i></h1>
  149.                                     <h3 class="text-white mt-1">Enseignement</h3>
  150.                                 </div>
  151.                             </div>
  152.                             <div class="col-lg-3 wow fadeIn" data-wow-delay=".5s">
  153.                                 <div class="d-flex counter">
  154.                                     <h1 class="me-3 text-success"><i class=" fa fa-hand-o-right"></i></h1>
  155.                                     <h3 class="text-white mt-1">Soirée de lounage</h3>
  156.                                 </div>
  157.                             </div>
  158.                             <div class="col-lg-3 wow fadeIn" data-wow-delay=".7s">
  159.                                 <div class="d-flex counter">
  160.                                     <h1 class="me-3 text-success"><i class=" fa fa-hand-o-right"></i></h1>
  161.                                     <h3 class="text-white mt-1">Prière pour les malades</h3>
  162.                                 </div>
  163.                             </div>
  164.                         </div>
  165.                     </div>
  166.                 </div>
  167.             </div>
  168.         </div>
  169.     </div>
  170.     <!-- Project End -->
  172.      <!-- Team Start -->
  173.      <div class="container-fluid pb-5 team">
  174.         <div class="container">
  175.             <div class="row mb-2 wow zoomIn" data-wow-delay="0.1s">
  176.                 <div class="col-md-6 d-mobile-none"><img src="{{asset('assets/img/bible3.webp')}}" alt="" class="w-100"></div>
  177.                 <div class="col-md-6"><img src="{{asset('assets/img/bible3.webp')}}" alt="" class="w-100"></div>
  178.             </div>
  179.             <div class="row my-3">
  180.                 <div class="col-12">
  181.                     <h5 class=" text-justify text-dark">Chaque dimanche, à 9h, puis à 11h 
  182.                         (en périodes de vacances scolaires, consulter la page 
  183.                         d'accueil pour connaître l'heure exacte), nous nous réunissons 
  184.                         pour rendre un culte à Dieu et à notre Seigneur Jésus-Christ. 
  185.                         Nous le remercions pour ce qu'il fait dans nos vies, 
  186.                         le louons pour ce qu'il est et cherchons à mieux connaître 
  187.                         sa volonté en écoutant sa Parole (la Bible).  Autour de 11h30, 
  188.                         les jeunes de 3 à 15 ans sont invités à participer à un enseignement 
  189.                         adapté à leur âge. 
  190.                         Pendant le culte, vous trouverez les éléments suivants: </h5>
  191.                 </div>
  192.             </div>
  193.             <div class="text-center mx-auto pb-5 wow fadeIn" data-wow-delay=".3s" style="max-width: 600px;">
  194.                 <h1>Culte et catéchisme</h1>
  195.             </div>
  196.             <div class="owl-carousel team-carousel wow fadeIn" data-wow-delay=".5s">
  197.                 <div class="rounded team-item">
  198.                     <div class="team-content">
  199.                         <div class="team-img-icon">
  200.                             <div class="team-img rounded-circle">
  201.                                 <img src="{{asset('assets/img/musique.jpg')}}" class="img-fluid w-100 rounded-circle" alt="">
  202.                             </div>
  203.                             <div class="team-name text-center py-3">
  204.                                 <h2 class=" fw-bold text-success-eec">Chants</h2>
  205.                                 <p class=" text-dark m-0 text-justify text-dark">La première partie du culte 
  206.                                     (environ 40 minutes) est consacrée à des chants entonnés par 
  207.                                     toute l'assemblée et accompagnés par une équipe de musiciens motivés. 
  208.                                     Par ce moyen, nous faisons monter notre 
  209.                                     louange et reconnaissance à Dieu 
  210.                                     et à son fils Jésus-Christ. </p>
  211.                             </div>
  212.                         </div>
  213.                     </div>
  214.                 </div>
  215.                 <div class="rounded team-item">
  216.                     <div class="team-content">
  217.                         <div class="team-img-icon">
  218.                             <div class="team-img rounded-circle">
  219.                                 <img src="{{asset('assets/img/priere.jpg')}}" class="img-fluid w-100 rounded-circle" alt="">
  220.                             </div>
  221.                             <div class="team-name text-center py-3">
  222.                                 <h2 class=" fw-bold text-success-eec">Prières</h2>
  223.                                 <p class=" text-dark m-0 text-justify">Jésus lui-m text-darkême priait souvent ; 
  224.                                     les chrétiens prient aussi, à la fois 
  225.                                     individuellement et en communauté. Pendant les 
  226.                                     moments de chant, il peut y avoir des prières que 
  227.                                     les chrétiens prononcent à haute voix. Prier, 
  228.                                     c'est simplement parler au Dieu qui nous entend. 
  229.                                     Personne n’est obligé de prier, mais les prières 
  230.                                     des autres contribuent à nous encourager.</p>
  231.                             </div>
  232.                         </div>
  233.                     </div>
  234.                 </div>
  235.                 <div class="rounded team-item">
  236.                     <div class="team-content">
  237.                         <div class="team-img-icon">
  238.                             <div class="team-img rounded-circle">
  239.                                 <img src="{{asset('assets/img/predications.png')}}" class="img-fluid w-100 rounded-circle" alt="">
  240.                             </div>
  241.                             <div class="team-name text-center py-3">
  242.                                 <h2 class=" fw-bold text-success-eec">Prédication</h2>
  243.                                 <p class=" text-dark m-0 text-justify">L'enseignem text-darkent occupe une place centrale dans notre culte 
  244.                                     (30  à 45 minutes). 
  245.                                     Il s'attache à rester fidèle au texte biblique pour en 
  246.                                     tirer tout ce qui est utile  pour mener une vie qui plaise à Dieu. 
  247.                                     Nous prêchons Jésus-Christ, mort et ressuscité, dont la Bible rend 
  248.                                     continuellement témoignage. Nous croyons qu'Il est la "sève" dont le 
  249.                                     chrétien a besoin pour se nourrir et le seul moyen de salut pour quiconque 
  250.                                     croit en lui.
  251.                                     Pendant ce temps, les enfants peuvent assister à 
  252.                                     l'école du dimanche (voir ci-dessous)</p>
  253.                             </div>
  254.                         </div>
  255.                     </div>
  256.                 </div>
  257.                 <div class="rounded team-item">
  258.                     <div class="team-content">
  259.                         <div class="team-img-icon">
  260.                             <div class="team-img rounded-circle">
  261.                                 <img src="{{asset('assets/img/sainte-cène.jpg')}}" class="img-fluid w-100 rounded-circle" alt="">
  262.                             </div>
  263.                             <div class="team-name text-center py-3">
  264.                                 <h2 class=" text-success-eec fw-bold">Sainte-Cène</h2>
  265.                                 <p class=" text-dark m-0 text-justify"> La Sainte- text-darkCène est le symbole du corps et du sang 
  266.                                     de Jésus-Christ. Lui-même a demandé à ses 
  267.                                     disciples de manger le pain et de boire le vin en souvenir de Sa 
  268.                                     mort et cela jusqu'à Son retour. Chaque dimanche, nous accomplissons 
  269.                                     donc ce mémorial dans un esprit de dignité et de joie. Parce que 
  270.                                     la Sainte-Cène n'a de sens que pour celui ou celle qui est disciple 
  271.                                     de Jésus-Christ, nous invitons les personnes qui ne sont pas encore chrétiennes à s'abstenir de prendre ces éléments.
  273.                                     Pour des mesures de sécurité sanitaire, le pain est
  274.                                      donné directement et le vin est servi dans des 
  275.                                      gobelets individuels</p>
  276.                             </div>
  277.                         </div>
  278.                     </div>
  279.                 </div>
  280.                 <div class="rounded team-item">
  281.                     <div class="team-content">
  282.                         <div class="team-img-icon">
  283.                             <div class="team-img rounded-circle">
  284.                                 <img src="{{asset('assets/img/offrande.jpg')}}" class="img-fluid w-100 rounded-circle" alt="">
  285.                             </div>
  286.                             <div class="team-name text-center py-3">
  287.                                 <h2 class=" fw-bold text-success-eec">Offrande</h2>
  288.                                 <p class=" text-dark m-0 text-justify">A la fin du text-dark culte, nous faisons circuler un 
  289.                                     panier où chacun est libre de donner ou non selon ce qu'il 
  290.                                     aura décidé en son for intérieur. Les fonds récoltés servent 
  291.                                     à couvrir les différentes charges inhérentes à l'église 
  292.                                     (entretien des locaux, salaire du pasteur, etc.) et sont 
  293.                                     aussi une manière de témoigner à Dieu notre reconnaissance pour 
  294.                                     les bienfaits matériels qu'il nous accorde. </p>
  295.                             </div>
  296.                         </div>
  297.                     </div>
  298.                 </div>
  299.             </div>
  300.         </div>
  301.     </div>
  303.     <!-- Project Start -->
  304.     
  305.     <div class="bg-1">
  306.         <div class="container-fluid project pt-4">
  307.             <div class="container">
  308.                 <div class="text-center mx-auto pb-5 wow fadeIn" data-wow-delay=".3s">
  309.                     <h1 class=" mt-3 text-white">NOTRE COMMUNAUTÉ</h1>
  310.                     <h4 class="text-white">Au service des autres</h4>
  311.                     <h5 class=" text-center text-white">EEC ... est une communauté de foi enracinée dans 
  312.                         l'amour de Dieu. Nous croyons que le culte ne se trouve
  313.                          pas seulement dans la prière, c'est quelque chose qui 
  314.                          s'exprime dans tout ce que nous faisons. Notre philosophie 
  315.                          est profondément ancrée dans les Saintes Écritures, le seul 
  316.                          et unique guide de la vie. Venez nous rejoindre pour expérimenter 
  317.                          la grâce de Dieu pour vous-même. 
  318.                         Il y a une place spéciale pour chacun dans notre église de ....</h5>
  319.                 </div>
  320.             </div>
  321.         </div>
  322.     </div>
  323.     <!-- Project End -->
  326.      <!-- About Start -->
  327.      <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
  328.         <div class="container py-5">
  329.             <div class="row g-5">
  330.                 <div class="col-lg-7">
  331.                     <div class="section-title position-relative pb-2">
  332.                         <h1 class="mb-0">Pour les enfants et les jeunes</h1>
  333.                         <h4 class=" text-success-eec text-uppercase"> école du dimanche et catéchisme</h4>
  334.                     </div>
  335.                     <h5 class="mb-4 text-dark text-justify">Les enfants sont les bienvenus pendant nos cultes! 
  336.                         A partir de 3 ans, un enseignement adapté leur est proposé 
  337.                         avec lecture d'une histoire biblique et activité manuelle en 
  338.                         lien avec l'histoire. Bonne humeur assurée! Pour les plus grands, 
  339.                         l'accent sera mis d'avantage sur une discussion ouverte autour d'un texte de la Bible. 
  340.                         En fonction des âges, trois groupes sont possibles, correspondant 
  341.                         aux niveaux de l'école maternelle, primaire et collège. 
  342.                         </h5>
  343.                     {# <div class="row g-0 mb-3">
  344.                         <div class="col-sm-6 wow zoomIn" data-wow-delay="0.2s">
  345.                             <h5 class="mb-3"><i class="fa fa-check text-success-eec me-3"></i>Award Winning</h5>
  346.                             <h5 class="mb-3"><i class="fa fa-check text-success-eec me-3"></i>Professional Staff</h5>
  347.                         </div>
  348.                         <div class="col-sm-6 wow zoomIn" data-wow-delay="0.4s">
  349.                             <h5 class="mb-3"><i class="fa fa-check text-success-eec me-3"></i>24/7 Support</h5>
  350.                             <h5 class="mb-3"><i class="fa fa-check text-success-eec me-3"></i>Fair Prices</h5>
  351.                         </div>
  352.                     </div> #}
  353.                     <div class="d-flex align-items-center mb-4 wow fadeIn" data-wow-delay="0.6s">
  354.                         <div class="bg-warning-eec d-flex align-items-center justify-content-center rounded" style="width: 60px; height: 60px;">
  355.                             <i class="fa fa-phone-alt text-success-eec"></i>
  356.                         </div>
  357.                         <div class="">
  358.                             <h5 class="mb-2">Appelez-nous plus d'information</h5>
  359.                             <h4 class="text-success-eec mb-0">+33 662 04 39 31</h4>
  360.                         </div>
  361.                     </div>
  362.                     <a href="quote.html" class="btn btn-success-eec btn-sm rounded-pill py-2 px-3 mt-3 wow zoomIn" data-wow-delay="0.9s">Poser une question ?</a>
  363.                 </div>
  364.                 <div class="col-lg-5" style="min-height: 500px;">
  365.                     <div class="position-relative h-100">
  366.                         <img class="position-absolute w-100 h-100 rounded wow zoomIn" data-wow-delay="0.9s" src="{{asset('assets/img/bible3.webp')}}" style="object-fit: cover;">
  367.                     </div>
  368.                 </div>
  369.             </div>
  370.         </div>
  371.     </div>
  372.     <!-- About End -->
  374.     <!-- Contact Start -->
  375.     <div class="container-fluid contact_home" id="contact">
  376.         <div class="container">
  377.             <div class="text-center mx-auto pb-5 wow fadeIn" data-wow-delay=".3s" style="max-width: 600px;">
  378.                 <h1 class="mb-3">Laissez-nous votre méssage</h1>
  379.             </div>
  380.             <div class="contact-detail position-relative">
  381.                 <div class="row g-5 mb-5 justify-content-center">
  382.                     <div class="col-xl-4 col-lg-6 wow fadeIn" data-wow-delay=".3s">
  383.                         <div class="d-flex bg-light p-3 rounded">
  384.                             <div class="flex-shrink-0 btn-square bg-success-eec rounded-circle" style="width: 64px; height: 64px;">
  385.                                 <i class="fas fa-map-marker-alt text-white"></i>
  386.                             </div>
  387.                             <div class="ms-3">
  388.                                 <h4 class="text-success-eec">Address</h4>
  389.                                 <a href="" target="_blank" class="h5">Yaoundé(...) Entrée ...</a>
  390.                             </div>
  391.                         </div>
  392.                     </div>
  393.                     <div class="col-xl-4 col-lg-6 wow fadeIn" data-wow-delay=".5s">
  394.                         <div class="d-flex bg-light p-3 rounded">
  395.                             <div class="flex-shrink-0 btn-square bg-success-eec rounded-circle" style="width: 64px; height: 64px;">
  396.                                 <i class="fa fa-phone text-white"></i>
  397.                             </div>
  398.                             <div class="ms-3">
  399.                                 <h4 class="text-success-eec">Téléphone</h4>
  400.                                 <a class="h5" href="tel:+0123456789" target="_blank">+33 662 04 39 31</a>
  401.                             </div>
  402.                         </div>
  403.                     </div>
  404.                     <div class="col-xl-4 col-lg-6 wow fadeIn" data-wow-delay=".7s">
  405.                         <div class="d-flex bg-light p-3 rounded">
  406.                             <div class="flex-shrink-0 btn-square bg-success-eec rounded-circle" style="width: 64px; height: 64px;">
  407.                                 <i class="fa fa-envelope text-white"></i>
  408.                             </div>
  409.                             <div class="ms-3">
  410.                                 <h4 class="text-success-eec">Email</h4>
  411.                                 <a class="h5" href="mailto:info@example.com" target="_blank">contact.eec...@gmail.com</a>
  412.                             </div>
  413.                         </div>
  414.                     </div>
  415.                 </div>
  416.                 <div class="row g-5">
  417.                     <div class="col-lg-6 wow fadeIn" data-wow-delay=".3s">
  418.                         <div class="p-5 h-100 rounded contact-img">
  419.                         </div>
  420.                     </div>
  421.                     <div class="col-lg-6 wow fadeIn" data-wow-delay=".5s">
  422.                         <form action="" method="post">
  423.                             <div class="p-5 rounded contact-form">
  424.                                 <div class="mb-4">
  425.                                     <input type="text" name="nom" required class="form-control border-0 py-3" placeholder="Votre nom">
  426.                                 </div>
  427.                                 <div class="mb-4">
  428.                                     <input type="email" name="email" class="form-control border-0 py-3" placeholder="Votre email">
  429.                                 </div>
  430.                                 <div class="mb-4">
  431.                                     <input type="text" name="telephone" required class="form-control border-0 py-3" placeholder="N° de éléphone">
  432.                                 </div>
  433.                                 <div class="mb-4">
  434.                                     <input type="text" name="sujet" class="form-control border-0 py-3" placeholder="Sujet">
  435.                                 </div>
  436.                                 <div class="mb-4">
  437.                                     <textarea name="message" required class="w-100 form-control border-0 py-3" rows="6" cols="10" placeholder="Message"></textarea>
  438.                                 </div>
  439.                                 <div class="text-start">
  440.                                     <button class="btn bg-warning-eec text-success-eec py-3 px-5" type="submit">Envoyer le message</button>
  441.                                 </div>
  442.                             </div>
  443.                         </form>
  444.                     </div>
  445.                 </div>
  446.             </div>
  447.         </div> 
  448.     </div>
  449.     <!-- Contact End -->
  452.     <div class="container my-5">
  453.         <div class="row mb-5">
  454.            <div class="col-lg-12 text-center my-2">
  455.                <h1>Galerie photo</h1>
  456.            </div>
  457.         </div>
  458.         <div class="row">
  459.             <div class="col-md-12 text-center">
  460.                 <p class=" text-danger fw-bold">Oops! Aucune image disponible pour le moment</p>
  461.             </div>
  462.         </div>
  463.         {# <div class="portfolio-menu mt-2 mb-4">
  464.            <ul>
  465.               <li class="btn btn-outline-dark active" data-filter="*">All</li>
  466.               <li class="btn btn-outline-dark" data-filter=".gts">Girls T-shirt</li>
  467.               <li class="btn btn-outline-dark" data-filter=".lap">Laptops</li>
  468.               <li class="btn btn-outline-dark text" data-filter=".selfie">selfie</li>
  469.            </ul>
  470.         </div> #}
  471.         {# <div class="portfolio-item row">
  472.            <div class="item selfie col-lg-3 col-md-4 col-6 col-sm mb-2">
  473.               <a href="{{asset('assets/img/img-galerie-1.webp')}}" class="fancylight popup-btn" data-fancybox-group="light"> 
  474.               <img class="img-fluid" src="{{asset('assets/img/img-galerie-1.webp')}}" alt="">
  475.               </a>
  476.            </div>
  477.            <div class="item gts col-lg-3 col-md-4 col-6 col-sm mb-2">
  478.               <a href="{{asset('assets/img/img-galerie-3.webp')}}" class="fancylight popup-btn" data-fancybox-group="light"> 
  479.               <img class="img-fluid" src="{{asset('assets/img/img-galerie-3.webp')}}" alt="">
  480.               </a>
  481.            </div>
  482.            <div class="item selfie col-lg-3 col-md-4 col-6 col-sm mb-2">
  483.               <a href="{{asset('assets/img/img-galerie-5.webp')}}" class="fancylight popup-btn" data-fancybox-group="light">
  484.               <img class="img-fluid" src="{{asset('assets/img/img-galerie-5.webp')}}" alt="">
  485.               </a>
  486.            </div>
  487.            <div class="item selfie col-lg-3 col-md-4 col-6 col-sm mb-2">
  488.               <a href="{{asset('assets/img/img-galerie-4.webp')}}" class="fancylight popup-btn" data-fancybox-group="light">
  489.               <img class="img-fluid" src="{{asset('assets/img/img-galerie-4.webp')}}" alt="">
  490.               </a>
  491.            </div>
  492.            <div class="item selfie col-lg-3 col-6 col-sm">
  493.               <a href="{{asset('assets/img/img-galerie-6.webp')}}" class="fancylight popup-btn" data-fancybox-group="light">
  494.               <img class="img-fluid" src="{{asset('assets/img/img-galerie-6.webp')}}" alt="">
  495.               </a>
  496.            </div>
  497.            <div class="item selfie col-lg-3 col-md-4 col-6 col-sm mb-2">
  498.               <a href="{{asset('assets/img/img-galerie-7.webp')}}" class="fancylight popup-btn" data-fancybox-group="light">
  499.               <img class="img-fluid" src="{{asset('assets/img/img-galerie-1.webp')}}" alt="">
  500.               </a>
  501.            </div>
  502.            <div class="item selfie col-lg-3 col-md-4 col-6 col-sm mb-2">
  503.               <a href="{{asset('assets/img/img-galerie-1.webp')}}" class="fancylight popup-btn" data-fancybox-group="light">
  504.               <img class="img-fluid" src="{{asset('assets/img/img-galerie-7.webp')}}" alt="">
  505.               </a>
  506.            </div>
  507.            <div class="item selfie col-lg-3 col-md-4 col-6 col-sm mb-2">
  508.             <a href="{{asset('assets/img/img-galerie-8.webp')}}" class="fancylight popup-btn" data-fancybox-group="light">
  509.             <img class="img-fluid" src="{{asset('assets/img/img-galerie-8.webp')}}" alt="">
  510.             </a>
  511.          </div>
  512.         </div> #}
  513.      </div>
  515.     <!-- Team End -->
  516.     {# <!-- Services Start -->
  517.     <div class="container-fluid services py-3mb-5">
  518.         <div class="container">
  519.             <div class="text-center mx-auto pb-5 wow fadeIn" data-wow-delay=".3s" style="max-width: 600px;">
  520.                 <h1>Culte et catéchisme</h1>
  521.             </div>
  522.             <div class="row mb-2">
  523.                 <div class="col-md-6"><img src="{{asset('assets/img/bible3.webp')}}" alt="" class="w-100"></div>
  524.                 <div class="col-md-6"><img src="{{asset('assets/img/bible3.webp')}}" alt="" class="w-100"></div>
  525.             </div>
  526.             <div class="row g-5 services-inner">
  527.                 <div class="col-md-6 col-lg-4 wow fadeIn" data-wow-delay=".3s">
  528.                     <div class="services-item bg-light">
  529.                         <div class="p-4 text-center services-content">
  530.                             <div class="services-content-icon">
  531.                                 <h3 class="mb-3 text-success-eec">Chants</h3>
  532.                                 <p class=" text-dark mb-4">La première partie du c text-darkulte 
  533.                                     (environ 40 minutes) est consacrée à des chants entonnés par 
  534.                                     toute l'assemblée et accompagnés par une équipe de musiciens motivés. 
  535.                                     Par ce moyen, nous faisons monter notre 
  536.                                     louange et reconnaissance à Dieu 
  537.                                     et à son fils Jésus-Christ. </p>
  538.                                 <img src="{{asset('assets/img/musique.jpg')}}" alt="" class="w-100">
  539.                             </div>
  540.                         </div>
  541.                     </div>
  542.                 </div>
  543.                 <div class="col-md-6 col-lg-4 wow fadeIn" data-wow-delay=".5s">
  544.                     <div class="services-item bg-light">
  545.                         <div class="p-4 text-center services-content">
  546.                             <div class="services-content-icon">
  547.                                 <h4 class="mb-3">Prières</h4>
  548.                                 <p class=" text-dark mb-4">Jésus lui-même priait s text-darkouvent ; 
  549.                                     les chrétiens prient aussi, à la fois 
  550.                                     individuellement et en communauté. Pendant les 
  551.                                     moments de chant, il peut y avoir des prières que 
  552.                                     les chrétiens prononcent à haute voix. Prier, 
  553.                                     c'est simplement parler au Dieu qui nous entend. 
  554.                                     Personne n’est obligé de prier, mais les prières 
  555.                                     des autres contribuent à nous encourager. </p>
  556.                                 <img src="{{asset('assets/img/priere.jpg')}}" alt="" class="w-100">
  557.                             </div>
  558.                         </div>
  559.                     </div>
  560.                 </div>
  561.                 <div class="col-md-6 col-lg-4 wow fadeIn" data-wow-delay=".7s">
  562.                     <div class="services-item bg-light">
  563.                         <div class="p-4 text-center services-content">
  564.                             <div class="services-content-icon">
  565.                                 <h4 class="mb-3 text-success">Prédication</h4>
  566.                                 <p class=" text-dark mb-4">'enseignement occupe un text-darke place centrale dans notre culte 
  567.                                     (30  à 45 minutes). 
  568.                                     Il s'attache à rester fidèle au texte biblique pour en 
  569.                                     tirer tout ce qui est utile  pour mener une vie qui plaise à Dieu. 
  570.                                     Nous prêchons Jésus-Christ, mort et ressuscité, dont la Bible rend 
  571.                                     continuellement témoignage. Nous croyons qu'Il est la "sève" dont le 
  572.                                     chrétien a besoin pour se nourrir et le seul moyen de salut pour quiconque 
  573.                                     croit en lui.
  574.                                     Pendant ce temps, les enfants peuvent assister à 
  575.                                     l'école du dimanche (voir ci-dessous) </p>
  576.                                     <img src="{{asset('assets/img/predications.png')}}" alt="" class="w-100">
  577.                             </div>
  578.                         </div>
  579.                     </div>
  580.                 </div>
  581.                 <div class="col-md-6 col-lg-4 wow fadeIn" data-wow-delay=".3s">
  582.                     <div class="services-item bg-light">
  583.                         <div class="p-4 text-center services-content">
  584.                             <div class="services-content-icon">
  585.                                 <h4 class="mb-3">Sainte-Cène</h4>
  586.                                 <p class=" text-dark mb-4"> La Sainte-Cène est le  text-darksymbole du corps et du sang 
  587.                                     de Jésus-Christ. Lui-même a demandé à ses 
  588.                                     disciples de manger le pain et de boire le vin en souvenir de Sa 
  589.                                     mort et cela jusqu'à Son retour. Chaque dimanche, nous accomplissons 
  590.                                     donc ce mémorial dans un esprit de dignité et de joie. Parce que 
  591.                                     la Sainte-Cène n'a de sens que pour celui ou celle qui est disciple 
  592.                                     de Jésus-Christ, nous invitons les personnes qui ne sont pas encore chrétiennes à s'abstenir de prendre ces éléments.
  594.                                     Pour des mesures de sécurité sanitaire, le pain est
  595.                                      donné directement et le vin est servi dans des 
  596.                                      gobelets individuels</p>
  597.                                 <a href="" class="btn btn-secondary text-white px-5 py-3 rounded-pill">Read More</a>
  598.                             </div>
  599.                             
  600.                         </div>
  601.                     </div>
  602.                 </div>
  603.                 <div class="col-md-6 col-lg-4 wow fadeIn" data-wow-delay=".5s">
  604.                     <div class="services-item bg-light">
  605.                         <div class="p-4 text-center services-content">
  606.                             <div class="services-content-icon">
  607.                                 <i class="fa fa-envelope-open fa-7x mb-4 text-success-eec"></i>
  608.                                 <h4 class="mb-3">Digital Marketing</h4>
  609.                                 <p class=" text-dark mb-4">Lorem ipsum dolor sit a text-darkmet elit. Sed efficitur quis purus ut interdum. Aliquam dolor eget urna ultricies tincidunt.</p>
  610.                                 <a href="" class="btn btn-secondary text-white px-5 py-3 rounded-pill">Read More</a>
  611.                             </div>
  612.                         </div>
  613.                     </div>
  614.                 </div>
  615.                 <div class="col-md-6 col-lg-4 wow fadeIn" data-wow-delay=".7s">
  616.                     <div class="services-item bg-light">
  617.                         <div class="p-4 text-center services-content">
  618.                             <div class="services-content-icon">
  619.                                 <i class="fas fa-laptop fa-7x mb-4 text-success-eec"></i>
  620.                                 <h4 class="mb-3">Programming</h4>
  621.                                 <p class=" text-dark mb-4">Lorem ipsum dolor sit a text-darkmet elit. Sed efficitur quis purus ut interdum. Aliquam dolor eget urna ultricies tincidunt.</p>
  622.                                 <a href="" class="btn btn-secondary text-white px-5 py-3 rounded-pill">Read More</a>
  623.                             </div>
  624.                         </div>
  625.                     </div>
  626.                 </div>
  627.             </div>
  628.         </div>
  629.     </div>
  630.     <!-- Services End --> #}
  632. {% endblock %}