templates/home/bujuplast.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  4.     <!-- Navbar Start -->
  5.     <div class="container-fluid position-relative p-0">
  6.        <div class="container-fluid bg-primary py-5 bg-header" style="margin-bottom: 90px;">
  7.             <div class="row py-5">
  8.                 <div class="col-12 pt-lg-5 mt-lg-5 text-center">
  9.                     <h1 class="display-4 text-white animated zoomIn">Bujuplast</h1>
  10.                     <a href="{{ path('home') }}" class="h5 text-white">Accueil</a>
  11.                     <i class="far fa-circle text-white px-2"></i>
  12.                     <a href="" class="h5 text-white">Bujuplast</a>
  13.                 </div>
  14.             </div>
  15.         </div>
  16.     </div>
  17.     <!-- Navbar End -->
  20.     <!-- Full Screen Search Start -->
  21.     <div class="modal fade" id="searchModal" tabindex="-1">
  22.         <div class="modal-dialog modal-fullscreen">
  23.             <div class="modal-content" style="background: rgba(9, 30, 62, .7);">
  24.                 <div class="modal-header border-0">
  25.                     <button type="button" class="btn bg-white btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  26.                 </div>
  27.                 <div class="modal-body d-flex align-items-center justify-content-center">
  28.                     <div class="input-group" style="max-width: 600px;">
  29.                         <input type="text" class="form-control bg-transparent border-primary p-3" placeholder="Type search keyword">
  30.                         <button class="btn btn-primary px-4"><i class="bi bi-search"></i></button>
  31.                     </div>
  32.                 </div>
  33.             </div>
  34.         </div>
  35.     </div>
  36.     <!-- Full Screen Search End -->
  39.     <!-- Blog Start -->
  40.     <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
  41.         <div class="container py-5">
  42.             <div class="row g-5">
  43.                 <div class="col-lg-8">
  44.                     <!-- Blog Detail Start -->
  45.                     <div class="mb-5">
  46.                         <iframe width="700" height="445" style="margin: 3%;" src="https://www.youtube.com/embed/YaAXf8aPy88" title="Dispositif de Collecte de déchets connecté SAMBAL" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  47.                         <img class="img-fluid w-100 rounded mb-5" src="{{asset('assets/img/bujuplast.png')}}" alt="">
  48.                         <h1 class="mb-4">Buju Plast</h1>
  49.                         <p class="mb-4">La présente invention a pour objet un distributeur automatique inversé made
  50.                             in Sénégal, dénommé BUJU PLAST destiné à participer au recyclage des bouteilles en plastiques 
  51.                             recyclables et à l’amélioration des moyens techniques de recyclage de notre continent Africain 
  52.                             et de sensibiliser la population sur les méfaits de ces derniers afin d’éviter leurs pollutions.
  53.                             Elle accepte les contenants d’eau, de jus ou de boissons (vides) usagés et restitue une récompense 
  54.                             à l’utilisateur en fonction de ses points cumulés. <br><br>
  55.                             Suite à un dispositif approprié, BUJU PLAST, notre système conçu est une machine intelligente pour
  56.                             trier, collecter, broyer et ainsi faciliter la transformation en copeaux du plastique en polyéthylène
  57.                             favorisant ainsi la collecte massive et le stockage de ce dernier. Dans le cadre du recyclage il
  58.                             permettra également de sensibiliser la population sur les méfaits des déchets plastiques tout en
  59.                             réduisant cette pollution qu’elles engendrent. En même temps il évite à l’homme toute sorte de tâches
  60.                             répétitives ou dangereuses dans le domaine du recyclage afin de lui faciliter un peu plus le travail. 
  61.                             Des distributeurs de lait-café et de jus locaux sont intégrés à la machine contribuant à la rétribution 
  62.                             des utilisateurs pour les inciter à pratiquer ce geste noble du recyclage.                              
  63.                         </p>
  64.                         
  65.                     </div>
  66.                     <!-- Blog Detail End -->
  67.  
  68.                 </div>
  69.     
  70.                 <!-- Sidebar Start -->
  71.                 <div class="col-lg-4">
  72.                     <!-- Search Form Start -->
  73.                     <div class="mb-5 wow slideInUp" data-wow-delay="0.1s">
  74.                         <div class="input-group">
  75.                             <input type="text" class="form-control p-3" placeholder="Keyword">
  76.                             <button class="btn btn-primary px-4"><i class="bi bi-search"></i></button>
  77.                         </div>
  78.                     </div>
  79.                     <!-- Search Form End -->
  80.     
  81.                     <!-- Category Start -->
  82.                     <div class="mb-5 wow slideInUp" data-wow-delay="0.1s">
  83.                         <div class="section-title section-title-sm position-relative pb-3 mb-4">
  84.                             <h3 class="mb-0">Categories</h3>
  85.                         </div>
  86.                         <div class="link-animated d-flex flex-column justify-content-start">
  87.                             <a class="h5 fw-semi-bold bg-light rounded py-2 px-3 mb-2" href="#"><i class="bi bi-arrow-right me-2"></i>Application web</a>
  88.                             <a class="h5 fw-semi-bold bg-light rounded py-2 px-3 mb-2" href="#"><i class="bi bi-arrow-right me-2"></i>Application moblie</a>
  89.                             <a class="h5 fw-semi-bold bg-light rounded py-2 px-3 mb-2" href="#"><i class="bi bi-arrow-right me-2"></i>Réalisation carte électronique</a>
  90.                             <a class="h5 fw-semi-bold bg-light rounded py-2 px-3 mb-2" href="#"><i class="bi bi-arrow-right me-2"></i>IOT</a>
  91.                             <a class="h5 fw-semi-bold bg-light rounded py-2 px-3 mb-2" href="#"><i class="bi bi-arrow-right me-2"></i>Système embrquée</a>
  92.                         </div>
  93.                     </div>
  94.                     <!-- Category End -->
  95.     
  96.                     <!-- Recent Post Start -->
  97.                     <div class="mb-5 wow slideInUp" data-wow-delay="0.1s">
  98.                         <div class="section-title section-title-sm position-relative pb-3 mb-4">
  99.                             <h3 class="mb-0">Postes récents</h3>
  100.                         </div>
  101.                         <div class="d-flex rounded overflow-hidden mb-3">
  102.                             <img class="img-fluid" src="{{asset('assets/img/bloc1.jpg')}}" style="width: 100px; height: 100px; object-fit: cover;" alt="">
  103.                             <a href="" class="h5 fw-semi-bold d-flex align-items-center bg-light px-3 mb-0">Nautx Eca Hackathon
  104.                             </a>
  105.                         </div>
  106.                         <div class="d-flex rounded overflow-hidden mb-3">
  107.                             <img class="img-fluid" src="{{asset('assets/img/bloc2.png')}}" style="width: 100px; height: 100px; object-fit: cover;" alt="">
  108.                             <a href="" class="h5 fw-semi-bold d-flex align-items-center bg-light px-3 mb-0">om22 Coding Camp Sénégal
  109.                             </a>
  110.                         </div>
  111.                         <div class="d-flex rounded overflow-hidden mb-3">
  112.                             <img class="img-fluid" src="{{asset('assets/img/tolukeur.jpg')}}" style="width: 100px; height: 100px; object-fit: cover;" alt="">
  113.                             <a href="" class="h5 fw-semi-bold d-flex align-items-center bg-light px-3 mb-0">TOOLU KËR
  114.                             </a>
  115.                         </div>
  116.                     </div>
  117.                     <!-- Recent Post End -->
  118.     
  119.                     <!-- Image Start -->
  120.                     <div class="mb-5 wow slideInUp" data-wow-delay="0.1s">
  121.                         <img src="img/blog-1.jpg" alt="" class="img-fluid rounded">
  122.                     </div>
  123.                     <!-- Image End -->
  124.     
  125.                     <!-- Tags Start -->
  126.                     <div class="mb-5 wow slideInUp" data-wow-delay="0.1s">
  127.                         <div class="section-title section-title-sm position-relative pb-3 mb-4">
  128.                             <h3 class="mb-0">Tag Cloud</h3>
  129.                         </div>
  130.                         <div class="d-flex flex-wrap m-n1">
  131.                             <a href="" class="btn btn-light m-1">Design</a>
  132.                             <a href="" class="btn btn-light m-1">Development</a>
  133.                             <a href="" class="btn btn-light m-1">Marketing</a>
  134.                             <a href="" class="btn btn-light m-1">SEO</a>
  135.                             <a href="" class="btn btn-light m-1">Writing</a>
  136.                             <a href="" class="btn btn-light m-1">Consulting</a>
  137.                         </div>
  138.                     </div>
  139.                     <!-- Tags End -->
  140.                 </div>
  141.                 <!-- Sidebar End -->
  142.             </div>
  143.         </div>
  144.     </div>
  145.     <!-- Blog End -->
  148.     <!-- Vendor Start -->
  149.     <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
  150.         <div class="container py-5 mb-5">
  151.             <div class="bg-white">
  152.                 <div class="owl-carousel vendor-carousel">
  153.                     <img src="{{asset('assets/img/logoAG.png')}}" alt="">
  154.                     <img src="{{asset('assets/img/badis.png')}}" alt="">
  155.                     <img src="{{asset('assets/img/sabs.png')}}" alt="">
  156.                     <img src="{{asset('assets/img/millenium.png')}}" alt="">
  157.                     <img src="{{asset('assets/img/tolukeurlogo.png')}}" alt="">
  158.                     <img src="{{asset('assets/img/yaxanallogo.png')}}" alt="">
  159.                 </div>
  160.             </div>
  161.         </div>
  162.     </div>
  163.     <!-- Vendor End -->
  165. {% endblock %}