templates/contact/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Nous contacter - Millenium'{% endblock %}
  5. {% block body %}
  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">Contactez-nous</h1>
  10.                     <a href="" class="h5 text-white">Accuiel</a>
  11.                     <i class="far fa-circle text-white px-2"></i>
  12.                     <a href="" class="h5 text-white">Contact</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.     <!-- Contact Start -->
  40.     <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
  41.         <div class="container py-5">
  42.             <div class="section-title text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
  43.                 <h5 class="fw-bold text-primary text-uppercase">Contactez-nous</h5>
  44.                 <h1 class="mb-0">Si vous avez des questions contactez nous</h1>
  45.             </div>
  46.             <div class="row g-5 mb-5">
  47.                 <div class="col-lg-4">
  48.                     <div class="d-flex align-items-center wow fadeIn" data-wow-delay="0.1s">
  49.                         <div class="bg-primary d-flex align-items-center justify-content-center rounded" style="width: 60px; height: 60px;">
  50.                             <i class="fa fa-phone-alt text-white"></i>
  51.                         </div>
  52.                         <div class="ps-4">
  53.                             <h5 class="mb-2">Appelez-nous pout tous questions</h5>
  54.                             <h4 class="text-primary mb-0">+221 77 135 20 29</h4>
  55.                         </div>
  56.                     </div>
  57.                 </div>
  58.                 <div class="col-lg-4">
  59.                     <div class="d-flex align-items-center wow fadeIn" data-wow-delay="0.4s">
  60.                         <div class="bg-primary d-flex align-items-center justify-content-center rounded" style="width: 60px; height: 60px;">
  61.                             <i class="fa fa-envelope-open text-white"></i>
  62.                         </div>
  63.                         <div class="ps-4">
  64.                             <h5 class="mb-2">Envoyez un mail</h5>
  65.                             <h4 class="text-primary mb-0">contact@nautx.sn</h4>
  66.                         </div>
  67.                     </div>
  68.                 </div>
  69.                 <div class="col-lg-4">
  70.                     <div class="d-flex align-items-center wow fadeIn" data-wow-delay="0.8s">
  71.                         <div class="bg-primary d-flex align-items-center justify-content-center rounded" style="width: 60px; height: 60px;">
  72.                             <i class="fa fa-map-marker-alt text-white"></i>
  73.                         </div>
  74.                         <div class="ps-4">
  75.                             <h5 class="mb-2">Notre adresse</h5>
  76.                             <h4 class="text-primary mb-0">Sacré Coeur 3 Extension, Dakar, Sénégal</h4>
  77.                         </div>
  78.                     </div>
  79.                 </div>
  80.             </div>
  81.             <div class="row g-5">
  82.                 <div class="col-lg-6 wow slideInUp" data-wow-delay="0.3s">
  83.                         <div class="row g-3">
  84.                             {{form(form)}}
  85.                         </div>
  86.                  </div>
  87.                 <div class="col-lg-6 wow slideInUp" data-wow-delay="0.6s">
  88.                     <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7718.6061744344815!2d-17.45004301488263!3d14.695444471129752!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xec172f06cbd3279%3A0x72faa24d3a9b5438!2sColobane%2C%20Dakar!5e0!3m2!1sfr!2ssn!4v1715163918457!5m2!1sfr!2ssn" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  89.                 </div>
  90.             </div>
  91.         </div>
  92.     </div>
  93.     <!-- Contact End -->    
  94.     {% for message in app.flashes('notice') %}
  95.     <div class="alert alert-success">
  96.         {{ message }}
  97.     </div>
  98.     {% endfor %}
  99. {% endblock %}