templates/front/_partials/contact.html.twig line 1

  1. <section
  2.   class="section pb-0 bg-light"
  3.   id="contact"
  4.   style="padding-bottom: 100px !important"
  5. >
  6.   <div class="container px-0">
  7.     <div class="row">
  8.       <div class="col-lg-3 col-md-6 col-12">
  9.         <div class="contact-detail d-flex align-items-center">
  10.           <div class="contact-icon rounded-circle bg-primary text-center">
  11.             <svg
  12.               xmlns="http://www.w3.org/2000/svg"
  13.               width="24"
  14.               height="24"
  15.               viewbox="0 0 24 24"
  16.               fill="none"
  17.               stroke="currentColor"
  18.               stroke-width="2"
  19.               stroke-linecap="round"
  20.               stroke-linejoin="round"
  21.               class="feather feather-phone fea icon-md-md text-white"
  22.             >
  23.               <path
  24.                 d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
  25.               ></path>
  26.             </svg>
  27.           </div>
  28.           <div class="content ms-3">
  29.             <h5 class="title mb-0">
  30.               {% trans %} Tél {% endtrans %} / {% trans %}WA{% endtrans %} / {%
  31.               trans %}Viber{% endtrans %}
  32.             </h5>
  33.             <a href="tel:+213792180455" class="text-primary"
  34.               >+213 783 906 075</a
  35.             >
  36.           </div>
  37.         </div>
  38.       </div>
  39.       <!--end col-->
  41.       <div class="col-lg-3 col-md-6 col-12 mt-4 mt-sm-0 pt-2 pt-sm-0">
  42.         <div class="contact-detail d-flex align-items-center">
  43.           <div class="contact-icon rounded-circle bg-primary text-center">
  44.             <svg
  45.               xmlns="http://www.w3.org/2000/svg"
  46.               width="24"
  47.               height="24"
  48.               viewbox="0 0 24 24"
  49.               fill="none"
  50.               stroke="currentColor"
  51.               stroke-width="2"
  52.               stroke-linecap="round"
  53.               stroke-linejoin="round"
  54.               class="feather feather-mail fea icon-md-md text-white"
  55.             >
  56.               <path
  57.                 d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
  58.               ></path>
  59.               <polyline points="22,6 12,13 2,6"></polyline>
  60.             </svg>
  61.           </div>
  62.           <div class="content ms-3">
  63.             <h5 class="title mb-0">{% trans %} Email {% endtrans %}</h5>
  64.             <a href="mailto:[email protected]" class="text-primary"
  65.               >[email protected]</a
  66.             >
  67.           </div>
  68.         </div>
  69.       </div>
  70.       <!--end col-->
  72.       <div class="col-lg-3 col-md-6 col-12 mt-4 mt-lg-0 pt-2 pt-lg-0">
  73.         <div class="contact-detail d-flex align-items-center">
  74.           <div class="contact-icon rounded-circle bg-primary text-center">
  75.             <svg
  76.               xmlns="http://www.w3.org/2000/svg"
  77.               width="24"
  78.               height="24"
  79.               viewbox="0 0 24 24"
  80.               fill="none"
  81.               stroke="currentColor"
  82.               stroke-width="2"
  83.               stroke-linecap="round"
  84.               stroke-linejoin="round"
  85.               class="feather feather-facebook fea icon-md-md fea-social text-white"
  86.             >
  87.               <path
  88.                 d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"
  89.               ></path>
  90.             </svg>
  91.           </div>
  92.           <div class="content ms-3">
  93.             <h5 class="title mb-0">Facebook</h5>
  94.             <a
  95.               target="_blank"
  96.               href="https://www.facebook.com/clevernursery"
  97.               class="video-play-icon text-primary"
  98.             >
  99.               @clevernursery
  100.             </a>
  101.           </div>
  102.         </div>
  103.       </div>
  104.       <!--end col-->
  106.       <div class="col-lg-3 col-md-6 col-12 mt-4 mt-lg-0 pt-2 pt-lg-0">
  107.         <div class="contact-detail d-flex align-items-center">
  108.           <div class="contact-icon rounded-circle bg-primary text-center">
  109.             <svg
  110.               xmlns="http://www.w3.org/2000/svg"
  111.               width="24"
  112.               height="24"
  113.               viewbox="0 0 24 24"
  114.               fill="none"
  115.               stroke="currentColor"
  116.               stroke-width="2"
  117.               stroke-linecap="round"
  118.               stroke-linejoin="round"
  119.               class="feather feather-instagram fea icon-md-md fea-social text-white"
  120.             >
  121.               <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
  122.               <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
  123.               <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
  124.             </svg>
  125.           </div>
  126.           <div class="content ms-3">
  127.             <h5 class="title mb-0">Instagram</h5>
  128.             <a
  129.               target="_blank"
  130.               href="https://www.instagram.com/clevernursery/"
  131.               class="video-play-icon text-primary"
  132.             >
  133.               @clevernursery
  134.             </a>
  135.           </div>
  136.         </div>
  137.       </div>
  138.       <!--end col-->
  139.     </div>
  140.     <!--end row-->
  142.     <div class="row align-items-center">
  143.       <div class="col-md-6 order-md-1 order-2 mt-md-5 mt-4 pt-2">
  144.         <div class="me-lg-5">
  145.           <img src="/front/images/Programming.svg" class="img-fluid" alt="" />
  146.         </div>
  147.       </div>
  148.       <!--end col-->
  150.       <div class="col-md-6 order-md-2 order-1 mt-md-5 mt-4 pt-2">
  151.         <div class="custom-form mt-3 p-4 shadow rounded">
  152.           <form method="post" action="{{ path('contact') }}">
  153.             <input type="hidden" name="token" value="" />
  154.             <p id="error-msg"></p>
  155.             <div id="simple-msg"></div>
  156.             <div class="row">
  157.               <div class="col-md-6">
  158.                 <div class="mb-3">
  159.                   <label class="form-label">
  160.                     {% trans %} Your name {% endtrans %}
  161.                     <span class="text-danger">*</span>
  162.                   </label>
  163.                   <input
  164.                     name="name"
  165.                     id="name"
  166.                     type="text"
  167.                     class="form-control"
  168.                     required
  169.                     placeholder="Nom complet :"
  170.                   />
  171.                 </div>
  172.               </div>
  174.               <div class="col-md-6">
  175.                 <div class="mb-3">
  176.                   <label class="form-label">
  177.                     {% trans %} Your email {% endtrans %}
  178.                     <span class="text-danger">*</span>
  179.                   </label>
  180.                   <input
  181.                     name="email"
  182.                     id="email"
  183.                     type="email"
  184.                     class="form-control"
  185.                     required
  186.                     placeholder="Email :"
  187.                   />
  188.                 </div>
  189.               </div>
  190.               <!--end col-->
  192.               <div class="col-12">
  193.                 <div class="mb-3">
  194.                   <label class="form-label">
  195.                     {% trans %} Subject {% endtrans %}
  196.                     <span class="text-danger">*</span>
  197.                   </label>
  198.                   <input
  199.                     name="subject"
  200.                     id="subject"
  201.                     class="form-control"
  202.                     required
  203.                     placeholder="Sujet :"
  204.                   />
  205.                 </div>
  206.               </div>
  207.               <!--end col-->
  209.               <div class="col-12">
  210.                 <div class="mb-3">
  211.                   <label class="form-label">
  212.                     {% trans %} Message {% endtrans %}
  213.                     <span class="text-danger">*</span>
  214.                   </label>
  215.                   <textarea
  216.                     name="comments"
  217.                     id="comments"
  218.                     rows="4"
  219.                     class="form-control"
  220.                     required
  221.                     placeholder="Message :"
  222.                   ></textarea>
  223.                 </div>
  224.               </div>
  225.             </div>
  226.             <div class="row">
  227.               <div class="col-12">
  228.                 <div class="d-grid">
  229.                   <button
  230.                     type="submit"
  231.                     id="submit"
  232.                     name="send"
  233.                     class="btn btn-primary"
  234.                   >
  235.                     {% trans %} Send the message {% endtrans %}
  236.                   </button>
  237.                 </div>
  238.               </div>
  239.               <!--end col-->
  240.             </div>
  241.             <!--end row-->
  242.           </form>
  243.         </div>
  244.         <!--end custom-form-->
  245.       </div>
  246.       <!--end col-->
  247.     </div>
  248.     <!--end row-->
  249.   </div>
  250.   <!--end container-->
  251. </section>