templates/frontoffice_bundle/utilisateur/contact.html.twig line 1

  1. {% extends "frontoffice_bundle/base.html.twig" %}
  2. {% block body %}
  3. <style>
  4. .page-header {
  5.     background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("{{ asset("/bundles/Frontoffice/img/contact2.jpg")}}");
  6.     background-position: top;
  7.     background-repeat: no-repeat;
  8.     background-size: cover;
  9. }
  10. </style>
  11.     <!-- Contact Start -->
  12.         <div class="container-fluid page-header py-5">
  13.             <h1 class="text-center text-white display-6">Contact</h1>
  14.             <ol class="breadcrumb justify-content-center mb-0">
  15.                 <li class="breadcrumb-item"><a href="/">Acceuil</a></li>
  16.                 <li class="breadcrumb-item active text-white">Contact</li>
  17.             </ol>
  18.         </div>
  19.         <!-- Contact Start -->
  20.         <div class="container-fluid contact ">
  21.             <div class="container pt-5">
  22.                 <div class="p-5 bg-light rounded">
  23.                     <div class="row g-4">
  25.                         <div class="col-lg-12">
  26.                             <div class="h-100 rounded">
  27.                                <iframe class="rounded w-100" style="height: 400px;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13244.853746826782!2d-6.838773903526855!3d34.02088216487969!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xda7488e685a91fd%3A0xb02569f1a94982fe!2sRabat%2C%20Morocco!5e0!3m2!1sen!2sbd!4v1694321047175!5m2!1sen!2sbd" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  29.                             </div>
  30.                         </div>
  31.                         <div class="col-lg-7">
  32.                             <form id="main-contact-form" class="contact-form row" name="contact-form" method="post">
  33.                                 <input type="text" name="name" class="w-100 form-control border-0 py-3 mb-4" placeholder="Nom">
  34.                                 <input type="email" name="email" class="w-100 form-control border-0 py-3 mb-4" placeholder="Email">
  35.                                 <input type="text" name="subject" class="w-100 form-control border-0 py-3 mb-4" required="required" placeholder="Sujet">
  36.                                 <textarea name="message" id="message"  class="w-100 form-control border-0 mb-4" rows="5" cols="10" placeholder="Message"></textarea>
  37.                                 <button class="w-100 btn form-control border-secondary py-3 bg-white text-primary " type="submit">Envoyer</button>
  38.                             </form>
  40.                         </div>
  41.                         <div class="col-lg-5">
  42.                             <div class="d-flex p-4 rounded mb-4 bg-white">
  43.                                 <i class="fas fa-map-marker-alt fa-2x text-primary me-4"></i>
  44.                                 <div>
  45.                                     <h4>Address</h4>
  46.                                     <p class="mb-2">Rabat hassan</p>
  47.                                 </div>
  48.                             </div>
  49.                             <div class="d-flex p-4 rounded mb-4 bg-white">
  50.                                 <i class="fas fa-envelope fa-2x text-primary me-4"></i>
  51.                                 <div>
  52.                                     <h4>Email</h4>
  53.                                     <p class="mb-2">contact@epicerie.com</p>
  54.                                 </div>
  55.                             </div>
  56.                             <div class="d-flex p-4 rounded bg-white">
  57.                                 <i class="fa fa-phone-alt fa-2x text-primary me-4"></i>
  58.                                 <div>
  59.                                     <h4>Télephone</h4>
  60.                                     <p class="mb-2">+212 5 37 55 66 77</p>
  61.                                 </div>
  62.                             </div>
  63.                         </div>
  64.                     </div>
  65.                 </div>
  66.             </div>
  67.         </div>
  68.         <!-- Contact End -->
  70.         <!-- Contact End -->
  71. {% endblock %}
  72. {% block js %}
  73.     {# <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&?key=AIzaSyAJ3jJCgboHIki8QVPtmkJ81MtPWXlKYCE"></script> #}
  74.     <script src="https://maps.google.com/maps/api/js?sensor=true&?key=YOUR_API_KEY"></script>
  75.     <script type="text/javascript" src="{{ asset("bundles/Frontoffice/js/gmaps.js") }}"></script>
  76.     <script src="{{ asset("bundles/Frontoffice/js/contact.js") }}"></script>
  77. {% endblock %}