templates/frontend.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5. {% block head %}
  6.   <meta charset="utf-8">
  7.   <meta content="width=device-width, initial-scale=1.0" name="viewport">
  8.   <title>{% block title %} 2EI-Sarl {% endblock %}</title>
  9.   <meta content="" name="description">
  10.   <meta content="" name="btp">
  12.   <!-- Favicons -->
  13.   <link href="{{ asset('frontend/assets/img/favicon.png') }}" rel="icon">
  14.   <link href="{{ asset('frontend/assets/img/apple-touch-icon.png') }}" rel="apple-touch-icon">
  16.   <!-- Fonts -->
  17.   <link href="https://fonts.googleapis.com" rel="preconnect">
  18.   <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
  19.   <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  21.   <!-- Vendor CSS Files -->
  22.   {% block stylesheet %}
  23.     <link href="{{ asset('frontend/assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
  24.     <link href="{{ asset('frontend/assets/vendor/bootstrap-icons/bootstrap-icons.css') }}" rel="stylesheet">
  25.     <link href="{{ asset('frontend/assets/vendor/aos/aos.css') }}" rel="stylesheet">
  26.     <link href="{{ asset('frontend/assets/vendor/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
  27.     <link href="{{ asset('frontend/assets/vendor/glightbox/css/glightbox.min.css') }}" rel="stylesheet">
  28.     <link href="{{ asset('frontend/assets/vendor/swiper/swiper-bundle.min.css') }}" rel="stylesheet">
  30.     <!-- Main CSS File -->
  31.     <link href="{{ asset('frontend/assets/css/main.css') }}" rel="stylesheet">
  32.     <style>
  33.       .hero .info h2:after {
  34.         margin-left: 0px !important;
  35.       }
  36.       .btn-get-started-one {
  37.           color: white;
  38.           background-color: var(--accent-color);
  39.           font-family: var(--heading-font);
  40.           font-weight: 500;
  41.           font-size: 16px;
  42.           letter-spacing: 1px;
  43.           display: inline-block;
  44.           padding: 12px 40px;
  45.           border-radius: 50px;
  46.           transition: 0.5s;
  47.           /* margin: 10px; */
  48.           border: 2px solid var(--accent-color);
  49.       }
  50.       .btn-get-started-one:hover {
  51.           color: white;
  52.           background-color: #FFFFFF00;
  53.           border: 2px solid var(--accent-color);
  54.       }
  56.       @media (min-width: 768px) {
  57.         @keyframes slideInFromLeft {
  58.           0% {
  59.             transform: translateX(-100%);
  60.             opacity: 0;
  61.           }
  62.           100% {
  63.             transform: translateX(0);
  64.             opacity: 1;
  65.           }
  66.         }
  68.         .animate-text {
  69.           animation: 0.6s ease-out 0s 1 slideInFromLeft;
  70.         }
  71.         
  72.       }
  74.       .zoom-background {
  75.           transition: transform 0.5s ease;
  76.       }
  78.       .zoom-background:hover {
  79.           transform: scale(1.1);
  80.       }
  82.     </style>
  83.   {% endblock %}
  84. {% endblock %}
  85. </head>
  87. <body class="index-page">
  88.   {% block header %}
  89.   <header id="header" class="header d-flex align-items-center fixed-top">
  90.     <div class="container-fluid container-xl position-relative d-flex align-items-center justify-content-between">
  92.       <a href="index.html" class="logo d-flex align-items-center">
  93.         <!-- Uncomment the line below if you also wish to use an image logo -->
  94.         <img src="assets/img/logo.png" alt="">
  95.         {# <h1 class="sitename">UpConstruction</h1> <span>.</span> #}
  96.       </a>
  97.       {{ render(controller('App\\Controller\\LibrairieController::afficherMenu',{'menuactive': menu })) }}
  99.     </div>
  100.   </header>
  101.   {% endblock %}
  103.   <main class="main">
  104.   {% block main %}
  106.     {# GESTION DES SLIDES #}
  107.     {{ render(controller('App\\Controller\\LibrairieController::afficherSlide')) }}
  109.     {# A PROPOS SESSION #}
  110.     {{ render(controller('App\\Controller\\LibrairieController::afficherAproposAccueil')) }}
  112.     {# SERVICES SESSION #}
  113.     {{ render(controller('App\\Controller\\LibrairieController::afficherServicesAccueil')) }}
  115.     <!-- Projects Section -->
  116.     <section id="projects" class="projects section" style="min-height: 300px;background-attachment: fixed;background-size: cover;
  117.     background-image: url({{ asset('frontend/assets/img/0.jpg') }});background-color: rgba(0, 0, 0, 0.5);">
  118.       <div class="container" data-aos="fade-up">
  119.         <h3 style="color:white;font-size=25px;font-weight: bold;">VOUS AVEZ UNE <br> PREOCCUPATION ?</h3>
  120.         <p style="color:#FFFFFF;max-width:400px;text-align:justify;">Chaque préoccupation est une opportunité pour nous d'exceller dans notre expertise. Faites-nous part de vos défis ; nous sommes là pour vous offrir des solutions impeccables.</p>
  121.         <a href="#" class="btn-get-started-one">Nous joindre</a>
  122.       </div>
  123.     </section>
  124.     <!-- /Projects Section -->
  126.     {# STATISTIQUE SESSION #}
  127.     {{ render(controller('App\\Controller\\LibrairieController::afficherStatistiqueAccueil')) }}
  130.     {# <section id="hero" class="hero section">
  131.       <div id="hero-carousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
  133.         <div class="carousel-item active">
  134.           <img src="assets/img/hero-carousel/hero-carousel-1.jpg" alt="">
  135.             <div class="info d-flex align-items-left">
  136.               <div class="container">
  137.                 <div class="row justify-content-left" data-aos="fade-up" data-aos-delay="100">
  138.                   <div class="col-lg-6 text-left">
  139.                     <h2>Bienvenu à  2EI</h2>
  140.                     <p>Etude Execution Installation</p>
  141.                     <a href="#get-started" class="btn-get-started">Plus</a>
  142.                   </div>
  143.                 </div>
  144.               </div>
  145.             </div>
  146.         </div>
  148.         <div class="carousel-item">
  149.           <img src="assets/img/hero-carousel/hero-carousel-1.jpg" alt="">
  150.             <div class="carousel-caption d-md-block">
  151.               <h2>Bienvenu à 2EI 2</h2>
  152.               <p>Etude Execution Installation</p>
  153.               <a href="#get-started" class="btn-get-started">Plus</a>
  154.             </div>
  155.         </div>
  157.        
  159.   
  161.         <a class="carousel-control-prev" href="#hero-carousel" role="button" data-bs-slide="prev">
  162.           <span class="carousel-control-prev-icon bi bi-chevron-left" aria-hidden="true"></span>
  163.         </a>
  165.         <a class="carousel-control-next" href="#hero-carousel" role="button" data-bs-slide="next">
  166.           <span class="carousel-control-next-icon bi bi-chevron-right" aria-hidden="true"></span>
  167.         </a>
  169.       </div>
  170.     </section> #}
  172.     <!-- /Hero Section -->
  174.     <!-- Get Started Section -->
  175.     {# <section id="get-started" class="get-started section">
  177.       <div class="container">
  179.         <div class="row justify-content-between gy-4">
  181.           <div class="col-lg-6 d-flex align-items-center" data-aos="zoom-out" data-aos-delay="100">
  182.             <div class="content">
  183.               <h3>Minus hic non reiciendis ea possimus at quia.</h3>
  184.               <p>Rem id rerum. Debitis deserunt quidem delectus expedita ducimus dolor. Aut iusto ipsa. Eos ipsum nobis ipsa soluta itaque perspiciatis fuga ipsum perspiciatis. Eum amet fugiat totam nisi possimus ut delectus dicta.
  185.               </p>
  186.               <p>Aliquam velit deserunt autem. Inventore et saepe. Tenetur suscipit eligendi labore culpa eos. Deserunt porro magni qui necessitatibus dolorem at animi cupiditate.</p>
  187.             </div>
  188.           </div>
  190.           <div class="col-lg-5" data-aos="zoom-out" data-aos-delay="200">
  191.             <form action="forms/quote.php" method="post" class="php-email-form">
  192.               <h3>Get a quote</h3>
  193.               <p>Vel nobis odio laboriosam et hic voluptatem. Inventore vitae totam. Rerum repellendus enim linead sero park flows.</p>
  194.               <div class="row gy-3">
  196.                 <div class="col-md-12">
  197.                   <input type="text" name="name" class="form-control" placeholder="Name" required="">
  198.                 </div>
  200.                 <div class="col-md-12 ">
  201.                   <input type="email" class="form-control" name="email" placeholder="Email" required="">
  202.                 </div>
  204.                 <div class="col-md-12">
  205.                   <input type="text" class="form-control" name="phone" placeholder="Phone" required="">
  206.                 </div>
  208.                 <div class="col-md-12">
  209.                   <textarea class="form-control" name="message" rows="6" placeholder="Message" required=""></textarea>
  210.                 </div>
  212.                 <div class="col-md-12 text-center">
  213.                   <div class="loading">Loading</div>
  214.                   <div class="error-message"></div>
  215.                   <div class="sent-message">Your quote request has been sent successfully. Thank you!</div>
  217.                   <button type="submit">Get a quote</button>
  218.                 </div>
  220.               </div>
  221.             </form>
  222.           </div><!-- End Quote Form -->
  224.         </div>
  226.       </div>
  228.     </section> #}
  229.     <!-- /Get Started Section -->
  231.     <!-- Constructions Section -->
  232.     {# <section id="constructions" class="constructions section">
  234.       <!-- Section Title -->
  235.       <div class="container section-title" data-aos="fade-up">
  236.         <h2>Constructions</h2>
  237.         <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
  238.       </div><!-- End Section Title -->
  240.       <div class="container">
  242.         <div class="row gy-4">
  244.           <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
  245.             <div class="card-item">
  246.               <div class="row">
  247.                 <div class="col-xl-5">
  248.                   <div class="card-bg"><img src="assets/img/constructions-1.jpg" alt=""></div>
  249.                 </div>
  250.                 <div class="col-xl-7 d-flex align-items-center">
  251.                   <div class="card-body">
  252.                     <h4 class="card-title">Eligendi omnis sunt veritatis.</h4>
  253.                     <p>Fuga in dolorum et iste et culpa. Commodi possimus nesciunt modi voluptatem placeat deleniti adipisci. Cum delectus doloribus non veritatis. Officia temporibus illo magnam. Dolor eos et.</p>
  254.                   </div>
  255.                 </div>
  256.               </div>
  257.             </div>
  258.           </div><!-- End Card Item -->
  260.           <div class="col-lg-6" data-aos="fade-up" data-aos-delay="200">
  261.             <div class="card-item">
  262.               <div class="row">
  263.                 <div class="col-xl-5">
  264.                   <div class="card-bg"><img src="assets/img/constructions-2.jpg" alt=""></div>
  265.                 </div>
  266.                 <div class="col-xl-7 d-flex align-items-center">
  267.                   <div class="card-body">
  268.                     <h4 class="card-title">Possimus ut sed velit assumenda</h4>
  269.                     <p>Sunt deserunt maiores voluptatem autem est rerum perferendis rerum blanditiis. Est laboriosam qui iste numquam laboriosam voluptatem architecto. Est laudantium sunt at quas aut hic. Eum dignissimos.</p>
  270.                   </div>
  271.                 </div>
  272.               </div>
  273.             </div>
  274.           </div><!-- End Card Item -->
  276.           <div class="col-lg-6" data-aos="fade-up" data-aos-delay="300">
  277.             <div class="card-item">
  278.               <div class="row">
  279.                 <div class="col-xl-5">
  280.                   <div class="card-bg"><img src="assets/img/constructions-3.jpg" alt=""></div>
  281.                 </div>
  282.                 <div class="col-xl-7 d-flex align-items-center">
  283.                   <div class="card-body">
  284.                     <h4 class="card-title">Error beatae dolor inventore aut</h4>
  285.                     <p>Dicta porro nobis. Velit cum in. Nesciunt dignissimos enim molestiae facilis numquam quae quaerat ipsam omnis. Neque debitis ipsum at architecto officia laboriosam odit. Ut sunt temporibus nulla culpa.</p>
  286.                   </div>
  287.                 </div>
  288.               </div>
  289.             </div>
  290.           </div><!-- End Card Item -->
  292.           <div class="col-lg-6" data-aos="fade-up" data-aos-delay="400">
  293.             <div class="card-item">
  294.               <div class="row">
  295.                 <div class="col-xl-5">
  296.                   <div class="card-bg"><img src="assets/img/constructions-4.jpg" alt=""></div>
  297.                 </div>
  298.                 <div class="col-xl-7 d-flex align-items-center">
  299.                   <div class="card-body">
  300.                     <h4 class="card-title">Expedita voluptas ut ut nesciunt</h4>
  301.                     <p>Aut est quidem doloremque voluptatem magnam quis excepturi vero quia. Eum eos doloremque architecto illo at beatae dolore. Fugiat suscipit et sint ratione dolores. Aut aliquid ea dolores libero nobis.</p>
  302.                   </div>
  303.                 </div>
  304.               </div>
  305.             </div>
  306.           </div><!-- End Card Item -->
  308.         </div>
  310.       </div>
  312.     </section> #}
  313.     <!-- /Constructions Section -->
  315.     <!-- Services Section -->
  316.     {# <section id="services" class="services section">
  318.       <!-- Section Title -->
  319.       <div class="container section-title" data-aos="fade-up">
  320.         <h2>Services</h2>
  321.         <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
  322.       </div><!-- End Section Title -->
  324.       <div class="container">
  326.         <div class="row gy-4">
  328.           <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
  329.             <div class="service-item  position-relative">
  330.               <div class="icon">
  331.                 <i class="fa-solid fa-mountain-city"></i>
  332.               </div>
  333.               <h3>Nesciunt Mete</h3>
  334.               <p>Provident nihil minus qui consequatur non omnis maiores. Eos accusantium minus dolores iure perferendis tempore et consequatur.</p>
  335.               <a href="#" class="readmore stretched-link">Read more <i class="bi bi-arrow-right"></i></a>
  336.             </div>
  337.           </div><!-- End Service Item -->
  339.           <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
  340.             <div class="service-item position-relative">
  341.               <div class="icon">
  342.                 <i class="fa-solid fa-arrow-up-from-ground-water"></i>
  343.               </div>
  344.               <h3>Eosle Commodi</h3>
  345.               <p>Ut autem aut autem non a. Sint sint sit facilis nam iusto sint. Libero corrupti neque eum hic non ut nesciunt dolorem.</p>
  346.               <a href="#" class="readmore stretched-link">Read more <i class="bi bi-arrow-right"></i></a>
  347.             </div>
  348.           </div><!-- End Service Item -->
  350.           <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
  351.             <div class="service-item position-relative">
  352.               <div class="icon">
  353.                 <i class="fa-solid fa-compass-drafting"></i>
  354.               </div>
  355.               <h3>Ledo Markt</h3>
  356.               <p>Ut excepturi voluptatem nisi sed. Quidem fuga consequatur. Minus ea aut. Vel qui id voluptas adipisci eos earum corrupti.</p>
  357.               <a href="#" class="readmore stretched-link">Read more <i class="bi bi-arrow-right"></i></a>
  358.             </div>
  359.           </div><!-- End Service Item -->
  361.           <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400">
  362.             <div class="service-item position-relative">
  363.               <div class="icon">
  364.                 <i class="fa-solid fa-trowel-bricks"></i>
  365.               </div>
  366.               <h3>Asperiores Commodit</h3>
  367.               <p>Non et temporibus minus omnis sed dolor esse consequatur. Cupiditate sed error ea fuga sit provident adipisci neque.</p>
  368.               <a href="#" class="readmore stretched-link">Read more <i class="bi bi-arrow-right"></i></a>
  369.             </div>
  370.           </div><!-- End Service Item -->
  372.           <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="500">
  373.             <div class="service-item position-relative">
  374.               <div class="icon">
  375.                 <i class="fa-solid fa-helmet-safety"></i>
  376.               </div>
  377.               <h3>Velit Doloremque</h3>
  378.               <p>Cumque et suscipit saepe. Est maiores autem enim facilis ut aut ipsam corporis aut. Sed animi at autem alias eius labore.</p>
  379.               <a href="#" class="readmore stretched-link">Read more <i class="bi bi-arrow-right"></i></a>
  380.             </div>
  381.           </div><!-- End Service Item -->
  383.           <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="600">
  384.             <div class="service-item position-relative">
  385.               <div class="icon">
  386.                 <i class="fa-solid fa-arrow-up-from-ground-water"></i>
  387.               </div>
  388.               <h3>Dolori Architecto</h3>
  389.               <p>Hic molestias ea quibusdam eos. Fugiat enim doloremque aut neque non et debitis iure. Corrupti recusandae ducimus enim.</p>
  390.               <a href="#" class="readmore stretched-link">Read more <i class="bi bi-arrow-right"></i></a>
  391.             </div>
  392.           </div><!-- End Service Item -->
  394.         </div>
  396.       </div>
  398.     </section> #}
  399.     <!-- /Services Section -->
  401.     <!-- Alt Services Section -->
  402.     {# <section id="alt-services" class="alt-services section">
  404.       <div class="container">
  406.         <div class="row justify-content-around gy-4">
  407.           <div class="features-image col-lg-6" data-aos="fade-up" data-aos-delay="100"><img src="assets/img/alt-services.jpg" alt=""></div>
  409.           <div class="col-lg-5 d-flex flex-column justify-content-center" data-aos="fade-up" data-aos-delay="200">
  410.             <h3>Enim quis est voluptatibus aliquid consequatur fugiat</h3>
  411.             <p>Esse voluptas cumque vel exercitationem. Reiciendis est hic accusamus. Non ipsam et sed minima temporibus laudantium. Soluta voluptate sed facere corporis dolores excepturi</p>
  413.             <div class="icon-box d-flex position-relative" data-aos="fade-up" data-aos-delay="300">
  414.               <i class="bi bi-easel flex-shrink-0"></i>
  415.               <div>
  416.                 <h4><a href="" class="stretched-link">Lorem Ipsum</a></h4>
  417.                 <p>Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident</p>
  418.               </div>
  419.             </div><!-- End Icon Box -->
  421.             <div class="icon-box d-flex position-relative" data-aos="fade-up" data-aos-delay="400">
  422.               <i class="bi bi-patch-check flex-shrink-0"></i>
  423.               <div>
  424.                 <h4><a href="" class="stretched-link">Nemo Enim</a></h4>
  425.                 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque</p>
  426.               </div>
  427.             </div><!-- End Icon Box -->
  429.             <div class="icon-box d-flex position-relative" data-aos="fade-up" data-aos-delay="500">
  430.               <i class="bi bi-brightness-high flex-shrink-0"></i>
  431.               <div>
  432.                 <h4><a href="" class="stretched-link">Dine Pad</a></h4>
  433.                 <p>Explicabo est voluptatum asperiores consequatur magnam. Et veritatis odit. Sunt aut deserunt minus aut eligendi omnis</p>
  434.               </div>
  435.             </div><!-- End Icon Box -->
  437.             <div class="icon-box d-flex position-relative" data-aos="fade-up" data-aos-delay="600">
  438.               <i class="bi bi-brightness-high flex-shrink-0"></i>
  439.               <div>
  440.                 <h4><a href="" class="stretched-link">Tride clov</a></h4>
  441.                 <p>Est voluptatem labore deleniti quis a delectus et. Saepe dolorem libero sit non aspernatur odit amet. Et eligendi</p>
  442.               </div>
  443.             </div><!-- End Icon Box -->
  445.           </div>
  446.         </div>
  448.       </div>
  450.     </section> #}
  451.     <!-- /Alt Services Section -->
  453.     <!-- Features Section -->
  454.     {# <section id="features" class="features section">
  456.       <div class="container">
  458.         <ul class="nav nav-tabs row  g-2 d-flex" data-aos="fade-up" data-aos-delay="100" role="tablist">
  460.           <li class="nav-item col-3" role="presentation">
  461.             <a class="nav-link active show" data-bs-toggle="tab" data-bs-target="#features-tab-1" aria-selected="true" role="tab">
  462.               <h4>Modisit</h4>
  463.             </a>
  464.           </li><!-- End tab nav item -->
  466.           <li class="nav-item col-3" role="presentation">
  467.             <a class="nav-link" data-bs-toggle="tab" data-bs-target="#features-tab-2" aria-selected="false" tabindex="-1" role="tab">
  468.               <h4>Praesenti</h4>
  469.             </a><!-- End tab nav item -->
  471.           </li>
  472.           <li class="nav-item col-3" role="presentation">
  473.             <a class="nav-link" data-bs-toggle="tab" data-bs-target="#features-tab-3" aria-selected="false" tabindex="-1" role="tab">
  474.               <h4>Explica</h4>
  475.             </a>
  476.           </li><!-- End tab nav item -->
  478.           <li class="nav-item col-3" role="presentation">
  479.             <a class="nav-link" data-bs-toggle="tab" data-bs-target="#features-tab-4" aria-selected="false" tabindex="-1" role="tab">
  480.               <h4>Nostrum</h4>
  481.             </a>
  482.           </li><!-- End tab nav item -->
  484.         </ul>
  486.         <div class="tab-content" data-aos="fade-up" data-aos-delay="200">
  488.           <div class="tab-pane fade active show" id="features-tab-1" role="tabpanel">
  489.             <div class="row">
  490.               <div class="col-lg-6 order-2 order-lg-1 mt-3 mt-lg-0 d-flex flex-column justify-content-center">
  491.                 <h3>Voluptatem dignissimos provident</h3>
  492.                 <p class="fst-italic">
  493.                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
  494.                   magna aliqua.
  495.                 </p>
  496.                 <ul>
  497.                   <li><i class="bi bi-check2-all"></i> <span>Ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></li>
  498.                   <li><i class="bi bi-check2-all"></i> <span>Duis aute irure dolor in reprehenderit in voluptate velit.</span></li>
  499.                   <li><i class="bi bi-check2-all"></i> <span>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate trideta storacalaperda mastiro dolore eu fugiat nulla pariatur.</span></li>
  500.                 </ul>
  501.               </div>
  502.               <div class="col-lg-6 order-1 order-lg-2 text-center">
  503.                 <img src="assets/img/features-1.jpg" alt="" class="img-fluid">
  504.               </div>
  505.             </div>
  506.           </div><!-- End tab content item -->
  508.           <div class="tab-pane fade" id="features-tab-2" role="tabpanel">
  509.             <div class="row">
  510.               <div class="col-lg-6 order-2 order-lg-1 mt-3 mt-lg-0 d-flex flex-column justify-content-center">
  511.                 <h3>Neque exercitationem debitis</h3>
  512.                 <p class="fst-italic">
  513.                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
  514.                   magna aliqua.
  515.                 </p>
  516.                 <ul>
  517.                   <li><i class="bi bi-check2-all"></i> <span>Ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></li>
  518.                   <li><i class="bi bi-check2-all"></i> <span>Duis aute irure dolor in reprehenderit in voluptate velit.</span></li>
  519.                   <li><i class="bi bi-check2-all"></i> <span>Provident mollitia neque rerum asperiores dolores quos qui a. Ipsum neque dolor voluptate nisi sed.</span></li>
  520.                   <li><i class="bi bi-check2-all"></i> <span>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate trideta storacalaperda mastiro dolore eu fugiat nulla pariatur.</span></li>
  521.                 </ul>
  522.               </div>
  523.               <div class="col-lg-6 order-1 order-lg-2 text-center">
  524.                 <img src="assets/img/features-2.jpg" alt="" class="img-fluid">
  525.               </div>
  526.             </div>
  527.           </div><!-- End tab content item -->
  529.           <div class="tab-pane fade" id="features-tab-3" role="tabpanel">
  530.             <div class="row">
  531.               <div class="col-lg-6 order-2 order-lg-1 mt-3 mt-lg-0 d-flex flex-column justify-content-center">
  532.                 <h3>Voluptatibus commodi accusamu</h3>
  533.                 <ul>
  534.                   <li><i class="bi bi-check2-all"></i> <span>Ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></li>
  535.                   <li><i class="bi bi-check2-all"></i> <span>Duis aute irure dolor in reprehenderit in voluptate velit.</span></li>
  536.                   <li><i class="bi bi-check2-all"></i> <span>Provident mollitia neque rerum asperiores dolores quos qui a. Ipsum neque dolor voluptate nisi sed.</span></li>
  537.                 </ul>
  538.                 <p class="fst-italic">
  539.                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
  540.                   magna aliqua.
  541.                 </p>
  542.               </div>
  543.               <div class="col-lg-6 order-1 order-lg-2 text-center">
  544.                 <img src="assets/img/features-3.jpg" alt="" class="img-fluid">
  545.               </div>
  546.             </div>
  547.           </div><!-- End tab content item -->
  549.           <div class="tab-pane fade" id="features-tab-4" role="tabpanel">
  550.             <div class="row">
  551.               <div class="col-lg-6 order-2 order-lg-1 mt-3 mt-lg-0 d-flex flex-column justify-content-center">
  552.                 <h3>Omnis fugiat ea explicabo sunt</h3>
  553.                 <p class="fst-italic">
  554.                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
  555.                   magna aliqua.
  556.                 </p>
  557.                 <ul>
  558.                   <li><i class="bi bi-check2-all"></i> <span>Ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></li>
  559.                   <li><i class="bi bi-check2-all"></i> <span>Duis aute irure dolor in reprehenderit in voluptate velit.</span></li>
  560.                   <li><i class="bi bi-check2-all"></i> <span>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate trideta storacalaperda mastiro dolore eu fugiat nulla pariatur.</span></li>
  561.                 </ul>
  562.               </div>
  563.               <div class="col-lg-6 order-1 order-lg-2 text-center">
  564.                 <img src="assets/img/features-4.jpg" alt="" class="img-fluid">
  565.               </div>
  566.             </div>
  567.           </div><!-- End tab content item -->
  569.         </div>
  571.       </div>
  573.     </section> #}
  574.     <!-- /Features Section -->
  576.     <!-- Projects Section -->
  577.     {# <section id="projects" class="projects section">
  579.       <!-- Section Title -->
  580.       <div class="container section-title" data-aos="fade-up">
  581.         <h2>Projects</h2>
  582.         <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
  583.       </div><!-- End Section Title -->
  585.       <div class="container">
  587.         <div class="isotope-layout" data-default-filter="*" data-layout="masonry" data-sort="original-order">
  589.           <ul class="portfolio-filters isotope-filters" data-aos="fade-up" data-aos-delay="100">
  590.             <li data-filter="*" class="filter-active">All</li>
  591.             <li data-filter=".filter-remodeling">Remodeling</li>
  592.             <li data-filter=".filter-construction">Construction</li>
  593.             <li data-filter=".filter-repairs">Repairs</li>
  594.             <li data-filter=".filter-design">Design</li>
  595.           </ul><!-- End Portfolio Filters -->
  597.           <div class="row gy-4 isotope-container" data-aos="fade-up" data-aos-delay="200">
  599.             <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-remodeling">
  600.               <div class="portfolio-content h-100">
  601.                 <img src="assets/img/projects/remodeling-1.jpg" class="img-fluid" alt="">
  602.                 <div class="portfolio-info">
  603.                   <h4>App 1</h4>
  604.                   <p>Lorem ipsum, dolor sit amet consectetur</p>
  605.                   <a href="assets/img/projects/remodeling-1.jpg" title="App 1" data-gallery="portfolio-gallery-app" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
  606.                   <a href="project-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
  607.                 </div>
  608.               </div>
  609.             </div><!-- End Portfolio Item -->
  611.             <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-construction">
  612.               <div class="portfolio-content h-100">
  613.                 <img src="assets/img/projects/construction-1.jpg" class="img-fluid" alt="">
  614.                 <div class="portfolio-info">
  615.                   <h4>Product 1</h4>
  616.                   <p>Lorem ipsum, dolor sit amet consectetur</p>
  617.                   <a href="assets/img/projects/construction-1.jpg" title="Product 1" data-gallery="portfolio-gallery-product" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
  618.                   <a href="project-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
  619.                 </div>
  620.               </div>
  621.             </div><!-- End Portfolio Item -->
  623.             <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-repairs">
  624.               <div class="portfolio-content h-100">
  625.                 <img src="assets/img/projects/repairs-1.jpg" class="img-fluid" alt="">
  626.                 <div class="portfolio-info">
  627.                   <h4>Branding 1</h4>
  628.                   <p>Lorem ipsum, dolor sit amet consectetur</p>
  629.                   <a href="assets/img/projects/repairs-1.jpg" title="Branding 1" data-gallery="portfolio-gallery-branding" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
  630.                   <a href="project-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
  631.                 </div>
  632.               </div>
  633.             </div><!-- End Portfolio Item -->
  635.             <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-design">
  636.               <div class="portfolio-content h-100">
  637.                 <img src="assets/img/projects/design-1.jpg" class="img-fluid" alt="">
  638.                 <div class="portfolio-info">
  639.                   <h4>Books 1</h4>
  640.                   <p>Lorem ipsum, dolor sit amet consectetur</p>
  641.                   <a href="assets/img/projects/design-1.jpg" title="Branding 1" data-gallery="portfolio-gallery-book" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
  642.                   <a href="project-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
  643.                 </div>
  644.               </div>
  645.             </div><!-- End Portfolio Item -->
  647.             <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-remodeling">
  648.               <div class="portfolio-content h-100">
  649.                 <img src="assets/img/projects/remodeling-2.jpg" class="img-fluid" alt="">
  650.                 <div class="portfolio-info">
  651.                   <h4>App 2</h4>
  652.                   <p>Lorem ipsum, dolor sit amet consectetur</p>
  653.                   <a href="assets/img/projects/remodeling-2.jpg" title="App 2" data-gallery="portfolio-gallery-app" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
  654.                   <a href="project-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
  655.                 </div>
  656.               </div>
  657.             </div><!-- End Portfolio Item -->
  659.             <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-construction">
  660.               <div class="portfolio-content h-100">
  661.                 <img src="assets/img/projects/construction-2.jpg" class="img-fluid" alt="">
  662.                 <div class="portfolio-info">
  663.                   <h4>Product 2</h4>
  664.                   <p>Lorem ipsum, dolor sit amet consectetur</p>
  665.                   <a href="assets/img/projects/construction-2.jpg" title="Product 2" data-gallery="portfolio-gallery-product" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
  666.                   <a href="project-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
  667.                 </div>
  668.               </div>
  669.             </div><!-- End Portfolio Item -->
  671.             <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-repairs">
  672.               <div class="portfolio-content h-100">
  673.                 <img src="assets/img/projects/repairs-2.jpg" class="img-fluid" alt="">
  674.                 <div class="portfolio-info">
  675.                   <h4>Branding 2</h4>
  676.                   <p>Lorem ipsum, dolor sit amet consectetur</p>
  677.                   <a href="assets/img/projects/repairs-2.jpg" title="Branding 2" data-gallery="portfolio-gallery-branding" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
  678.                   <a href="project-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
  679.                 </div>
  680.               </div>
  681.             </div><!-- End Portfolio Item -->
  683.             <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-design">
  684.               <div class="portfolio-content h-100">
  685.                 <img src="assets/img/projects/design-2.jpg" class="img-fluid" alt="">
  686.                 <div class="portfolio-info">
  687.                   <h4>Books 2</h4>
  688.                   <p>Lorem ipsum, dolor sit amet consectetur</p>
  689.                   <a href="assets/img/projects/design-2.jpg" title="Branding 2" data-gallery="portfolio-gallery-book" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
  690.                   <a href="project-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
  691.                 </div>
  692.               </div>
  693.             </div><!-- End Portfolio Item -->
  695.             <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-remodeling">
  696.               <div class="portfolio-content h-100">
  697.                 <img src="assets/img/projects/remodeling-3.jpg" class="img-fluid" alt="">
  698.                 <div class="portfolio-info">
  699.                   <h4>App 3</h4>
  700.                   <p>Lorem ipsum, dolor sit amet consectetur</p>
  701.                   <a href="assets/img/projects/remodeling-3.jpg" title="App 3" data-gallery="portfolio-gallery-app" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
  702.                   <a href="project-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
  703.                 </div>
  704.               </div>
  705.             </div><!-- End Portfolio Item -->
  707.             <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-construction">
  708.               <div class="portfolio-content h-100">
  709.                 <img src="assets/img/projects/construction-3.jpg" class="img-fluid" alt="">
  710.                 <div class="portfolio-info">
  711.                   <h4>Product 3</h4>
  712.                   <p>Lorem ipsum, dolor sit amet consectetur</p>
  713.                   <a href="assets/img/projects/construction-3.jpg" title="Product 3" data-gallery="portfolio-gallery-product" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
  714.                   <a href="project-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
  715.                 </div>
  716.               </div>
  717.             </div><!-- End Portfolio Item -->
  719.             <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-repairs">
  720.               <div class="portfolio-content h-100">
  721.                 <img src="assets/img/projects/repairs-3.jpg" class="img-fluid" alt="">
  722.                 <div class="portfolio-info">
  723.                   <h4>Branding 3</h4>
  724.                   <p>Lorem ipsum, dolor sit amet consectetur</p>
  725.                   <a href="assets/img/projects/repairs-3.jpg" title="Branding 2" data-gallery="portfolio-gallery-branding" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
  726.                   <a href="project-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
  727.                 </div>
  728.               </div>
  729.             </div><!-- End Portfolio Item -->
  731.             <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-design">
  732.               <div class="portfolio-content h-100">
  733.                 <img src="assets/img/projects/design-3.jpg" class="img-fluid" alt="">
  734.                 <div class="portfolio-info">
  735.                   <h4>Books 3</h4>
  736.                   <p>Lorem ipsum, dolor sit amet consectetur</p>
  737.                   <a href="assets/img/projects/design-3.jpg" title="Branding 3" data-gallery="portfolio-gallery-book" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
  738.                   <a href="project-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
  739.                 </div>
  740.               </div>
  741.             </div><!-- End Portfolio Item -->
  743.           </div><!-- End Portfolio Container -->
  745.         </div>
  747.       </div>
  749.     </section> #}
  750.     <!-- /Projects Section -->
  752.     <!-- Testimonials Section -->
  753.     {# <section id="testimonials" class="testimonials section">
  755.       <!-- Section Title -->
  756.       <div class="container section-title" data-aos="fade-up">
  757.         <h2>Testimonials</h2>
  758.         <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
  759.       </div><!-- End Section Title -->
  761.       <div class="container" data-aos="fade-up" data-aos-delay="100">
  763.         <div class="swiper init-swiper">
  764.           <script type="application/json" class="swiper-config">
  765.             {
  766.               "loop": true,
  767.               "speed": 600,
  768.               "autoplay": {
  769.                 "delay": 5000
  770.               },
  771.               "slidesPerView": "auto",
  772.               "pagination": {
  773.                 "el": ".swiper-pagination",
  774.                 "type": "bullets",
  775.                 "clickable": true
  776.               },
  777.               "breakpoints": {
  778.                 "320": {
  779.                   "slidesPerView": 1,
  780.                   "spaceBetween": 40
  781.                 },
  782.                 "1200": {
  783.                   "slidesPerView": 2,
  784.                   "spaceBetween": 20
  785.                 }
  786.               }
  787.             }
  788.           </script>
  789.           <div class="swiper-wrapper">
  791.             <div class="swiper-slide">
  792.               <div class="testimonial-wrap">
  793.                 <div class="testimonial-item">
  794.                   <img src="assets/img/testimonials/testimonials-1.jpg" class="testimonial-img" alt="">
  795.                   <h3>Saul Goodman</h3>
  796.                   <h4>Ceo &amp; Founder</h4>
  797.                   <div class="stars">
  798.                     <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
  799.                   </div>
  800.                   <p>
  801.                     <i class="bi bi-quote quote-icon-left"></i>
  802.                     <span>Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper.</span>
  803.                     <i class="bi bi-quote quote-icon-right"></i>
  804.                   </p>
  805.                 </div>
  806.               </div>
  807.             </div><!-- End testimonial item -->
  809.             <div class="swiper-slide">
  810.               <div class="testimonial-wrap">
  811.                 <div class="testimonial-item">
  812.                   <img src="assets/img/testimonials/testimonials-2.jpg" class="testimonial-img" alt="">
  813.                   <h3>Sara Wilsson</h3>
  814.                   <h4>Designer</h4>
  815.                   <div class="stars">
  816.                     <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
  817.                   </div>
  818.                   <p>
  819.                     <i class="bi bi-quote quote-icon-left"></i>
  820.                     <span>Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet legam anim culpa.</span>
  821.                     <i class="bi bi-quote quote-icon-right"></i>
  822.                   </p>
  823.                 </div>
  824.               </div>
  825.             </div><!-- End testimonial item -->
  827.             <div class="swiper-slide">
  828.               <div class="testimonial-wrap">
  829.                 <div class="testimonial-item">
  830.                   <img src="assets/img/testimonials/testimonials-3.jpg" class="testimonial-img" alt="">
  831.                   <h3>Jena Karlis</h3>
  832.                   <h4>Store Owner</h4>
  833.                   <div class="stars">
  834.                     <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
  835.                   </div>
  836.                   <p>
  837.                     <i class="bi bi-quote quote-icon-left"></i>
  838.                     <span>Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem veniam duis minim tempor labore quem eram duis noster aute amet eram fore quis sint minim.</span>
  839.                     <i class="bi bi-quote quote-icon-right"></i>
  840.                   </p>
  841.                 </div>
  842.               </div>
  843.             </div><!-- End testimonial item -->
  845.             <div class="swiper-slide">
  846.               <div class="testimonial-wrap">
  847.                 <div class="testimonial-item">
  848.                   <img src="assets/img/testimonials/testimonials-4.jpg" class="testimonial-img" alt="">
  849.                   <h3>Matt Brandon</h3>
  850.                   <h4>Freelancer</h4>
  851.                   <div class="stars">
  852.                     <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
  853.                   </div>
  854.                   <p>
  855.                     <i class="bi bi-quote quote-icon-left"></i>
  856.                     <span>Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim fugiat minim velit minim dolor enim duis veniam ipsum anim magna sunt elit fore quem dolore labore illum veniam.</span>
  857.                     <i class="bi bi-quote quote-icon-right"></i>
  858.                   </p>
  859.                 </div>
  860.               </div>
  861.             </div><!-- End testimonial item -->
  863.             <div class="swiper-slide">
  864.               <div class="testimonial-wrap">
  865.                 <div class="testimonial-item">
  866.                   <img src="assets/img/testimonials/testimonials-5.jpg" class="testimonial-img" alt="">
  867.                   <h3>John Larson</h3>
  868.                   <h4>Entrepreneur</h4>
  869.                   <div class="stars">
  870.                     <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
  871.                   </div>
  872.                   <p>
  873.                     <i class="bi bi-quote quote-icon-left"></i>
  874.                     <span>Quis quorum aliqua sint quem legam fore sunt eram irure aliqua veniam tempor noster veniam enim culpa labore duis sunt culpa nulla illum cillum fugiat legam esse veniam culpa fore nisi cillum quid.</span>
  875.                     <i class="bi bi-quote quote-icon-right"></i>
  876.                   </p>
  877.                 </div>
  878.               </div>
  879.             </div><!-- End testimonial item -->
  881.           </div>
  882.           <div class="swiper-pagination"></div>
  883.         </div>
  885.       </div>
  887.     </section> #}
  888.     <!-- /Testimonials Section -->
  890.     <!-- Recent Blog Posts Section -->
  891.     {# <section id="recent-blog-posts" class="recent-blog-posts section">
  893.       <!-- Section Title -->
  894.       <div class="container section-title" data-aos="fade-up">
  895.         <h2>Recent Blog Posts</h2>
  896.         <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
  897.       </div><!-- End Section Title -->
  899.       <div class="container">
  901.         <div class="row gy-5">
  903.           <div class="col-xl-4 col-md-6">
  904.             <div class="post-item position-relative h-100" data-aos="fade-up" data-aos-delay="100">
  906.               <div class="post-img position-relative overflow-hidden">
  907.                 <img src="assets/img/blog/blog-1.jpg" class="img-fluid" alt="">
  908.                 <span class="post-date">December 12</span>
  909.               </div>
  911.               <div class="post-content d-flex flex-column">
  913.                 <h3 class="post-title">Eum ad dolor et. Autem aut fugiat debitis</h3>
  915.                 <div class="meta d-flex align-items-center">
  916.                   <div class="d-flex align-items-center">
  917.                     <i class="bi bi-person"></i> <span class="ps-2">Julia Parker</span>
  918.                   </div>
  919.                   <span class="px-3 text-black-50">/</span>
  920.                   <div class="d-flex align-items-center">
  921.                     <i class="bi bi-folder2"></i> <span class="ps-2">Politics</span>
  922.                   </div>
  923.                 </div>
  925.                 <hr>
  927.                 <a href="blog-details.html" class="readmore stretched-link"><span>Read More</span><i class="bi bi-arrow-right"></i></a>
  929.               </div>
  931.             </div>
  932.           </div><!-- End post item -->
  934.           <div class="col-xl-4 col-md-6">
  935.             <div class="post-item position-relative h-100" data-aos="fade-up" data-aos-delay="200">
  937.               <div class="post-img position-relative overflow-hidden">
  938.                 <img src="assets/img/blog/blog-2.jpg" class="img-fluid" alt="">
  939.                 <span class="post-date">July 17</span>
  940.               </div>
  942.               <div class="post-content d-flex flex-column">
  944.                 <h3 class="post-title">Et repellendus molestiae qui est sed omnis</h3>
  946.                 <div class="meta d-flex align-items-center">
  947.                   <div class="d-flex align-items-center">
  948.                     <i class="bi bi-person"></i> <span class="ps-2">Mario Douglas</span>
  949.                   </div>
  950.                   <span class="px-3 text-black-50">/</span>
  951.                   <div class="d-flex align-items-center">
  952.                     <i class="bi bi-folder2"></i> <span class="ps-2">Sports</span>
  953.                   </div>
  954.                 </div>
  956.                 <hr>
  958.                 <a href="blog-details.html" class="readmore stretched-link"><span>Read More</span><i class="bi bi-arrow-right"></i></a>
  960.               </div>
  962.             </div>
  963.           </div><!-- End post item -->
  965.           <div class="col-xl-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
  966.             <div class="post-item position-relative h-100">
  968.               <div class="post-img position-relative overflow-hidden">
  969.                 <img src="assets/img/blog/blog-3.jpg" class="img-fluid" alt="">
  970.                 <span class="post-date">September 05</span>
  971.               </div>
  973.               <div class="post-content d-flex flex-column">
  975.                 <h3 class="post-title">Quia assumenda est et veritati tirana ploder</h3>
  977.                 <div class="meta d-flex align-items-center">
  978.                   <div class="d-flex align-items-center">
  979.                     <i class="bi bi-person"></i> <span class="ps-2">Lisa Hunter</span>
  980.                   </div>
  981.                   <span class="px-3 text-black-50">/</span>
  982.                   <div class="d-flex align-items-center">
  983.                     <i class="bi bi-folder2"></i> <span class="ps-2">Economics</span>
  984.                   </div>
  985.                 </div>
  987.                 <hr>
  989.                 <a href="blog-details.html" class="readmore stretched-link"><span>Read More</span><i class="bi bi-arrow-right"></i></a>
  991.               </div>
  993.             </div>
  994.           </div><!-- End post item -->
  996.         </div>
  998.       </div>
  1000.     </section> #}
  1001.     <!-- /Recent Blog Posts Section -->
  1003.   {% endblock %}
  1004.   </main>
  1006.   {# FOOTER #}
  1007.   {{ render(controller('App\\Controller\\LibrairieController::afficherFooter')) }}
  1009.   <!-- Scroll Top -->
  1010.   <a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
  1012.   <!-- Preloader -->
  1013.   <div id="preloader"></div>
  1015.   <!-- Vendor JS Files -->
  1016.   {% block javascripts %}
  1017.   <script src="{{ asset('frontend/assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
  1018.   <script src="{{ asset('frontend/assets/vendor/php-email-form/validate.js') }}"></script>
  1019.   <script src="{{ asset('frontend/assets/vendor/aos/aos.js') }}"></script>
  1020.   <script src="{{ asset('frontend/assets/vendor/glightbox/js/glightbox.min.js') }}"></script>
  1021.   <script src="{{ asset('frontend/assets/vendor/imagesloaded/imagesloaded.pkgd.min.js') }}"></script>
  1022.   <script src="{{ asset('frontend/assets/vendor/isotope-layout/isotope.pkgd.min.js') }}"></script>
  1023.   <script src="{{ asset('frontend/assets/vendor/swiper/swiper-bundle.min.js') }}"></script>
  1024.   <script src="{{ asset('frontend/assets/vendor/purecounter/purecounter_vanilla.js') }}"></script>
  1026.   <!-- Main JS File -->
  1027.   <script src="{{ asset('frontend/assets/js/main.js') }}"></script>
  1029.   <script>
  1030.     document.addEventListener('DOMContentLoaded', function () {
  1031.       var heroCarousel = document.getElementById('hero-carousel');
  1032.       heroCarousel.addEventListener('slide.bs.carousel', function (e) {
  1033.         // Supprime l'animation des slides précédents
  1034.         var activeItems = document.querySelectorAll('.info.animate-text');
  1035.         activeItems.forEach(function (activeItem) {
  1036.           activeItem.classList.remove('animate-text');
  1037.         });
  1039.         // Ajoute l'animation au slide suivant
  1040.         var nextSlideInfo = e.relatedTarget.querySelector('.info');
  1041.         if (nextSlideInfo) {
  1042.           nextSlideInfo.classList.add('animate-text');
  1043.         }
  1044.       });
  1045.     });
  1046.   </script>
  1048.   {% endblock %}
  1050. </body>
  1052. </html>