templates/page-contact.html.twig line 1

Open in your IDE?
  1. {% extends 'parent.html.twig' %}
  3. {% block stylesheets %}
  4.     {{ parent() }}
  5. <style>
  6. .contact_icon_box{
  7.   position: relative;
  8. }
  9. .contact_icon_box .icon{
  10.   background-color: rgba(0, 97, 223, .03);
  11.   border-radius: 50%;
  12.   height: 70px;
  13.   line-height: 70px;
  14.   margin-right: 20px;
  15.   text-align: center;
  16.   width: 70px;
  17. }
  18. .contact_icon_box .icon span{
  19.   color: #ec1e28;
  20.   font-size: 24px;
  21. }
  22. .contact_icon_box .details .title{
  23.   font-size: 16px;
  24.   line-height: 24px;
  25.   font-weight: 600;
  26. }
  27. .contact_icon_box .details p{
  28.   font-size: 14px;
  29.   line-height: 30px;
  30. }
  32. </style>
  33. {% endblock %}
  35. {% block body %}
  37.     <!-- Inner Page Breadcrumb -->
  38.     <section class="inner_page_breadcrumb">
  39.         <div class="container">
  40.             <div class="row justify-content-center">
  41.                 <div class="col-xl-6">
  42.                     <div class="breadcrumb_content">
  43.                         <h2 class="breadcrumb_title">Contact Us</h2>
  44.                         <ol class="breadcrumb">
  45.                         <li class="breadcrumb-item"><a href="#">Home</a></li>
  46.                         <li class="breadcrumb-item active" aria-current="page">Contact Us</li>
  47.                         </ol>
  48.                     </div>
  49.                 </div>
  50.             </div>
  51.         </div>
  52.     </section>
  54.     <!-- Our Contact -->
  55.   <section class="our-contact">
  56.     <div class="container">
  57.       <div class="row">
  58.         <div class="col-lg-6 offset-lg-3">
  59.           <div class="main-title text-center">
  60.             <h2>On attend de vos nouvelles !</h2>
  61.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  62.           </div>
  63.         </div>
  64.       </div>
  65.       <div class="row justify-content-center">
  66.         <div class="col-md-6 col-lg-4 col-xl-3 pr0 pl0 plpr15-lg">
  67.           <div class="contact_icon_box mb50">
  68.             <div class="icon float-left"><span class="flaticon-map"></span></div>
  69.             <div class="details">
  70.               <h5 class="title">Adresse</h5>
  71.               <p>Rue du Pont Alsort, 36<br>6640 Froidchapelle, Belgique.</p>
  72.             </div>
  73.           </div>
  74.         </div>
  75.         <div class="col-md-6 col-lg-4 col-xl-3">
  76.           <div class="contact_icon_box mb50">
  77.             <div class="icon float-left"><span class="flaticon-phone"></span></div>
  78.             <div class="details">
  79.               <h5 class="title">Contact</h5>
  80.               <p>Mobile: 123 456 7890<br>Mail: support@houzing.com</p>
  81.             </div>
  82.           </div>
  83.         </div>
  84.         <div class="col-md-6 col-lg-4 col-xl-3 pr0 pl0 plpr15-lg">
  85.           <div class="contact_icon_box mb50">
  86.             <div class="icon float-left"><span class="flaticon-clock"></span></div>
  87.             <div class="details">
  88.               <h5 class="title">Hour of operation</h5>
  89.               <p>Monday - Friday: 09:00 - 20:00<br>Sunday & Saturday: 10:30 - 22:00</p>
  90.             </div>
  91.           </div>
  92.         </div>
  93. {#         <div class="col-lg-12">
  94.           <div class="h550" id="map-canvas"></div>
  95.         </div> #}
  96.         <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2556.404108719006!2d4.334795416103686!3d50.15357847943545!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c21a5ab1da62bd%3A0x79c4587a2d103ec5!2sRue%20du%20Pont%20Alsort%2036%2C%206440%20Froidchapelle!5e0!3m2!1sfr!2sbe!4v1649852962743!5m2!1sfr!2sbe" width="600" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  97.       </div>
  98.       <div class="row justify-content-center">
  99.         <div class="col-lg-8">
  100.           <div class="form_grid mt100">
  101.             <h2 class="text-center mb50">Envoyez-nous un mail</h2>
  102.             <form class="contact_form" name="contact_form" action="/contact/email" method="post">
  103.               <div class="row">
  104.                 <div class="col-md-6">
  105.                   <div class="form-group">
  106.                     <input name="name" class="form-control" required="required" type="text" placeholder="Nom">
  107.                   </div>
  108.                 </div>
  109.                 <div class="col-md-6">
  110.                   <div class="form-group">
  111.                     <input name="email" class="form-control required email" required="required" type="email" placeholder="Email">
  112.                   </div>
  113.                 </div>
  114.                 <div class="col-sm-12">
  115.                   <div class="form-group">
  116.                     <textarea name="message" class="form-control required" rows="6" required="required" placeholder="Entrez votre message"></textarea>
  117.                   </div>
  118.                   <div class="form-group mb0">
  119.                     <button type="submit" class="btn btn-thm">ENVOYER</button>
  120.                   </div>
  121.                 </div>
  122.               </div>
  123.             </form>
  124.           </div>
  125.         </div>
  126.       </div>
  127.     </div>
  128.   </section>
  130.     <!-- Our Footer -->
  131.   <section class="footer_one home1">
  132.     <div class="container pt10 pb30">
  133.       <div class="row">
  134.         <div class="col-md-4 col-lg-4">
  135.           <div class="copyright-widget mt10 mb15-767" style="display: flex; flex-direction: row; justify-content: center;">
  136.             <li class="list-inline-item list_s"><a href="#" class="btn" data-toggle="modal" data-target="#logInModal"><span class="flaticon-user" style="color: white;"></span></a></li>
  137.             <p>| © 2022 Pubup | Developed by <a href="https://wecodx.com/" target="_blank">Wecodx.</a></p>
  138.           </div>
  139.         </div>
  140.         <div class="col-md-4 col-lg-4">
  141.           <div class="footer_logo_widget text-center mb15-767">
  142.             <div class="wrapper">
  143.               <div class="logo text-center"> <img src="/assets/images/footer-logo.svg" alt="footer-logo.svg"> <span class="logo_title text-white pl15">Houzing</span> </div>
  144.             </div>
  145.           </div>
  146.         </div>
  147.         <div class="col-md-4 col-lg-4">
  148.           <div class="footer_menu_widget text-right tac-md mt15">
  149.             <ul>
  150.               <li class="list-inline-item"><a href="/">Accueil</a></li>
  151.               <li class="list-inline-item"><a href="/listing-panels">Nos Panneaux</a></li>
  152.               <li class="list-inline-item"><a href="/about-us">Notre Équipe</a></li>
  153.               <li class="list-inline-item"><a href="/contact">Contact</a></li>
  154.             </ul>
  155.           </div>
  156.         </div>
  157.       </div>
  158.     </div>
  159.   </section>
  160. <a class="scrollToHome" href="#"><i class="fa fa-angle-up"></i></a>
  161. </div>
  163. {% endblock %}
  165. {% block footer %}
  168. {% endblock %}
  169. {% block javascripts %}
  171. <script src="/assets/js/jquery-3.6.0.js"></script>
  172. <script src="/assets/js/jquery-migrate-3.0.0.min.js"></script>
  173. <script src="/assets/js/popper.min.js"></script>
  174. <script src="/assets/js/bootstrap.min.js"></script>
  175. <script src="/assets/js/jquery.mmenu.all.js"></script>
  176. <script src="/assets/js/ace-responsive-menu.js"></script>
  177. <script src="/assets/js/bootstrap-select.min.js"></script>
  178. <script src="/assets/js/snackbar.min.js"></script>
  179. <script src="/assets/js/simplebar.js"></script>
  180. <script src="/assets/js/parallax.js"></script>
  181. <script src="/assets/js/scrollto.js"></script>
  182. <script src="/assets/js/jquery-scrolltofixed-min.js"></script>
  183. <script src="/assets/js/jquery.counterup.js"></script>
  184. <script src="/assets/js/wow.min.js"></script>
  185. <script src="/assets/js/progressbar.js"></script>
  186. <script src="/assets/js/slider.js"></script>
  187. <script src="/assets/js/timepicker.js"></script>
  188. <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAAz77U5XQuEME6TpftaMdX0bBelQxXRlM&callback=initMap"></script>
  189. <script src="/assets/js/googlemaps1.js"></script>
  190. <!-- Custom script for all pages --> 
  191. <script src="/assets/js/script.js"></script>
  193. {% endblock %}