templates/pages/filieremenuiserie.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 Menuisier</h3>
  256.                     <p class="mt-5 text-after-header">
  257.                           Le Brevet Professionnel Menuiserie est une formation professionnelle après le CAP (Certificat d'Aptitude Professionnelle) qui vise à approfondir les compétences des professionnels de la menuiserie. Durant cette formation, les étudiants se spécialisent dans la fabrication, la pose et la rénovation d'ouvrages en bois, mais également en matériaux modernes tels que le PVC ou l'aluminium. Les enseignements comprennent des cours pratiques, des travaux en atelier, des stages en entreprise et des matières générales. À la fin de la formation, les titulaires du BP Menuiserie sont prêts à exercer des métiers variés tels que menuisier fabricant, poseur-installateur, ou chef d'équipe en menuiserie.
  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 Menuisier</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;">Par la voie de l’apprentissage ou du contrat de professionnalisation : L’inscription définitive est conditionnée par la signature d’un contrat d’apprentissage ou de professionnalisation avec une entreprise dont le secteur d’activité correspond au métier visé.</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">Être titulaire de l’un des diplômes suivants <br> diplômes de niveau 3 ou supérieur du groupe des spécialités menuiserie et ébénisterie (groupe 234)<br> titre ou diplôme du même secteur professionnel de niveau 3 ou supérieur, inscrit dans le répertoire national des certifications professionnelles Être médicalement apte à l’exercice du métier visé</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;font-size:25px;">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, réalisations <br>
  344. Évaluation certificative conforme aux modalités de l’organisme certificateur : <br>
  345. > Apprentis : Contrôle en Cours de Formation ou épreuves ponctuelles <br>
  346. > Stagiaires de la Formation Professionnelle Continue : épreuves ponctuelles<br> 
  347. > Domaine professionnel : <br>
  348. ■ U11 Analyse d’un ouvrage et choix de solutions technologiques<br>
  349. ■ U12 Préparation d’une fabrication et d’une mise en œuvre sur chantier<br>
  350. ■ U13 Réalisation et suivi des ouvrages en entreprise <br>
  351. ■ U20 Fabrication d’un ouvrage <br>
  352. ■ U30 Mise en œuvre d’un ouvrage sur chantier<br> 
  354. > Domaine général : <br>
  355. ■ U40 Étude mathématique et scientifique<br> 
  356. ■ U50 Expression et connaissance du Monde <br>
  357. ■ U60 Langue vivante étrangère Formation inscrite au RNCP permettant la validation d’un ou plusieurs blocs d
  358. </p>
  359.                                     </div>
  360.                                     <div class="scroll-area" style=" padding: 22px;background: white;box-shadow: 0px 1px 24px rgba(3, 1, 56, 0.10);border-radius: 5px;"></div>
  361.                                 </div>
  362.                             </div>
  363.                           </div>
  364.                      
  365.                             <div class="col-lg-2">
  366.                              
  367.                              </div>  
  368.                              
  369.                             <div class="col-lg-2">
  370.                              
  371.                              </div> 
  372.             </div>  
  373.             <div class="row mb-4">
  374.                     <div class="col-lg-2">
  375.                      
  376.                      </div>  
  377.                      
  378.                          <div class="col-lg-4">
  379.                                      <div class="support-scrollsnap">
  380.                             
  381.                                 <div class="scroll-container" style="background: white;">
  382.                                     <div class="scroll-area" style=" padding: 22px;background: white;border-radius: 5px;">
  383.                                         <img style="width: 10%;" src="{{asset('front/images/message.png') }}" alt="accademy">
  384.                                         <h3 style="color: #857d7d;">Méthodes mobilisées</h3>
  385.                                          <p style="color:#8D96B5 !important;margin: auto;font-size:13px">Méthodes pédagogiques <br>
  386.                                             La formation combine : <br>
  387.                                             ■ Des apports théoriques <br>
  388.                                             ■ Des retours d’expérience <br>
  389.                                             ■ Des travaux collaboratifs <br>
  390.                                             ■ Des mises en situation professionnelle
  391.                                         </p>
  392.                                     </div>
  393.                                     <div class="scroll-area" style=" padding: 22px;background: white;box-shadow: 0px 1px 24px rgba(3, 1, 56, 0.10);border-radius: 5px;"></div>
  394.                                 </div>
  395.                             </div>
  396.                           </div>
  397.                          <div class="col-lg-4">
  398.                                      <div class="support-scrollsnap">
  399.                             
  400.                                 <div class="scroll-container" style="background: white;">
  401.                                     <div class="scroll-area" style=" padding: 22px;background: white;border-radius: 5px;">
  402.                                         <img style="width: 10%;" src="{{asset('front/images/message.png') }}" alt="accademy">
  403.                                         <h3 style="color: #857d7d;FONT-SIZE: 25px;">Contenu de la formation</h3>
  404.                                          <p style="color:#8D96B5 !important;margin: auto;font-size:13px">Domaine professionnel <br>
  405.                                                 ■ L’entreprise et son environnement <br>
  406.                                                 ■ La communication technique <br>
  407.                                                 ■ Le confort de l’habitat <br>
  408.                                                 ■ La mécanique et la résistance des matériaux<br> 
  409.                                                 ■ Les ouvrages <br>
  410.                                                 ■ Les matériaux, les produits et les composants <br>
  411.                                                 ■ Les moyens et techniques de fabrication et de mise en œuvre sur chantier <br>
  412.                                                 ■ La santé et la sécurité au travail <br>
  413.                                                 ■ L’organisation et la gestion de fabrication et de chantier <br>
  414.                                                 ■ Accessibilité du cadre bâti <br>
  415.                                                 
  416.                                                 Domaine Général <br>
  417.                                                 ■ Mathématiques <br>
  418.                                                 ■ Sciences physiques et chimiques <br>
  419.                                                 ■ Expression et connaissance du Monde (Français et Histoire - Géographie)<br>
  420.                                                 ■ Langue vivante : Anglais <br>
  421.                                                 
  422.                                                 Prévention des Risques Professionnels <br>
  423.                                                 ■ Application des principes de prévention des risques CMR <br>
  424.                                                 ■ Préparation au certificat de prévention des risques liés à l'activité physique pour une opération - formation recyclage <br>
  425.                                                 ■ Préparation au certificat de Sauveteur Secouriste du Travail - formation recyclage<br>
  426. </p>
  427.                                     </div>
  428.                                     <div class="scroll-area" style=" padding: 22px;background: white;box-shadow: 0px 1px 24px rgba(3, 1, 56, 0.10);border-radius: 5px;"></div>
  429.                                 </div>
  430.                             </div>
  431.                           </div>
  432.                      
  433.                           <div class="col-lg-2">
  434.                      
  435.                      </div>  
  436.                          <div class="col-lg-2">
  437.                      
  438.                      </div>  
  439.                         
  440.                
  441.                     </div>
  442.             </div>        
  443.             
  444.                 <br>
  445.                 
  446.                 </div>
  447.             </div>
  448.         </section>
  450.         
  451.         
  452.         {# blog #}
  453. </div>
  455. {# mobile version #}
  456. <div class="mobile-version">
  457.     
  458.     <section class="slide-mobile">
  459.         <div class="container">
  460.             <h3 class="header-title mb-5 text-center">Filiére Menuiserie</h3>
  461.             <p class="mt-5 text-after-header">
  462.                         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.
  463.                 </p>
  464.                 
  465.                 <div class="session">
  467.                     <h6 class="header-title mb-5">Prochaines sessions  :</h6>
  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.                     <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>
  470.                     <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>
  471.                     
  472.                 </div>
  473.                 <div class="text-center">
  474.                      <a href="#" class="btn btn-contact mt-5"><i class="fas fa-comment-dots" aria-hidden="true"></i> Contactez-nous</a>
  475.                     <a href="#" class="btn btn-download mt-3"><i class="fas fa-download" aria-hidden="true"></i> Télécharger la fiche programme</a>
  476.                    
  479.                 </div>
  480.                 
  481.                 
  482.                         
  483.                 
  484.         </div>
  485.     </section>
  486.     
  487.     <section class="second-section">
  488.         
  489.         <div class="container">
  490.             <h2>Filière Menuiserie </h2>
  491.             <img style="width: 65%;" src="/front/images/hr.png" alt="accademy">
  492.             <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>
  493.             
  494.             <div style=" padding: 22px;background: #3e2e6c ;box-shadow: 0px 1px 24px rgba(3, 1, 56, 0.10);border-radius: 5px;margin-bottom: 10%;">
  495.                             <img style="width: 10%;" src="/front/images/message.png" alt="accademy"><br>
  496.                             <h6 style="color:white;margin-top: 5%;">Délais d’accès aux formations</h6>
  497.                             <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>
  499.             </div>
  500.             
  501.             
  502.                         <div class="support-scrollsnap mb-5">
  503.                         
  504.                             <div class="scroll-container" style="background: white;">
  505.                                 <div class="scroll-area" style=" padding: 22px;background: white;border-radius: 5px;">
  506.                                     <img style="width: 10%;" src="/front/images/message.png" alt="accademy">
  507.                                     <h3 style="color: #857d7d;">Prérequis</h3>
  508.                                      <p style="color:#8D96B5 !important;margin: auto;font-size:13px"></p>
  509.                                 </div>
  510.                             </div>
  511.                         </div>
  512.             
  513.                          <div class="support-scrollsnap mb-5">
  514.                         
  515.                             <div class="scroll-container" style="background: white;">
  516.                                 <div class="scroll-area" style=" padding: 22px;background: white;border-radius: 5px;">
  517.                                     <img style="width: 10%;" src="/front/images/message.png" alt="accademy">
  518.                                     <h4 style="color: #857d7d;font-size:25px;">Modalités d’évaluation</h4>
  519.                                      <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>
  520.                                 </div>
  521.                              </div>
  522.                         </div>            
  523.                         
  524.                         <div class="support-scrollsnap mb-5">
  525.                         
  526.                             <div class="scroll-container" style="background: #3e2e6c;">
  527.                                 <div class="scroll-area" style=" padding: 22px;background: #3e2e6c;border-radius: 5px;">
  528.                                     <img style="width: 10%;" src="/front/images/message.png" alt="accademy">
  529.                                     <h3 style="color: white;">Modalités</h3>
  530.                                      <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>
  531.                                 </div>
  532.                              </div>
  533.                         </div>
  534.                         
  535.                         <div class="support-scrollsnap mb-4">
  536.                         
  537.                             <div class="scroll-container" style="background: white;">
  538.                                 <div class="scroll-area" style=" padding: 22px;background:white;border-radius: 5px;">
  539.                                     <img style="width: 10%;" src="/front/images/message.png" alt="accademy">
  540.                                     <h4 style="color: #857d7d;">Méthodes mobilisées</h4>
  541.                                      <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>
  542.                                 </div>
  543.                              </div>
  544.                         </div>
  545.                         
  546.                         
  547.                         <div class="support-scrollsnap mb-4">
  548.                         
  549.                             <div class="scroll-container" style="background: white;">
  550.                                 <div class="scroll-area" style=" padding: 22px;background:white;border-radius: 5px;">
  551.                                     <img style="width: 10%;" src="/front/images/message.png" alt="accademy">
  552.                                     <h4 style="color: #857d7d;">Accessibilité aux PMR</h4>
  553.                                      <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>
  554.                                 </div>
  555.                             </div>
  556.                         </div>
  557.                         
  558.         </div>
  559.         {#end container#}
  560.        
  561.        
  562.                     
  563.     </section>
  564.     <section id="top" class="common-sec main-classes-list third-section">
  565.             <div class="container cont">
  566.                 <div class="row">
  567.                     <h2>Setup Academy :
  568.                         <br><b>Contenu de la formation</b>
  569.                     </h2><br>
  570.                     <img style="margin-bottom: 40px;width: 50%;" src="/front/images/hr.png" alt="accademy">
  571.                     <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>
  572.                 </div>
  573.             </div>
  574.         </section>
  575.         
  576.     <section class="common-sec main-our-blog">
  577.             <div class="container">
  578.                 <div class="row">
  579.                     <div class="col-md-8 col-sm-12">
  580.                         <h6 style="color:black; font-weight:bold" class="contact-title">Contactez-nous</h6>
  581.                         <span style="padding: 0px;border-bottom: 2px solid #00008F;padding-left: 36px;position: relative;top: -20px !important;"> </span>
  582.                         <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>
  583.                         <form>
  584.                         <div class="row">
  585.                             <div class="col-sm-4">
  586.                                 <input type="text" class="form-control" id="nom" placeholder="Nom">
  587.                             </div>
  588.                             <div class="col-sm-4">
  589.                                  <input type="text" class="form-control" id="prenom" placeholder="Prénom">
  590.                             </div>
  591.                             <div class="col-sm-4">
  592.                                 <input type="email" class="form-control" id="email" placeholder="email@example.com">
  593.                             </div>
  594.                              
  595.                         </div>
  596.                         <div class="row mt-4">
  597.                            <div class="col-sm-12">
  598.                                <textarea style="height:100px" class="form-control" id="message" placeholder="Message"></textarea>
  599.                                <button type="submit" id="sub-form" style="background: #3e2e6c;font-size: 12px;font-weight: 300;">Envoyer <i class="fas fa-chevron-right"></i></button>
  600.                            </div>
  601.                         </div>
  602.                         </form>
  603.                     </div>
  604.                     <div class="col-md-4 col-sm-12" style="background:#FFF9E2;text-align:center">
  605.                         <h6 style="color:black; margin-top:40px">Adresse</h6>
  606.                         <span style="padding: 0px;border-bottom: 2px solid #00008F;padding-left: 36px;position: relative;top: -20px !important;"> </span>
  607.                           <p style="color:#8D96B5!important;font-size:14px; font-weight:300">SETUP Paris - 8 avenue président Salvador Allende - 94400 Vitry sur Seine</p>
  609.                           <p style="color:black; margin-top:30px; font-size: 12px;">(+212) 6 30 81 18 62</p>
  610.                           <p style="color:black; margin-top:8px; font-size: 12px;">direction@smartcraft-academy.fr</p>
  612.                         
  613.                     </div>
  614.                 </div>
  615.                 
  616.             </div>
  617.     </section>
  618. </div>
  620. {% endblock %}