templates/about/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}EEC PAROISSE DE SOA!{% endblock %}
  5. {% block titrePageSecondaire %}A propos de nous{% endblock %}
  6. {% block body %}
  7.  {# <!-- Page Header Start -->
  8.  <div class="container-fluid page-header py-5">
  9.     <div class="container text-center py-5">
  10.         <h1 class="display-2 text-white mb-4 animated slideInDown">About Us</h1>
  11.         <nav aria-label="breadcrumb animated slideInDown">
  12.             <ol class="breadcrumb justify-content-center mb-0">
  13.                 <li class="breadcrumb-item"><a href="#">Home</a></li>
  14.                 <li class="breadcrumb-item"><a href="#">Pages</a></li>
  15.                 <li class="breadcrumb-item" aria-current="page">About</li>
  16.             </ol>
  17.         </nav>
  18.     </div>
  19. </div>
  20. <!-- Page Header End --> #}
  23. {# <!-- Fact Start -->
  24. <div class="container-fluid py-5">
  25.     <div class="container">
  26.         <div class="row">
  27.             <div class="col-lg-3 wow fadeIn" data-wow-delay=".1s">
  28.                 <div class="d-flex counter">
  29.                     <h1 class="me-3 text-success"><i class=" fa fa-hand-o-right"></i></h1>
  30.                     <h3 class="text-dark mt-1">Étude biblique</h3>
  31.                 </div>
  32.             </div>
  33.             <div class="col-lg-3 wow fadeIn" data-wow-delay=".3s">
  34.                 <div class="d-flex counter">
  35.                     <h1 class="me-3 text-success"><i class=" fa fa-hand-o-right"></i></h1>
  36.                     <h3 class="text-dark mt-1">Enseignement</h3>
  37.                 </div>
  38.             </div>
  39.             <div class="col-lg-3 wow fadeIn" data-wow-delay=".5s">
  40.                 <div class="d-flex counter">
  41.                     <h1 class="me-3 text-success"><i class=" fa fa-hand-o-right"></i></h1>
  42.                     <h3 class="text-dark mt-1">Soirée de lounage</h3>
  43.                 </div>
  44.             </div>
  45.             <div class="col-lg-3 wow fadeIn" data-wow-delay=".7s">
  46.                 <div class="d-flex counter">
  47.                     <h1 class="me-3 text-success"><i class=" fa fa-hand-o-right"></i></h1>
  48.                     <h3 class="text-dark mt-1">Prière pour les malades</h3>
  49.                 </div>
  50.             </div>
  51.         </div>
  52.     </div>
  53. </div>
  54. <!-- Fact End --> #}
  57. {# <!-- About Start -->
  58. <div class="container-fluid py-5 my-5">
  59.     <div class="container py-5">
  60.         <div class="row g-5">
  61.             <div class="col-lg-5 col-md-6 col-sm-12 wow fadeIn" data-wow-delay=".3s">
  62.                 <div class="h-100 position-relative">
  63.                     <img src="img/about-1.jpg" class="img-fluid w-75 rounded" alt="" style="margin-bottom: 25%;">
  64.                     <div class="position-absolute w-75" style="top: 25%; left: 25%;">
  65.                         <img src="img/about-2.jpg" class="img-fluid w-100 rounded" alt="">
  66.                     </div>
  67.                 </div>
  68.             </div>
  69.             <div class="col-lg-7 col-md-6 col-sm-12 wow fadeIn" data-wow-delay=".5s">
  70.                 <h5 class="text-primary">About Us</h5>
  71.                 <h1 class="mb-4">About HighTech Agency And It's Innovative IT Solutions</h1>
  72.                 <p>Lorem ipsum dolor 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 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>
  73.                 <p class="mb-4">Pellentesque aliquam dolor eget urna ultricies tincidunt. Nam volutpat libero sit amet leo cursus, ac viverra eros tristique. Morbi quis quam mi. Cras vel gravida eros. Proin scelerisque quam nec elementum viverra. Suspendisse viverra hendrerit diam in tempus.</p>
  74.                 <a href="" class="btn btn-secondary rounded-pill px-5 py-3 text-white">More Details</a>
  75.             </div>
  76.         </div>
  77.     </div>
  78. </div>
  79. <!-- About End -->
  82. <!-- Team Start -->
  83. <div class="container-fluid pb-5 mb-5 team">
  84.     <div class="container pb-5">
  85.         <div class="text-center mx-auto pb-5 wow fadeIn" data-wow-delay=".3s" style="max-width: 600px;">
  86.             <h5 class="text-primary">Our Team</h5>
  87.             <h1>Meet our expert Team</h1>
  88.         </div>
  89.         <div class="owl-carousel team-carousel wow fadeIn" data-wow-delay=".5s">
  90.             <div class="rounded team-item">
  91.                 <div class="team-content">
  92.                     <div class="team-img-icon">
  93.                         <div class="team-img rounded-circle">
  94.                             <img src="img/team-1.jpg" class="img-fluid w-100 rounded-circle" alt="">
  95.                         </div>
  96.                         <div class="team-name text-center py-3">
  97.                             <h4 class="">Full Name</h4>
  98.                             <p class="m-0">Designation</p>
  99.                         </div>
  100.                         <div class="team-icon d-flex justify-content-center pb-4">
  101.                             <a class="btn btn-square btn-secondary text-white rounded-circle m-1" href=""><i class="fab fa-facebook-f"></i></a>
  102.                             <a class="btn btn-square btn-secondary text-white rounded-circle m-1" href=""><i class="fab fa-twitter"></i></a>
  103.                             <a class="btn btn-square btn-secondary text-white rounded-circle m-1" href=""><i class="fab fa-instagram"></i></a>
  104.                             <a class="btn btn-square btn-secondary text-white rounded-circle m-1" href=""><i class="fab fa-linkedin-in"></i></a>
  105.                         </div>
  106.                     </div>
  107.                 </div>
  108.             </div>
  109.             <div class="rounded team-item">
  110.                 <div class="team-content">
  111.                     <div class="team-img-icon">
  112.                         <div class="team-img rounded-circle">
  113.                             <img src="img/team-2.jpg" class="img-fluid w-100 rounded-circle" alt="">
  114.                         </div>
  115.                         <div class="team-name text-center py-3">
  116.                             <h4 class="">Full Name</h4>
  117.                             <p class="m-0">Designation</p>
  118.                         </div>
  119.                         <div class="team-icon d-flex justify-content-center pb-4">
  120.                             <a class="btn btn-square btn-secondary text-white rounded-circle m-1" href=""><i class="fab fa-facebook-f"></i></a>
  121.                             <a class="btn btn-square btn-secondary text-white rounded-circle m-1" href=""><i class="fab fa-twitter"></i></a>
  122.                             <a class="btn btn-square btn-secondary text-white rounded-circle m-1" href=""><i class="fab fa-instagram"></i></a>
  123.                             <a class="btn btn-square btn-secondary text-white rounded-circle m-1" href=""><i class="fab fa-linkedin-in"></i></a>
  124.                         </div>
  125.                     </div>
  126.                 </div>
  127.             </div>
  128.             <div class="rounded team-item">
  129.                 <div class="team-content">
  130.                     <div class="team-img-icon">
  131.                         <div class="team-img rounded-circle">
  132.                             <img src="img/team-3.jpg" class="img-fluid w-100 rounded-circle" alt="">
  133.                         </div>
  134.                         <div class="team-name text-center py-3">
  135.                             <h4 class="">Full Name</h4>
  136.                             <p class="m-0">Designation</p>
  137.                         </div>
  138.                         <div class="team-icon d-flex justify-content-center pb-4">
  139.                             <a class="btn btn-square btn-secondary text-white rounded-circle m-1" href=""><i class="fab fa-facebook-f"></i></a>
  140.                             <a class="btn btn-square btn-secondary text-white rounded-circle m-1" href=""><i class="fab fa-twitter"></i></a>
  141.                             <a class="btn btn-square btn-secondary text-white rounded-circle m-1" href=""><i class="fab fa-instagram"></i></a>
  142.                             <a class="btn btn-square btn-secondary text-white rounded-circle m-1" href=""><i class="fab fa-linkedin-in"></i></a>
  143.                         </div>
  144.                     </div>
  145.                 </div>
  146.             </div>
  147.             <div class="rounded team-item">
  148.                 <div class="team-content">
  149.                     <div class="team-img-icon">
  150.                         <div class="team-img rounded-circle">
  151.                             <img src="img/team-4.jpg" class="img-fluid w-100 rounded-circle" alt="">
  152.                         </div>
  153.                         <div class="team-name text-center py-3">
  154.                             <h4 class="">Full Name</h4>
  155.                             <p class="m-0">Designation</p>
  156.                         </div>
  157.                         <div class="team-icon d-flex justify-content-center pb-4">
  158.                             <a class="btn btn-square btn-secondary text-white rounded-circle m-1" href=""><i class="fab fa-facebook-f"></i></a>
  159.                             <a class="btn btn-square btn-secondary text-white rounded-circle m-1" href=""><i class="fab fa-twitter"></i></a>
  160.                             <a class="btn btn-square btn-secondary text-white rounded-circle m-1" href=""><i class="fab fa-instagram"></i></a>
  161.                             <a class="btn btn-square btn-secondary text-white rounded-circle m-1" href=""><i class="fab fa-linkedin-in"></i></a>
  162.                         </div>
  163.                     </div>
  164.                 </div>
  165.             </div>
  166.         </div>
  167.     </div>
  168. </div>
  169. <!-- Team End --> #}
  170. {% endblock %}