templates/front/inscriptions/formation-a-la-carte.html.twig line 1

Open in your IDE?
  1. {% extends 'front.html.twig' %}
  3. {% block title %}Séminaire personnalisée | CIMEF-INTERNATIONAL{% endblock %}
  4. {% block styleSheets %}
  5. <style id='wp-emoji-styles-inline-css' type='text/css'>
  6. label {
  7.     font-family: arial;
  8.     font-weight: bold;
  9. }
  10. .form-control{
  11.     width:100%;
  12.     height:45px;
  13.     padding:10px;
  14.     border-radius:8px;
  15.     font-family: arial;
  16.     margin-bottom: 10px;
  17.     border:1px solid #ccc;
  18. }
  19. .textarea{
  20.     width:100%;
  21.     height:45px;
  22.     padding:10px;
  23.     font-family: arial;
  24.     border:1px solid #ccc;
  25.     height: 100px !important;
  26.     border-radius:1px !important;
  27. }
  28. .row {
  29.     display: flex;            /* flexbox pour aligner les colonnes */
  30.     flex-wrap: wrap;          /* les colonnes passent à la ligne si nécessaire */
  31.     margin-right: -0.75rem;   /* -gutter/2 */
  32.     margin-left: -0.75rem;    /* -gutter/2 */
  33. }
  34. .events_pagination ul.pagination {
  35.     display: flex;
  36.     flex-wrap: wrap;
  37.     justify-content: center;
  38.     list-style: none;
  39.     margin: 0;
  40.     padding: 0;
  41. }
  42. .page-item.active .page-link {
  43.     background-color: #ff6600;
  44.     color: #fff;
  45. }
  46. .page-link {
  47.     margin: 10px;
  48.     color: #051a53;
  49.     background-color: #ededed;
  50.     border-radius: 5px;
  51.     padding: 10px;
  52.     /* margin: 0 3px; */
  53. }
  55. .text-lien{
  56.    color: #ff6600;
  57.    /* font-size: 16px; */
  58. }
  60. /* Small devices ≥576px */
  61. @media (min-width: 576px) {
  62.   .col-3 { flex: 0 0 100%; max-width: 100%; }
  63.   .col-sm-4 { flex: 0 0 100%; max-width: 100%; }
  64.   .col-sm-6 { flex: 0 0 100%; max-width: 100%; }
  65.   .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  66. }
  68. /* Medium devices ≥768px */
  69. @media (min-width: 768px) {
  70.   .col-md-3 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  71.   .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  72.   .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  73.   .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  74. }
  75. .shadow {
  76.     box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
  77. }
  78. /* Large devices ≥992px */
  79. @media (min-width: 992px) {
  80.   .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  81.   .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  82.   .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  83.   .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  84. }
  86. .type1 .date-event {
  87.     transition: all 0.5s ease;
  88.     position: absolute;
  89.     bottom: 20px;
  90.     left: 30px;
  91.     z-index: 1;
  92.     font-size: 12px;
  93.     color: #fff;
  94.     font-weight: 700;
  95.     text-transform: uppercase;
  96.     text-align: center;
  97.     line-height: 1.3;
  98.     letter-spacing: 1px;
  99.     background-color: #ff6600 !important;
  100.     padding: 12px;
  101. }
  102. .icon_event{
  103.     color: #ff6600 !important;
  104. }
  105. .wrap_header_banner .overlay-slider {
  106.     position: absolute;
  107.     top: 0;
  108.     left: 0;
  109.     padding-top: 30px; 
  110.     width: 100%;
  111.     height: 100%;
  112.     background-color: rgba(0, 0, 0, 0.6392156863);
  113. }
  114. .left-column {
  115.     flex: 1;
  116.     /*background: linear-gradient(145deg, #051a53, 0%, #0a2a7a 100%);*/
  117.     background: #051a53;
  118.     color: white;
  119.     padding: 40px;
  120.     display: flex;
  121.     flex-direction: column;
  122.     justify-content: space-between;
  123.     position: relative;
  124.     overflow: hidden;
  125. }
  127. .left-column:before {
  128.     content: "";
  129.     position: absolute;
  130.     top: 0;
  131.     left: 0;
  132.     right: 0;
  133.     bottom: 0;
  134.     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.05)"/></svg>');
  135.     opacity: 0.3;
  136. }
  137. .logo-header {
  138.     display: flex;
  139.     align-items: center;
  140.     gap: 15px;
  141.     margin-bottom: 40px;
  142.     z-index: 1;
  143.     position: relative;
  144. }
  146. .logo-circle {
  147.     width: 80px !important;
  148.     height: 65px !important;
  149.     background-color: #ff6600;
  150.     border-radius: 50%;
  151.     display: flex;
  152.     align-items: center;
  153.     justify-content: center;
  154.     font-size: 24px;
  155. }
  156. .left-content {
  157.     z-index: 1;
  158.     position: relative;
  159.     flex-grow: 1;
  160.     margin: 0px !important;
  161.     width: 100% !important;
  162. }
  164. .features-list {
  165.     list-style: none;
  166.     margin: 0px !important;
  167.     width: 100%;
  168. }
  170. .features-list li {
  171.     display: flex;
  172.     align-items: flex-start;
  173.     margin-bottom: 10px;
  174.     margin-left: -30px;
  175. }
  177. .feature-icon {
  178.     background-color: rgba(255, 255, 255, 0.15);
  179.     color: #fff;
  180.     border-radius: 50%;
  181.     width: 40px;
  182.     height: 40px;
  183.     display: flex;
  184.     align-items: center;
  185.     justify-content: center;
  186.     margin-right: 15px;
  187.     flex-shrink: 0;
  188.     margin-top: 10px !important;
  189. }
  191. .feature-text h4 {
  192.     font-size: 16px;
  193.     margin-bottom: 5px;
  194.     font-weight: 600;
  195. }
  197. .feature-text p {
  198.     font-size: 14px;
  199.     opacity: 0.8;
  200. }
  201. </style>
  202. {% endblock %}
  203. {% block body %}
  204. {% include 'section/navbar.html.twig' %}
  205. <div class="wrap_header_banner" style="height: 200px; background: url({{ asset('public/inter/wp-content/uploads/2023/06/header-banner.jpg')}});">
  206.     <div class="overlay-slider">
  207.         <div class="row_site">
  208.             <div class="container_site">
  209.                 <div class="cover_color"></div>
  210.                 <div class="header_banner_el">
  211.                     <div class="header_breadcrumbs">
  212.                         <div id="breadcrumbs">
  213.                         <ul class="breadcrumb">
  214.                             <li><a href="{{ path('front.inter.index') }}" style="color: #fff!important;" title="accueil">Accueil</a></li>
  215.                             <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  216.                             <li style="color: #fff!important;">Formations</li>
  217.                             <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  218.                             <li style="color: #fff!important;">Séminaire Personnalisée</li>
  219.                         </ul>
  220.                         </div>
  221.                     </div>
  222.                     <h1 class="header_title" style="color: #fff!important;">Séminaire Personnalisée </h1>
  223.                 </div>
  224.             </div>
  225.         </div>
  226.     </div>
  227. </div>
  230.     {% for message in app.flashes('success') %}
  231.     <div class="row toast_success" style="top: 100px !important; float: right !important; position: absolute;">
  232.         <div class="col-md-2 col-sm-2" style="padding: 10px;">
  233.             <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  234.         </div>
  235.         <div class="col-md-10 col-sm-10" style="padding: 10px;">
  236.             {{ message }}
  237.         </div>
  238.     </div>    
  239.     {% endfor %}
  240.     {% for message in app.flashes('warning') %}
  241.     <div class="row toast_warning" style="top: 100px !important; float: right !important; position: absolute;">
  242.         <div class="col-md-2 col-sm-2" style="padding: 10px;">
  243.             <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  244.         </div>
  245.         <div class="col-md-10 col-sm-10" style="padding: 10px;">
  246.             {{ message }}
  247.         </div>
  248.     </div>   
  249.     {% endfor %}
  250.     {% for message in app.flashes('danger') %}
  251.     <div class="row toast_danger" style="top: 100px !important; float: right !important; position: absolute;">
  252.         <div class="col-md-2 col-sm-2" style="padding: 10px;">
  253.             <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  254.         </div>
  255.         <div class="col-md-10 col-sm-10" style="padding: 10px;">
  256.             {{ message }}
  257.         </div>
  258.     </div>   
  259.     {% endfor %}
  260.     
  263. <div class="container-event">
  264.     <div id="main-event" class="content-event">
  265.         <div class="row" style="width: 100% !important; padding: 10px !important;">
  266.             <div class="col-lg-8 col-md-8 col-sm-12" style="padding: 10px">
  267.                 <div class="">
  268.                     {{ form_start(demandeformationsForm, {attr: {style: 'width: 100%;'} }) }}
  269.                     <div class="row shadow" style="border: 1px solid #ededed; padding: 20px; margin: 0px !important;">
  270.                         
  271.                             <div class="form-header">
  272.                                 <h2 class="form-title">Informations personnelles</h2>
  273.                             </div>
  274.                             <div class="col-md-12 col-sm-12">
  275.                                 {{ form_row(demandeformationsForm.civilite) }}
  276.                             </div>
  277.                             <div class="col-md-6 col-sm-12" style="padding-right: 10px;">
  278.                                 {{ form_row(demandeformationsForm.nom) }}
  279.                             </div>
  280.                             <div class="col-md-6 col-sm-12" style="padding-left: 10px;">
  281.                                 {{ form_row(demandeformationsForm.prenoms) }}
  282.                             </div>
  283.                             <div class="col-md-12 col-sm-12">
  284.                                 {{ form_row(demandeformationsForm.mail) }}
  285.                             </div>
  286.                             <div class="col-md-6 col-sm-12" style="padding-right: 10px;">
  287.                                 {{ form_row(demandeformationsForm.adresse) }}
  288.                             </div> 
  289.                             <div class="col-md-6 col-sm-12" style="padding-left: 10px;">
  290.                                 {{ form_row(demandeformationsForm.telephone) }}
  291.                             </div>
  292.                             <div class="col-md-12 col-sm-12">
  293.                                 {{ form_row(demandeformationsForm.fonction) }}
  294.                             </div>
  295.                             <div style="margin-top: 10px; border: 1px solid #ededed !important; height: 5px; background-color: #ededed; width: 100%;"></div>
  296.                             <div class="form-header" style="border-top: 1px solid #051a53 !important; width: 100%;">
  297.                                 <h2 class="form-title">Informations sur votre formation</h2>
  298.                             </div>
  299.     
  300.                             <div class="col-md-6 col-sm-12" style="padding-right: 10px;">
  301.                                 {{ form_row(demandeformationsForm.theme) }}
  302.                             </div>
  303.                             
  304.                             <div class="col-md-6 col-sm-12" style="padding-left: 10px;">
  305.                                 {{ form_row(demandeformationsForm.lieu) }}
  306.                             </div>
  307.             
  308.                             <div class="col-md-6 col-sm-12" style="padding-right: 10px;">
  309.                                 {{ form_row(demandeformationsForm.duree) }}
  310.                             </div>
  311.                             <div class="col-md-6 col-sm-12" style="padding-left: 10px;">
  312.                                 {{ form_row(demandeformationsForm.entreprise) }}
  313.                             </div>                             
  314.                             <div class="col-md-6 col-sm-12" style="padding-right: 10px;">
  315.                                 {{ form_row(demandeformationsForm.nombrepart) }}
  316.                             </div>
  317.                             <div class="col-md-6 col-sm-12" style="padding-left: 10px;">
  318.                                 {{ form_row(demandeformationsForm.siteweb) }}
  319.                             </div> 
  320.     
  321.                             <div class="col-md-12 col-sm-12">
  322.                                 {{ form_row(demandeformationsForm.commentaire) }}
  323.                             </div>
  324.                             <div class="g-recaptcha" data-sitekey="6LfPYkosAAAAANaQq5rVy_x44wv122vknRu-sw3C"></div>
  327.                     </div>                
  328.                     {{ form_end(demandeformationsForm) }}
  329.                 </div>
  330.             </div>
  331.             <div class="col-lg-4 col-md-4 col-sm-12" style="padding: 10px">
  332.                 
  333.                             <div class="left-column">
  334.                                 <div>
  335.                                     <div class="logo-header">
  336.                                         <div class="logo-circle">
  337.                                             <i class="fas fa-globe-americas fa-2X"></i>
  338.                                         </div>
  339.                                         <div class="logo-text">
  340.                                             <h1 style="font-size: 20px !important; color: #fff !important;">CIMEF International</h1>
  341.                                             <p style="font-size: 14px !important; font-style: italic;">La formation précède la compétitivité !</p>
  342.                                         </div>
  343.                                     </div>
  344.                                     
  345.                                     <div class="left-content">
  346.                                         <h2 class="left-title" style="font-size: 30px !important; color: #fff !important;">Inscription 2026</h2>
  347.                                         <p class="left-subtitle">Rejoignez notre réseau mondial de professionnels et participez à des projets d'envergure internationale.</p>
  348.                                         
  349.                                         <ul class="features-list">
  350.                                             <li>
  351.                                                 <div class="feature-icon">
  352.                                                     <i class="fas fa-network-wired"></i>
  353.                                                 </div>
  354.                                                 <div class="feature-text">
  355.                                                     <h4 style="color: #ff6600;">Une portée internationale</h4>
  356.                                                     <p>Un réseau actif de professionnels répartis dans plusieurs pays</p>
  357.                                                 </div>
  358.                                             </li>
  359.                                             <li>
  360.                                                 <div class="feature-icon">
  361.                                                     <i class="fas fa-graduation-cap"></i>
  362.                                                 </div>
  363.                                                 <div class="feature-text">
  364.                                                     <h4 style="color: #ff6600;">Opportunités de collaboration internationale</h4>
  365.                                                     <p>Participez à des projets stratégiques avec des partenaires de renom</p>
  366.                                                 </div>
  367.                                             </li>
  368.                                             <li>
  369.                                                 <div class="feature-icon">
  370.                                                     <i class="fas fa-handshake"></i>
  371.                                                 </div>
  372.                                                 <div class="feature-text">
  373.                                                     <h4 style="color: #ff6600;">Opportunités de collaboration</h4>
  374.                                                     <p>Participez à des projets innovants avec des partenaires internationaux</p>
  375.                                                 </div>
  376.                                             </li>
  377.                                         </ul>
  378.                                     </div>
  379.                                 </div>
  380.                                 
  381.                                 <div class="contact-info">
  382.                                     <h3 style="color: #fff;">Besoin d'aide ?</h3>
  383.                                     <p>Contactez notre équipe à <strong>paris@cimef-international.org</strong> ou appelez-nous au <strong>+33 6 05 85 70 98 </strong></p>
  384.                                 </div>
  385.                             </div>
  386.                         
  387.             </div>
  388.         </div>
  389.     </div>
  390. </div>
  396. {% include 'section/footer.html.twig' %}
  398. {% endblock %}