templates/contact/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block stylesheets %}
  3.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  4.     <link rel="stylesheet" href="{{ asset('contactform/css/style.css') }}">
  5.     <style>
  6.         .ftco-section {
  7.             padding: 15em 6em;
  8.         }
  9.         .container {
  10.             max-width: 1440px!important;
  11.         }
  13.         .main_nav_item a {
  14.             font-family: 'Open Sans', sans-serif;
  15.             font-size: 15px;
  16.             font-weight: 700;
  17.             color: #0093a9!important;
  18.             text-transform: uppercase;
  19.             padding-bottom: 10px;
  20.             padding-top: 10px;
  21.         }
  22.         .main_nav_item::after {
  23.             display: block;
  24.             position: absolute;
  25.             left: -1px;
  26.             bottom: -11px;
  27.             width: calc(100% + 2px);
  28.             height: 2px;
  29.             background: linear-gradient(to right, #b29b63, #0093a9)!important;
  30.             content: '';
  31.             opacity: 0;
  32.             -webkit-transition: all 200ms ease;
  33.             -moz-transition: all 200ms ease;
  34.             -ms-transition: all 200ms ease;
  35.             -o-transition: all 200ms ease;
  36.             transition: all 200ms ease;
  37.         }
  39.         p a{
  40.             border-bottom:none!important;
  41.         }
  43.         p a:hover{
  44.             background:none!important;
  45.         }
  46.         
  47.         .dbox p a {
  48.             color: #0093a9;
  49.         } 
  50.         .dbox .icon {
  51.             background: #b29b63;
  52.         }
  53.         @media all and (max-width: 767px) {
  54.         .ftco-section{
  55.         padding-left:0px;
  56.         padding-right:0px;
  57.         }
  58.         }
  59.     </style>
  61. {% endblock %}
  62. {% block body %}
  63. <section class="ftco-section">
  64.     <div class="container">
  65.         <div class="row justify-content-center">
  66.             <div class="col-md-12">
  67.                 <div class="wrapper">
  68.                     <div class="row no-gutters mb-5">
  69.                         <div class="col-md-7">
  70.                             <div class="contact-wrap w-100 p-md-5 p-4">
  71.                                 <h3 class="mb-4">Contact</h3>
  72.                                 <div id="form-message-warning" class="mb-4"></div>
  73.                                 <div id="form-message-success" class="mb-4">
  74.                                     Your message was sent, thank you!
  75.                                 </div>
  76.                                 {{ form_start(form,{'attr':{'id':'contactForm','class':'contactForm','name':'contactForm'}})}}
  77.                                     <div class="row">
  78.                                         <div class="col-md-6">
  79.                                             <div class="form-group">
  80.                                                 <label class="label" for="name">Nom & Prénom</label>
  81.                                                 {{ form_widget(form.fullname,{'attr':{'class':'form-control','id':'name','name':'name','placeholder':'Nom & Prénom'}}) }}
  82.                                             </div>
  83.                                         </div>
  84.                                         <div class="col-md-6">
  85.                                             <div class="form-group">
  86.                                                 <label class="label" for="email">Email Adresse</label>
  87.                                                 {{ form_widget(form.email,{'attr':{'class':'form-control','id':'email','name':'email','placeholder':'Email Adresse'}}) }}
  88.                                             </div>
  89.                                         </div>
  90.                                         <div class="col-md-12">
  91.                                             <div class="form-group">
  92.                                                 <label class="label" for="subject">Sujet</label>
  93.                                                 {{ form_widget(form.sujet,{'attr':{'class':'form-control','id':'subject','name':'subject','placeholder':'Sujet'}}) }}
  94.                                             </div>
  95.                                         </div>
  96.                                         <div class="col-md-12">
  97.                                             <div class="form-group">
  98.                                                 <label class="label" for="#">Message</label>
  99.                                                 {{ form_widget(form.message,{'attr':{'class':'form-control','cols':'30','rows':'4','id':'message','name':'message','placeholder':'Message'}}) }}
  101.                                             </div>
  102.                                         </div>
  103.                                         <div class="col-md-12">
  104.                                             <div class="form-group">
  105.                                                 {{ form_widget(form.submit,{'attr':{'class':'btn btn-primary','value':'Send Message','style':'width:40%;background:#0093a9!important;border-color:#0093a9!important;'}}) }}
  106.                                                 <div class="submitting"></div>
  107.                                             </div>
  108.                                         </div>
  109.                                     </div>
  110.                                 {{ form_end(form) }}
  111.                             </div>
  112.                         </div>
  113.                         <div class="col-md-5 d-flex align-items-stretch">
  114.                             <div id="map">
  115.                             </div>
  116.                         </div>
  117.                     </div>
  118.                     <div class="row">
  119.                         <div class="col-md-3">
  120.                             <div class="dbox w-100 text-center">
  121.                                 <div class="icon d-flex align-items-center justify-content-center">
  122.                                     <span class="fa fa-map-marker"></span>
  123.                                 </div>
  124.                                 <div class="text">
  125.                                     <p style="color:#0093a9">Immeuble omrane, bloc b 1er étage , rue lac leman, Les Berges du Lac 1, Tunis 1053</p>
  126.                                 </div>
  127.                             </div>
  128.                         </div>
  129.                         <div class="col-md-3">
  130.                             <div class="dbox w-100 text-center">
  131.                                 <div class="icon d-flex align-items-center justify-content-center">
  132.                                     <span class="fa fa-phone"></span>
  133.                                 </div>
  134.                                 <div class="text">
  135.                                     <p style="color:#0093a9"><a href="tel://0021672238880" style:"text-decoration:none!important;color:#0093a9;">(+216) 72 238 880</a></p>
  136.                                 </div>
  137.                             </div>
  138.                         </div>
  139.                         <div class="col-md-3">
  140.                             <div class="dbox w-100 text-center">
  141.                                 <div class="icon d-flex align-items-center justify-content-center">
  142.                                     <span class="fa fa-paper-plane"></span>
  143.                                 </div>
  144.                                 <div class="text">
  145.                                     <p style="color:#0093a9"><a href="mailto:reservation@rusticavoyages.com" style:"text-decoration:none!important;color:#0093a9;">reservation@rusticavoyages.com</a></p>
  146.                                 </div>
  147.                             </div>
  148.                         </div>
  149.                         <div class="col-md-3">
  150.                             <div class="dbox w-100 text-center">
  151.                                 <div class="icon d-flex align-items-center justify-content-center">
  152.                                     <span class="fa fa-clock-o"></span>
  153.                                 </div>
  154.                                 <div class="text">
  155.                                     <p style="color:#0093a9" >
  156.                                         Lundi - samedi <br/>
  157.                                         9h00 - 18h00
  158.                                     </p>
  159.                                 </div>
  160.                             </div>
  161.                         </div>
  162.                     </div>
  163.                 </div>
  164.             </div>
  165.         </div>
  166.     </div>
  167. </section>
  168.     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDts9C9iWNF83ExezBXJLIJ0g2dwoERg08&callback=initMap"></script>
  169.     <script src="{{ asset('contactform/js/google-map.js') }}"></script>
  170. {% endblock %}