templates/pages/serrurerie.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block stylesheets %}
  4. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"/>
  6.     <style>
  7.         .mobile-version{
  8.             display:none;
  9.         }
  10.         .support-scrollsnap {
  11.             box-shadow: 2px 0px 5px 0px;
  12.             /* border-radius: 26px; */
  13.         }
  14.         
  15.         .slide {
  16.             background-repeat: no-repeat;
  17.             background-size: cover;
  18.             width: 96%;
  19.             height: 577px;
  20.             background-image: url('{{ asset('front/images/Group13111.png') }}');
  21.             padding-bottom:50% !important;
  22.         }
  23.         .objectif {
  24.             background-repeat: no-repeat;
  25.             background-size: cover;
  26.             width: revert;
  27.             /*height: 600px;*/
  28.             background-image: url('{{ asset('front/images/objectif.png') }}')
  29.         }
  30.         .travel {
  32.             background-repeat: no-repeat;
  33.             background-size: cover;
  34.             width: revert;
  35.             height: 250px;
  36.             background-image: url('{{ asset('front/images/travel.png') }}')
  37.         }
  39.         #top {
  41.             /*top: 140px;*/
  42.             margin-top:5%;
  43.             /*padding:1%;*/
  45.         }
  47.         hr {
  48.             width: 36px;
  49.             height: 3px !important;
  50.             background: #00008F;
  51.             margin: 1.5rem 0;
  52.             border: 0;
  53.             opacity: 1;
  54.         }
  56.         .imageslide {
  57.             color: #FFF;
  58.             font-family: Poppins;
  59.             font-size: 40px;
  60.             font-style: normal;
  61.             font-weight: 600;
  62.             line-height: 188%;
  63.         }
  64.         button a {
  65.             color: white;
  66.             font-size: 16px;
  67.             font-weight: 600;
  68.         }
  69.         #btnslide {
  71.             background-color: transparent;
  72.             width: 250px;
  73.             height: 75px;
  75.             position: relative;
  76.             box-shadow: 0 20px 73px rgba(173.19, 173.19, 173.19, 0.50);
  77.             border-radius: 10px;
  78.             border: 2px #FFEE9D solid;
  80.         }
  82.         #btnslide1 {
  83.             background-color: transparent;
  84.             width: 250px;
  85.             height: 75px;
  87.             position: relative;
  89.             border: 2px transparent solid;
  92.         }
  93.         .cont {
  94.             max-width: 800px;
  95.         }
  96.         .header-title {
  97.             color: white;
  98.         }
  99.         .text-after-header {
  100.             color: white;
  101.             font-size: 11px;
  102.             font-weight: 400;
  103.             line-height: 30.08px;
  104.             word-wrap: break-word;
  105.         }
  106.         span.date-filiere {
  107.             margin-left: 15px;
  108.             font-size: 13px;
  109.             font-weight: 300;
  110.         }
  111.         .session {
  112.             text-align: center;
  113.             border-left: 1px solid white;
  114.         }
  115.         i.fas.fa-download {
  116.             color: #FFEE9D;
  117.             font-size: 23px;
  118.             margin-right: 10px;
  119.         }
  120.         i.fas.fa-comment-dots {
  121.             color: #FFEE9D;
  122.             font-size: 23px;
  123.             margin-right: 10px;
  124.         }
  125.         a.btn.btn-download , a.btn.btn-contact {
  126.             color: white;
  127.             font-size: 13px;
  128.         }
  129.         a.btn.btn-contact {
  130.             border: 1px solid white;
  131.             padding: 12px;
  132.             padding-right: 70px;
  133.             padding-left: 70px;
  134.         }
  135.         #nom, #prenom, #email, #message {
  136.             font-size: 12px;
  137.             border: none;
  138.             background: #F8F8F8;
  139.         }
  140.         button#sub-form {
  141.             padding: 4px 40px;
  142.             background: #3e2e6c;
  143.             color: white;
  144.             border: none;
  145.             float: right;
  146.             margin-top: 10px;
  147.         }
  148.         
  149.         /* new style  */
  150.         
  151.  
  153. .scroll-container,
  154. .scroll-area {
  155.   max-width: 850px;
  156.   height: 300px;
  157.   font-size: 60px;
  158. }
  160. .scroll-container {
  161.   overflow: auto;
  162.   -webkit-scroll-snap-type: y mandatory;
  163.       -ms-scroll-snap-type: y mandatory;
  164.           /*scroll-snap-type: y mandatory;*/
  165. }
  167. .scroll-area {
  168.   scroll-snap-align: start;
  169. }
  171. .scroll-container,
  172. .scroll-area {
  173.   margin: 0 auto;
  174. }
  176. .scroll-area {
  177.   align-items: center;
  178.   justify-content: center;
  179.   color: white;
  180. }
  182. .scroll-area:nth-of-type(1) {
  183.   background: #49b293;
  184. }
  186. .col-md-5.col-sm-12 {
  187.     margin-top: 6%;
  188. }
  190. h6.header-title.mb-5 {
  191.     margin-top: 28%;
  192. }
  194. .text-start {
  195.     text-align: left!important;
  196.     margin-top: 15%;
  197. }
  199.         /* end style */
  200.         
  201.         @media only screen and (max-width: 767px) {
  202.             button#sub-form {
  203.                 margin-bottom: 20px;
  204.             }
  205.             #nom, #prenom, #email, #message{
  206.                 margin-bottom:15px;
  207.             }
  208.             .laptop-version {
  209.                 display:none !important;
  210.             }
  211.             .margin-upper-mysection {
  212.                 margin-top: 40%;
  213.             }
  214.             .slide-mobile {
  215.                 height: auto;
  216.                 background: #3e2e6c;
  217.                 text-align: justify;
  218.                 padding-bottom: 50px;
  219.                 margin-bottom: 10%;
  220.             }
  221.             .header-title {
  222.                 color: white;
  223.                 padding-top: 30px;
  224.             }
  225.             .session {
  226.                 text-align: center;
  227.                 border-top: 1px solid white;
  228.                 border-left:none !important;
  229.             }
  230.             .text-after-header{
  231.                 font-size:13px ;
  232.             }
  233.             .mobile-version{
  234.                 display: block !important;
  235.             }
  236.         }
  237.    
  238.     </style>
  239. {% endblock %}
  241. {% block body %}
  243. <div class="margin-upper-mysection"></div>
  244. {# laptop version #}
  245. <div class="laptop-version">
  247.     <section id="top" class="common-sec main-classes-list slide">
  249.         <div class="container">
  250.             <div class="row">
  251.                 <div class="col-md-2"></div>
  253.                 <div class="col-md-8 col-sm-12 text-start">
  255.                     <h3 class="header-title mb-5">BP Metalier</h3>
  256.                     <p class="mt-5 text-after-header">
  257.                               Le Brevet Professionnel Serrurerie est une formation spécialisée qui suit généralement le CAP Serrurier-Métallier. Elle vise à approfondir les compétences des professionnels de la serrurerie. Au cours de cette formation, les étudiants se spécialisent dans la conception, la fabrication, la pose et la maintenance d'ouvrages métalliques tels que portes, fenêtres, grilles, et systèmes de sécurité. Les enseignements comprennent des cours pratiques, des travaux en atelier, des stages en entreprise, et des aspects théoriques. À l'issue de la formation, les diplômés du BP Serrurerie sont préparés à exercer des métiers tels que serrurier-métallier, poseur-installateur, ou chef d'équipe en serrurerie.
  258.                         </p>
  260.                 </div>
  261.                 {#<div class="col-md-3 mt-2 session">#}
  263.                 {#<h6 class="header-title mb-5">Prochaines sessions  :</h6>#}
  264.                 {#{% for session in sessions %}#}
  265.                 {#    <div> <i class="fas fa-calendar-alt mt-3" style="color:white"></i> <span class="date-filiere" style="color:white">{{ session.startAt|date('d M Y-g:s') }}</span>  </div>#}
  266.                 {#{% endfor %}#}
  267.                 
  268.                 {#<div> <i class="fas fa-calendar-alt mt-3" style="color:white"></i> <span class="date-filiere date-filiere" style="color:white">12 Nov 2023 - 08:30 </span>   </div>#}
  269.                 {#<div> <i class="fas fa-calendar-alt mt-3" style="color:white"></i> <span class="date-filiere" style="color:white">12 Nov 2023 - 08:30 </span>   </div>#}
  271.                 {#</div>#}
  273.                 <div class="col-md-2"></div>
  274.             </div>
  275.             {#<div class="row mt-4">#}
  276.             {#    <div class="col-sm-12 text-center">#}
  278.             {#        <a href="#" class="btn btn-download"><i class="fas fa-download"></i> Télécharger la fiche programme</a>#}
  279.             {#        <a href="#" class="btn btn-contact"><i class="fas fa-comment-dots"></i> Contactez-nous</a>#}
  282.             {#    </div>#}
  283.             {#</div>#}
  284.         </div>
  285.         
  288.     </section>
  291.         {# objectif #}
  293.         <section id="top" class="common-sec main-classes-list">
  295.             <div class="container objectif">
  296.                 <div class="row" style="padding-bottom: 5%;">
  297.                     <div class="col-lg-6">
  298.                         <h2>BP Metalier </h2>
  299.                         <img style="width: 90%;" src="{{asset('front/images/hr.png') }}" alt="accademy">
  300.                         {#<p style="color:#8D96B5!important; font-size: 13px;">Lorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psoo</p>#}
  301.                     </div>
  302.                     <div class="col-lg-6">
  303.                         <div style=" padding: 22px;background: #5821D4;box-shadow: 0px 1px 24px rgba(3, 1, 56, 0.10);border-radius: 5px;">
  304.                             <img style="width: 10%;" src="{{asset('front/images/message.png') }}" alt="accademy"><br>
  305.                             <h6 style="color:white">Délais d’accès aux formations</h6>
  306.                             <p style="color:white !important; font-size: 13px; font-weight: 300;">· Adapté la formation aux métiers existants · Formation en lien avec les besoins nationaux · Insertion et Reconversion, Accessibilité</p>
  308.                         </div>
  310.                     </div>
  311.                 </div>
  312.                 
  313.                 
  314.                 
  315.                 
  316.             
  317.              <div class="row mb-4">
  318.                 
  319.                     <div class="col-lg-2">
  320.                      
  321.                      </div> 
  322.                      
  323.                          <div class="col-lg-4">
  324.                                      <div class="support-scrollsnap">
  325.                             
  326.                                 <div class="scroll-container" style="background: white;">
  327.                                     <div class="scroll-area" style=" padding: 22px;background: white;border-radius: 5px;">
  328.                                         <img style="width: 10%;" src="{{asset('front/images/message.png') }}" alt="accademy">
  329.                                         <h3 style="color: #857d7d;">Prérequis</h3>
  330.                                          <p style="color:#8D96B5 !important;margin: auto;font-size:13px">Les prérequis usuels pour intégrer la filière BP Serrurier comprennent généralement un diplôme de niveau V tel qu'un CAP Serrurier-Métallier, des connaissances de base en mathématiques et en sciences physiques, des compétences techniques pour le travail manuel et l'utilisation d'outils, la capacité à collaborer en équipe, ainsi qu'une motivation avérée et un intérêt manifeste pour le métier de serrurier.</p>
  331.                                     </div>
  332.                                     <div class="scroll-area" style=" padding: 22px;background: white;box-shadow: 0px 1px 24px rgba(3, 1, 56, 0.10);border-radius: 5px;"></div>
  333.                                 </div>
  334.                             </div>
  335.                           </div>
  336.                          <div class="col-lg-4">
  337.                                      <div class="support-scrollsnap">
  338.                             
  339.                                 <div class="scroll-container" style="background: white;">
  340.                                     <div class="scroll-area" style=" padding: 22px;background: white;border-radius: 5px;">
  341.                                         <img style="width: 10%;" src="{{asset('front/images/message.png') }}" alt="accademy">
  342.                                         <h3 style="color: #857d7d;">Modalités d’évaluation</h3>
  343.                                          <p style="color:#8D96B5 !important;margin: auto;font-size:13px">Évaluation formative tout au long de la formation : questionnaires, études de cas,<br>
  344. réalisations pratiques<br>
  345. Évaluation certificative conforme aux modalités de l’organisme certificateur :<br>
  346. > Apprentis : Contrôle en Cours de Formation ou épreuves ponctuelles<br>
  347. > Stagiaires de la Formation Professionnelle Continue : épreuves ponctuelles<br>
  349. > Domaine professionnel :<br>
  350. ■ UP1 Étude et préparation d'une intervention<br>
  351. ■ UP2 Réalisation et contrôle d'un ouvrage courant<br>
  352. ■ UP3 Réalisation de travaux spécifiques<br>
  354. > Domaine général :<br>
  355. ■ UG1 Français et Histoire-Géographie – Enseignement Moral et civique<br>
  356. ■ UG2 Mathématiques – Physique – Chimie<br>
  357. ■ UG3 EPS<br>
  358. ■ UG4 Prévention Santé Environnement<br>
  359. ■ UG5 Langue vivante : Anglais<br>
  361. > Epreuves facultatives :<br>
  362. ■ UF1 Langue vivante<br>
  363. ■ UF2 Mobilité<br>
  365. </p>
  366.                                     </div>
  367.                                     <div class="scroll-area" style=" padding: 22px;background: white;box-shadow: 0px 1px 24px rgba(3, 1, 56, 0.10);border-radius: 5px;"></div>
  368.                                 </div>
  369.                             </div>
  370.                           </div>
  371.                      
  372.                             <div class="col-lg-2">
  373.                              
  374.                              </div>  
  375.                              
  376.                             <div class="col-lg-2">
  377.                              
  378.                              </div> 
  379.             </div>  
  380.             <div class="row mb-4">
  381.                     <div class="col-lg-2">
  382.                      
  383.                      </div>  
  384.                      
  385.                          <div class="col-lg-4">
  386.                                      <div class="support-scrollsnap">
  387.                             
  388.                                 <div class="scroll-container" style="background: white;">
  389.                                     <div class="scroll-area" style=" padding: 22px;background: white;border-radius: 5px;">
  390.                                         <img style="width: 10%;" src="{{asset('front/images/message.png') }}" alt="accademy">
  391.                                         <h3 style="color: #857d7d;">Méthodes mobilisées</h3>
  392.                                          <p style="color:#8D96B5 !important;margin: auto;font-size:13px">Méthodes pédagogiques <br>
  393.                                             La formation combine : <br>
  394.                                             ■ Des apports théoriques <br>
  395.                                             ■ Des retours d’expérience <br>
  396.                                             ■ Des travaux collaboratifs <br>
  397.                                             ■ Des mises en situation professionnelle
  398.                                         </p>
  399.                                     </div>
  400.                                     <div class="scroll-area" style=" padding: 22px;background: white;box-shadow: 0px 1px 24px rgba(3, 1, 56, 0.10);border-radius: 5px;"></div>
  401.                                 </div>
  402.                             </div>
  403.                           </div>
  404.                          <div class="col-lg-4">
  405.                                      <div class="support-scrollsnap">
  406.                             
  407.                                 <div class="scroll-container" style="background: white;">
  408.                                     <div class="scroll-area" style=" padding: 22px;background: white;border-radius: 5px;">
  409.                                         <img style="width: 10%;" src="{{asset('front/images/message.png') }}" alt="accademy">
  410.                                         <h3 style="color: #857d7d;">Accessibilité aux PMR</h3>
  411.                                          <p style="color:#8D96B5 !important;margin: auto;font-size:13px">Prévention des Risques Professionnels<br>
  413. ■ Préparation au profil opérateur de l'Autorisation d'Intervention à Proximité des<br>
  414. Réseaux (Aérien)<br>
  415. ■ Application des principes de prévention des risques CMR<br>
  416. ■ Préparation à l'habilitation électrique B0 conformément à la norme NF C 18-510<br>
  417. ■ Préparation à l'habilitation électrique H0 conformément à la norme NF C 18-510<br>
  418. ■ Préparation au certificat de prévention des risques liés à l'activité physique pour<br>
  419. une opération - formation initiale<br>
  420. ■ Préparation à l'attestation d’utilisation d’échafaudages de pied (R408 – annexe
  421. 5)<br>
  422. ■ Préparation au certificat de Sauveteur Secouriste du Travail - formation initiale
  424. </p>
  425.                                     </div>
  426.                                     <div class="scroll-area" style=" padding: 22px;background: white;box-shadow: 0px 1px 24px rgba(3, 1, 56, 0.10);border-radius: 5px;"></div>
  427.                                 </div>
  428.                             </div>
  429.                           </div>
  430.                      
  431.                           <div class="col-lg-2">
  432.                      
  433.                      </div>  
  434.                          <div class="col-lg-2">
  435.                      
  436.                      </div>  
  437.                         
  438.                
  439.                     </div>
  440.             </div>        
  441.             
  442.                 <br>
  443.                 
  444.                 </div>
  445.             </div>
  446.         </section>
  448.         
  449.         
  450.         {# blog #}
  451. </div>
  453. {# mobile version #}
  454. <div class="mobile-version">
  455.     
  456.     <section class="slide-mobile">
  457.         <div class="container">
  458.             <h3 class="header-title mb-5 text-center">Filiére Menuiserie</h3>
  459.             <p class="mt-5 text-after-header">
  460.                         Le titulaire du Brevet professionnel Menuisier est un professionnel hautement qualifié de la menuiserie et de l'agencement qui intervient en atelier et sur chantier pour fabriquer et mettre en œuvre différents ouvrages de menuiserie extérieure et intérieure ainsi que tout aménagement de pièce, bureau, cuisine, salle de bains, magasin, salle d'exposition, lieux de réunion et d'accueil de publics...Il est également susceptible d'effectuer des opérations de rénovation des ouvrages courants de la profession mais, aussi, de réhabilitation de ceux qui font partie du patrimoine et des monuments historiques.
  461.                 </p>
  462.                 
  463.                 <div class="session">
  465.                     <h6 class="header-title mb-5">Prochaines sessions  :</h6>
  466.                     <div> <i class="fas fa-calendar-alt mt-3" style="color:white" aria-hidden="true"></i> <span class="date-filiere" style="color:white">12 Nov 2023 - 08:30 </span>  </div>
  467.                     <div> <i class="fas fa-calendar-alt mt-3" style="color:white" aria-hidden="true"></i> <span class="date-filiere date-filiere" style="color:white">12 Nov 2023 - 08:30 </span>   </div>
  468.                     <div> <i class="fas fa-calendar-alt mt-3" style="color:white" aria-hidden="true"></i> <span class="date-filiere" style="color:white">12 Nov 2023 - 08:30 </span>   </div>
  469.                     
  470.                 </div>
  471.                 <div class="text-center">
  472.                      <a href="#" class="btn btn-contact mt-5"><i class="fas fa-comment-dots" aria-hidden="true"></i> Contactez-nous</a>
  473.                     <a href="#" class="btn btn-download mt-3"><i class="fas fa-download" aria-hidden="true"></i> Télécharger la fiche programme</a>
  474.                    
  477.                 </div>
  478.                 
  479.                 
  480.                         
  481.                 
  482.         </div>
  483.     </section>
  484.     
  485.     <section class="second-section">
  486.         
  487.         <div class="container">
  488.             <h2>Filière Menuiserie </h2>
  489.             <img style="width: 65%;" src="/front/images/hr.png" alt="accademy">
  490.             <p style="color:#8D96B5!important; font-size: 13px;">Lorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psoo</p>
  491.             
  492.             <div style=" padding: 22px;background: #3e2e6c ;box-shadow: 0px 1px 24px rgba(3, 1, 56, 0.10);border-radius: 5px;margin-bottom: 10%;">
  493.                             <img style="width: 10%;" src="/front/images/message.png" alt="accademy"><br>
  494.                             <h6 style="color:white;margin-top: 5%;">Délais d’accès aux formations</h6>
  495.                             <p style="color:white !important; font-size: 13px; font-weight: 300;">Adapté la formation aux métiers existants · Formation en lien avec les besoins nationaux · Insertion et Reconversion, Accessibilité</p>
  497.             </div>
  498.             
  499.             
  500.                         <div class="support-scrollsnap mb-5">
  501.                         
  502.                             <div class="scroll-container" style="background: white;">
  503.                                 <div class="scroll-area" style=" padding: 22px;background: white;border-radius: 5px;">
  504.                                     <img style="width: 10%;" src="/front/images/message.png" alt="accademy">
  505.                                     <h3 style="color: #857d7d;">Prérequis</h3>
  506.                                      <p style="color:#8D96B5 !important;margin: auto;font-size:13px"></p>
  507.                                 </div>
  508.                             </div>
  509.                         </div>
  510.             
  511.                          <div class="support-scrollsnap mb-5">
  512.                         
  513.                             <div class="scroll-container" style="background: white;">
  514.                                 <div class="scroll-area" style=" padding: 22px;background: white;border-radius: 5px;">
  515.                                     <img style="width: 10%;" src="/front/images/message.png" alt="accademy">
  516.                                     <h4 style="color: #857d7d;">Modalités d’évaluation</h4>
  517.                                      <p style="color:#8D96B5 !important;margin: auto;font-size:13px">Évaluation formative tout au long de la formation : questionnaires, études de cas, réalisations pratiques<br>Évaluation certificative conforme aux modalités de l’organisme certificateur :<br> Apprentis : Contrôle en Cours de Formation ou épreuves ponctuelles<br> Stagiaires de la Formation Professionnelle Continue : épreuves ponctuelles<br> Domaine professionnel :<br>■ U11 Analyse d’un ouvrage et choix de solutions technologiques<br>■ U12 Préparation d’une fabrication et d’une mise en œuvre sur chantier<br>■ U13 Réalisation et suivi des ouvrages en entreprise<br>■ U20 Fabrication d’un ouvrage<br>■ U30 Mise en œuvre d’un ouvrage sur chantier<br> Domaine général :<br>■ U40 Étude mathématique et scientifique<br>■ U50 Expression et connaissance du Monde<br>■ U60 Langue vivante étrangère<br>Formation inscrite au RNCP permettant la validation d’un ou plusieurs blocs de compétences (Code RNCP : 18317 ) + d’infos sur certificationprofessionnelle.fr</p>
  518.                                 </div>
  519.                              </div>
  520.                         </div>            
  521.                         
  522.                         <div class="support-scrollsnap mb-5">
  523.                         
  524.                             <div class="scroll-container" style="background: #3e2e6c;">
  525.                                 <div class="scroll-area" style=" padding: 22px;background: #3e2e6c;border-radius: 5px;">
  526.                                     <img style="width: 10%;" src="/front/images/message.png" alt="accademy">
  527.                                     <h3 style="color: white;">Modalités</h3>
  528.                                      <p style="color:white !important;margin: auto;font-size:13px;">Adapté la formation aux métiers existants · Formation en lien avec les besoins nationaux · Insertion et Reconversion, Accessibilité· Adapté la formation aux métiers existants · Formation en lien avec les besoins nationaux · Insertion et Reconversion, Accessibilité · Adapté la formation aux métiers existants · Formation en lien avec les besoins nationaux · Insertion et Reconversion, Accessibilité· Adapté la formation aux métiers existants · Formation en lien avec les besoins nationaux · Insertion et Reconversion, Accessibilité</p>
  529.                                 </div>
  530.                              </div>
  531.                         </div>
  532.                         
  533.                         <div class="support-scrollsnap mb-4">
  534.                         
  535.                             <div class="scroll-container" style="background: white;">
  536.                                 <div class="scroll-area" style=" padding: 22px;background:white;border-radius: 5px;">
  537.                                     <img style="width: 10%;" src="/front/images/message.png" alt="accademy">
  538.                                     <h4 style="color: #857d7d;">Méthodes mobilisées</h4>
  539.                                      <p style="color:#8D96B5 !important;margin: auto;font-size:13px">Adapté la formation aux métiers existants · Formation en lien avec les besoins nationaux · Insertion et Reconversion, Accessibilité· Adapté la formation aux métiers existants · Formation en lien avec les besoins nationaux · Insertion et Reconversion, Accessibilité · Adapté la formation aux métiers existants · Formation en lien avec les besoins nationaux · Insertion et Reconversion, Accessibilité· Adapté la formation aux métiers existants · Formation en lien avec les besoins nationaux · Insertion et Reconversion, Accessibilité</p>
  540.                                 </div>
  541.                              </div>
  542.                         </div>
  543.                         
  544.                         
  545.                         <div class="support-scrollsnap mb-4">
  546.                         
  547.                             <div class="scroll-container" style="background: white;">
  548.                                 <div class="scroll-area" style=" padding: 22px;background:white;border-radius: 5px;">
  549.                                     <img style="width: 10%;" src="/front/images/message.png" alt="accademy">
  550.                                     <h4 style="color: #857d7d;">Accessibilité aux PMR</h4>
  551.                                      <p style="color:#8D96B5 !important;margin: auto;font-size:13px">Adapté la formation aux métiers existants · Formation en lien avec les besoins nationaux · Insertion et Reconversion, Accessibilité· Adapté la formation aux métiers existants · Formation en lien avec les besoins nationaux · Insertion et Reconversion, Accessibilité · Adapté la formation aux métiers existants · Formation en lien avec les besoins nationaux · Insertion et Reconversion, Accessibilité· Adapté la formation aux métiers existants · Formation en lien avec les besoins nationaux · Insertion et Reconversion, Accessibilité</p>
  552.                                 </div>
  553.                             </div>
  554.                         </div>
  555.                         
  556.         </div>
  557.         {#end container#}
  558.        
  559.        
  560.                     
  561.     </section>
  562.     <section id="top" class="common-sec main-classes-list third-section">
  563.             <div class="container cont">
  564.                 <div class="row">
  565.                     <h2>Setup Academy :
  566.                         <br><b>Contenu de la formation</b>
  567.                     </h2><br>
  568.                     <img style="margin-bottom: 40px;width: 50%;" src="/front/images/hr.png" alt="accademy">
  569.                     <p style="color:#8D96B5!important;font-size:14px; font-weight:300;     text-align: justify;">Lorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor Lorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor Lorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor Lorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolorum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor Lorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor Lorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor Lorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor psooLorem ipsum dolor </p>
  570.                 </div>
  571.             </div>
  572.         </section>
  573.         
  574.     <section class="common-sec main-our-blog">
  575.             <div class="container">
  576.                 <div class="row">
  577.                     <div class="col-md-8 col-sm-12">
  578.                         <h6 style="color:black; font-weight:bold" class="contact-title">Contactez-nous</h6>
  579.                         <span style="padding: 0px;border-bottom: 2px solid #00008F;padding-left: 36px;position: relative;top: -20px !important;"> </span>
  580.                         <p style="color:#8D96B5!important;font-size:14px; font-weight:300"> N'hésitez pas à nous contacter pour toute question ou demande d'information. Nous reviendrons vers vous dans les plus brefs délais. </p>
  581.                         <form>
  582.                         <div class="row">
  583.                             <div class="col-sm-4">
  584.                                 <input type="text" class="form-control" id="nom" placeholder="Nom">
  585.                             </div>
  586.                             <div class="col-sm-4">
  587.                                  <input type="text" class="form-control" id="prenom" placeholder="Prénom">
  588.                             </div>
  589.                             <div class="col-sm-4">
  590.                                 <input type="email" class="form-control" id="email" placeholder="email@example.com">
  591.                             </div>
  592.                              
  593.                         </div>
  594.                         <div class="row mt-4">
  595.                            <div class="col-sm-12">
  596.                                <textarea style="height:100px" class="form-control" id="message" placeholder="Message"></textarea>
  597.                                <button type="submit" id="sub-form" style="background: #3e2e6c;font-size: 12px;font-weight: 300;">Envoyer <i class="fas fa-chevron-right"></i></button>
  598.                            </div>
  599.                         </form>
  600.                     </div>
  601.                     <div class="col-md-4 col-sm-12" style="background:#FFF9E2;text-align:center">
  602.                         <h6 style="color:black; margin-top:40px">Adresse</h6>
  603.                         <span style="padding: 0px;border-bottom: 2px solid #00008F;padding-left: 36px;position: relative;top: -20px !important;"> </span>
  604.                           <p style="color:#8D96B5!important;font-size:14px; font-weight:300">SETUP Paris - 8 avenue président Salvador Allende - 94400 Vitry sur Seine</p>
  606.                           <p style="color:black; margin-top:30px; font-size: 12px;">(+212) 6 30 81 18 62</p>
  607.                           <p style="color:black; margin-top:8px; font-size: 12px;">direction@smartcraft-academy.fr</p>
  609.                         
  610.                     </div>
  611.                 </div>
  612.                 
  613.             </div>
  614.     </section>
  615. </div>
  617. {% endblock %}