templates/Theme/Produit/Service/Message/contactus.html.twig line 1

Open in your IDE?
  1. {% extends "Theme/Users/User/layouthome.html.twig" %}
  3. {% block meta %}
  4.     {{ parent() }}
  5.     <meta name="keywords" content="{{ site }}, Business, Innovation,Administration"/>
  6.     <meta name="author" content="Noel Kenfack"/>
  7.     <meta name="description" content="{{ site }} | Nous contacter"/>
  8. {% endblock %}
  10. {% block title %}
  11.     {{ parent() }} - Nous contacter
  12. {% endblock %}
  14. {% block stylesheets %}
  15.     {{ parent() }}
  16. {% endblock %}
  18. {% block userblog_body %}
  20. <style>
  22. ul {
  23.   list-style: none;
  24. }
  26. input {
  27.   overflow: hidden;
  28. }
  30. .section-title {
  31.   position: relative;
  32.   font-size: 30px;
  33.   font-weight: 600;
  34.   font-family: "Poppins", sans-serif;
  35.   margin: 0 0 35px;
  36. }
  38. .sec-pad {
  39.   padding: 60px 0 0;
  40.   margin: 50px 0;
  41. }
  43. .contact-sec {
  44.   align-item: center;
  45.   display: flex;
  46.   background-color: #5cbde466;
  47. }
  49. .contact-sec .contact-ul li,
  50. .contact-ul b {
  51.   font-size: 20px;
  52.   margin: 10px 0;
  53.   font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  54.   word-wrap: break-word;
  55. }
  57. .contact-sec .contact-ul i {
  58.   font-size: 18px;
  59.   padding: 10px;
  60.   margin-right: 10px;
  61.   border-radius: 50%;
  62. }
  63. .contact-detail a {
  64.   color: #000;
  65.   text-decoration: none;
  66. }
  68. .contact-sec .contact-ul li b:hover {
  69.   color: #f93;
  70. }
  72. .contact-sec .contact-ul li .fa-location-dot {
  73.   color: #f44337;
  74.   border: 2px solid #f4433790;
  75. }
  77. .contact-sec .contact-ul li .fa-phone {
  78.   color: #00b055;
  79.   border: 2px solid #00b05590;
  80. }
  82. .contact-sec .contact-ul li .fa-envelope {
  83.   color: #ff6347;
  84.   border: 2px solid #ff634790;
  85. }
  87. .contact-detail span {
  88.   width: 400px;
  89.   display: flex;
  90.   justify-content: center;
  91. }
  92. .contact-detail span a {
  93.   font-size: 20px;
  94.   padding: 6px 12px;
  95.   color: #000;
  96.   border-radius: 50%;
  97.   margin: 0px 5px;
  98. }
  99. .contact-detail span .fb {
  100.   color: #3b5998;
  101.   border: 3px solid #3b5998;
  102. }
  103. .contact-detail span .fb:hover {
  104.   color: #fff;
  105.   background-color: #3b5998;
  106. }
  108. .contact-detail span .insta {
  109.   color: #833ab4;
  110.   border: 3px solid #833ab4;
  111. }
  112. .contact-detail span .insta:hover {
  113.   color: #fff;
  114.   background-color: #833ab4;
  115. }
  117. .contact-detail span .twitter {
  118.   color: #00acee;
  119.   border: 3px solid #00acee;
  120. }
  121. .contact-detail span .twitter:hover {
  122.   color: #fff;
  123.   background-color: #00acee;
  124. }
  126. form.contFrm {
  127.   max-width: 100%;
  128.   margin: auto;
  129. }
  131. .inptFld {
  132.   width: 100%;
  133.   height: 50px;
  134.   border: 0;
  135.   margin: 0 0 10px;
  136.   border-radius: 8px;
  137.   padding: 0 20px;
  138.   font-size: 16px;
  139.   color: #000;
  140. }
  142. .inptFld:focus {
  143.   outline-offset: -4px;
  144.   outline: 1px solid #f93;
  145. }
  147. .contFrm textarea {
  148.   height: 75px;
  149.   padding-top: 5px;
  150. }
  151. .inptBtn {
  152.   height: 50px;
  153.   border: 0;
  154.   background: #00b055;
  155.   font-size: 14px;
  156.   color: #fff;
  157.   margin: auto;
  158.   letter-spacing: 1px;
  159.   cursor: pointer;
  160.   width: 100%;
  161.   max-width: 200px;
  162. }
  164. /* Responcive css Start */
  166. @media (max-width: 991px) {
  167.   .sec-pad {
  168.     padding: 20px 0 0px;
  169.   }
  171.   .contact-sec .contact-ul li,
  172.   .contact-ul b {
  173.     font-size: 18px;
  174.   }
  176.   .contact-sec .contact-ul i {
  177.     font-size: 14px;
  178.     padding: 6px;
  179.     margin-right: 6px;
  180.   }
  182.   .inptFld {
  183.     height: 40px;
  184.     margin: 0 0 10px;
  185.     padding: 0 14px;
  186.     font-size: 14px;
  187.   }
  188. }
  190. @media (max-width: 767px) {
  191.   .contact-detail span {
  192.     width: auto;
  193.   }
  194.   .contact-detail span a {
  195.     font-size: 18px;
  196.     padding: 5px 10px;
  197.     color: #000;
  198.     border-radius: 50%;
  199.     margin: 0px 5px 20px;
  200.   }
  201. }
  203. @media (max-width: 575px) {
  204.   .section-title {
  205.     font-size: 26px;
  206.     font-weight: 500;
  207.   }
  208.   .contact-sec {
  209.     border-radius: 10% 10% 0% 0% / 5% 5% 0% 0%;
  210.   }
  212.   .contact-sec .contact-ul i {
  213.     border: none;
  214.   }
  215.   .inptFld {
  216.     height: 36px;
  217.     margin: 0 0 8px;
  218.     padding: 0 14px;
  219.     font-size: 14px;
  220.   }
  221. }
  223. @media (max-width: 480px) {
  224.   .contact-sec .contact-ul li,
  225.   .contact-ul b {
  226.     font-size: 16px;
  227.   }
  228. }
  229. </style>
  231. <div style="background: #f5f5f5;">
  232. <div class="container">
  233. <div class="row">
  234. {% if is_mobile() %}
  235. <div class="col-md-12">
  236. <ol class="c-navigation-breadcrumbs__directory">
  238. <!-- Duplicating the "Home" link in both the global navigation and the breadcrumb trail is not recommended. -->
  239. <li class="c-navigation-breadcrumbs__item" property="itemListElement" typeof="ListItem">
  240.   <a class="c-navigation-breadcrumbs__link" href="" property="item" typeof="WebPage">
  241.     <span class="u-visually-hidden" property="name"><span class="fa fa-home"> </span> Accueil</span>
  242.   </a>
  243.   <meta property="position" content="1">
  244. </li>
  246. <li class="c-navigation-breadcrumbs__item" property="itemListElement" typeof="ListItem">
  247.   <a class="c-navigation-breadcrumbs__link" href="#!" property="item" typeof="WebPage">
  248.     <span property="name">L'Institut</span>
  249.   </a>
  250.   <meta property="position" content="2">
  251. </li>
  252. </ol>
  253. </div>
  254. {% else %}
  255. <div class="col-md-12">
  256. <div style="padding: 20px 0px;">
  257.     <div class="btn-group" style="float: right; margin-top: -10px;">
  258.     <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Appliquer un filtre <span class="fa fa-angle-down"></span></button>
  259.     <ul class="dropdown-menu pull-right">
  260.         <li><a href=""><span class="fa fa-angle-double-right"></span> Afficher tous les articles</a></li>
  261.         <li class="divider"></li>
  262.         <li><a href=""><span class="fa fa-angle-double-right"></span> Afficher tous les articles</a></li>
  263.     </ul>
  264.     </div>
  265.     <ul class="breadcrumbs">
  266.       <li><a href="#"><span class="fa fa-home"></span> Accueil</a></li>
  267.         <li><a href="#!">L'Institut</a></li>
  268.         <li>Informations à propos de l'institut</li>
  269.     </ul>
  270. </div>
  271. </div>
  272. {% endif %}
  274. </div>
  275. </div>
  276. </div>
  279. <div class="contact-sec sec-pad" style="margin: 0px 0px!important;">
  280.     <div class="container mb-2">
  281.         {% for infos in app.session.flashbag.get('information') %}
  282.             {% if loop.last %}
  283.                 <div class="alert alert-success text-center text-success">
  284.                     <h3> {{ infos }}</h3>
  285.                 </div>
  286.             {% endif %}
  287.         {% endfor %}
  288.       <div class="row">
  289.         <div class="col-md-6">
  290.           <div class="contact-detail">
  291.             <h1 class="section-title">Nous contacter</h1>
  292.   
  293.             <ul class="contact-ul">
  294.               <li><i class="fa fa-map"></i> Carrefour Kameni, Yaoundé.</li>
  295.               <li>
  296.                   <i class="fa fa-phone"></i>
  297.           <a href="tel:237 6xxxxxxxx"><b>237 6xxxxxxxx</b></a>,
  298.           <a href="tel:237 6xxxxxxxx"><b>237 6xxxxxxxx</b></a>
  299.               </li>
  300.               <li>
  301.           <i class="fa fa-envelope"></i>
  302.           <a href="mailto:info@azcorporation.net"><b> info@azcorporation.net</b></a>
  303.               </li>
  304.             </ul>
  305.   
  306.             <span>
  307.               <a href="#" class="fb"><i class="fa fa-facebook"></i></a>
  308.               <a href="#" class="insta"><i class="fa fa-instagram"></i></a>
  309.               <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
  310.             </span>
  311.           </div>
  312.         </div>
  313.   
  314.         <div class="col-md-6">
  315.             {{ form_start(form, {'attr': {'class':'contFrm', 'action': path('produit_service_contact_us'), 'method': 'post' }}) }}
  316.             <div class="row">
  317.               <div class="col-sm-6 col-md-6">
  318.                 <label>Name *</label>
  319.                 <label><span style="color:red;">{{ form_errors(form.nom) }}</span></label>
  320.                 {% if app.user != null %}
  321.                     {% set nom = app.user.name(20) %}
  322.                     {{ form_widget(form.nom, {'attr':{'value': nom,'class': 'form-control inptFld'},'disabled':true}) }}
  323.                 {% else %}
  324.                     {{ form_widget(form.nom,{'attr':{'class': 'form-control inptFld'}}) }}
  325.                 {% endif %}
  327.               </div>
  328.   
  329.               <div class="col-sm-6 col-md-6">
  330.                 <label>Email *</label>
  331.                 <label><span style="color:red;">{{ form_errors(form.email) }}</span></label>
  332.                 {% if app.user != null %}
  333.                     {% set mail = app.user.username %}
  334.                     {{ form_widget(form.email, {'attr':{'value': mail,'class': 'form-control inptFld'},'disabled':true}) }}
  335.                 {% else %}
  336.                     {{ form_widget(form.email,{'attr':{'class': 'form-control inptFld'}}) }}
  337.                 {% endif %}
  338.               </div>
  339.   
  340.               <div class="col-sm-12 col-md-12">
  341.                 <label>Subject *</label>
  342.                 <label><span style="color:red;">{{ form_errors(form.titre) }}</span></label>
  343.                 {{ form_widget(form.titre,{'attr':{'class': 'inptFld form-control'}}) }}
  344.               </div>
  346.               <div class="col-md-12">
  347.                 <label>Message *</label>
  348.                 <label><span style="color:red;">{{ form_errors(form.contenu) }}</span></label>
  349.                 {{ form_widget(form.contenu,{'attr':{'class': 'inptFld form-control'}}) }}
  350.               </div>
  351.   
  352.               <div class="col-md-12">
  353.                 <button class="btn btn-primary btn-lg" required="required">Envoyez le Message</button>
  354.               </div>
  355.             </div>
  356.             {{ form_end(form) }}
  357.         </div>
  358.       </div>
  359.     </div>
  360. </div>
  363. <div style="padding-top: 20px;">
  364. <div class="container">
  365. <div class="row">
  367.   <div class="col-md-6">
  368.     <div style="background: #fff; padding: 10px;">
  369.       <ul class="nav nav-tabs" id="myTab" role="tablist">
  370.         <li class="nav-item">
  371.           <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Notre adresse</a>
  372.         </li>
  373.       </ul>
  374.       <div>
  375.         <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15923.294597485665!2d11.4905662!3d3.8480024!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x108bcfdbfb5da54b%3A0xe9ed2f8954b445f6!2sINSTITUT%20DE%20FORMATION%20PROFESSIONNELLE%20AZ%20CORPORATION!5e0!3m2!1sfr!2scm!4v1708450911509!5m2!1sfr!2scm" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  376.       </div>
  377.     </div>
  378.   </div>
  380. </div>
  381. </div>
  382. </div>
  384. {% endblock %}
  386. {% block javascripttemplate %}
  387.     $('#contact-car').hide();
  388.     $('#contact-bus').hide();
  389.     $('#contact-bike').hide();
  390.     $('#contact-phone').hide();
  391.     $('#contact-mail').hide();
  393.     $('#contact-carClick').removeClass("active");
  394.     $('#contact-busClick').removeClass("active");
  395.     $('#contact-bikeClick').removeClass("active");
  396.     $('#contact-phoneClick').removeClass("active");
  397.     $('#contact-mailClick').removeClass("active");
  399.     $('#contact-map').show();
  400.     $("#contact-mapClick").addClass("active");
  402. // contact page toogles
  403. $("#contact-mapClick").click(function () {
  404.     $('#contact-car').hide();
  405.     $('#contact-bus').hide();
  406.     $('#contact-bike').hide();
  407.     $('#contact-phone').hide();
  408.     $('#contact-mail').hide();
  410.     $('#contact-carClick').removeClass("active");
  411.     $('#contact-busClick').removeClass("active");
  412.     $('#contact-bikeClick').removeClass("active");
  413.     $('#contact-phoneClick').removeClass("active");
  414.     $('#contact-mailClick').removeClass("active");
  416.     $('#contact-map').show();
  417.     $("#contact-mapClick").addClass("active");
  418. });
  419. $("#contact-carClick").click(function () {
  420.     $('#contact-map').hide();
  421.     $('#contact-bus').hide();
  422.     $('#contact-bike').hide();
  423.     $('#contact-phone').hide();
  424.     $('#contact-mail').hide();
  426.     $('#contact-mapClick').removeClass("active");
  427.     $('#contact-busClick').removeClass("active");
  428.     $('#contact-bikeClick').removeClass("active");
  429.     $('#contact-phoneClick').removeClass("active");
  430.     $('#contact-mailClick').removeClass("active");
  432.     $('#contact-car').show();
  433.     $("#contact-carClick").addClass("active");
  434. });
  435. $("#contact-busClick").click(function () {
  436.     $('#contact-map').hide();
  437.     $('#contact-car').hide();
  438.     $('#contact-bike').hide();
  439.     $('#contact-phone').hide();
  440.     $('#contact-mail').hide();
  442.     $('#contact-mapClick').removeClass("active");
  443.     $('#contact-carClick').removeClass("active");
  444.     $('#contact-bikeClick').removeClass("active");
  445.     $('#contact-phoneClick').removeClass("active");
  446.     $('#contact-mailClick').removeClass("active");
  448.     $('#contact-bus').show();
  449.     $("#contact-busClick").addClass("active");
  450. });
  451. $("#contact-bikeClick").click(function () {
  452.     $('#contact-map').hide();
  453.     $('#contact-car').hide();
  454.     $('#contact-bus').hide();
  455.     $('#contact-phone').hide();
  456.     $('#contact-mail').hide();
  458.     $('#contact-mapClick').removeClass("active");
  459.     $('#contact-carClick').removeClass("active");
  460.     $('#contact-busClick').removeClass("active");
  461.     $('#contact-phoneClick').removeClass("active");
  462.     $('#contact-mailClick').removeClass("active");
  464.     $('#contact-bike').show();
  465.     $("#contact-bikeClick").addClass("active");
  466. });
  467. $("#contact-phoneClick").click(function () {
  468.     $('#contact-map').hide();
  469.     $('#contact-car').hide();
  470.     $('#contact-bus').hide();
  471.     $('#contact-bike').hide();
  472.     $('#contact-mail').hide();
  474.     $('#contact-mapClick').removeClass("active");
  475.     $('#contact-carClick').removeClass("active");
  476.     $('#contact-busClick').removeClass("active");
  477.     $('#contact-bikeClick').removeClass("active");
  478.     $('#contact-mailClick').removeClass("active");
  480.     $('#contact-phone').show();
  481.     $("#contact-phoneClick").addClass("active");
  482. });
  486. $("#contact-mailClick").click(function () {
  487.     $('#contact-map').hide();
  488.     $('#contact-car').hide();
  489.     $('#contact-bus').hide();
  490.     $('#contact-bike').hide();
  491.     $('#contact-phone').hide();
  493.     $('#contact-mapClick').removeClass("active");
  494.     $('#contact-carClick').removeClass("active");
  495.     $('#contact-busClick').removeClass("active");
  496.     $('#contact-bikeClick').removeClass("active");
  497.     $('#contact-phoneClick').removeClass("active");
  499.     $('#contact-mail').show();
  500.     $("#contact-mailClick").addClass("active");
  501. });
  503. {% endblock %}