templates/pages/financement.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block stylesheets %}
  5.     <style>
  7.         @media screen and(max-width: 767px) {
  10.             .objectif {
  12.                 height: revert !important;
  13.                 background-image: url('{{ asset('front/images/objectif.png') }}')
  14.             }
  15.             .travel {
  17.                 height: revert !important;
  18.                 background-image: url('{{ asset('front/images/travel.png') }}')
  19.             }
  20.             .slide {
  22.                 height: revert !important;
  23.                 background-image: url('{{ asset('front/images/slide.png') }}')
  24.             }
  26.         }
  29.         #top {
  30.             background-repeat: no-repeat;
  31.             background-size: cover;
  32.             width: revert;
  34.             border-radius: 0 0 73px 73px;
  35.             
  36.             top: 140px;
  37.             margin-bottom: 15%;
  38.         }
  40.         hr {
  41.             width: 36px;
  42.             height: 3px !important;
  43.             background: #00008F;
  44.             margin: 1.5rem 0;
  45.             border: 0;
  46.             opacity: 1;
  47.         }
  49.         .imageslide {
  50.             color: #FFF;
  51.             font-family: Poppins;
  52.             font-size: 40px;
  53.             font-style: normal;
  54.             font-weight: 600;
  55.             line-height: 188%;
  56.         }
  57.         button a {
  58.             color: white;
  59.             font-size: 16px;
  60.             font-weight: 600;
  61.         }
  62.         .acc-body p {
  63.             font-size: 13px;
  64.         }
  65.         #btnslide {
  67.             background-color: transparent;
  68.             width: 250px;
  69.             height: 75px;
  71.             position: relative;
  72.             box-shadow: 0 20px 73px rgba(173.19, 173.19, 173.19, 0.50);
  73.             border-radius: 10px;
  74.             border: 2px #FFEE9D solid;
  76.         }
  78.         #btnslide1 {
  79.             background-color: transparent;
  80.             width: 250px;
  81.             height: 75px;
  83.             position: relative;
  85.             border: 2px transparent solid;
  88.         }
  89.         .cont {
  90.             max-width: 800px;
  91.         }
  92.         h1.header-title.text-center {
  93.             color: white;
  94.         }
  95.         .dot {
  96.             position: relative;
  97.             height: 200px;
  98.             width: 200px;
  99.             background-color: white;
  100.             border-radius: 50%;
  101.             display: inline-block;
  102.             top: -240px;
  103.             left: -76px;
  104.             opacity: 0.10;
  105.         }
  106.         p.text-center.text-after-header {
  107.             color: white;
  108.             font-size: 13px;
  109.             font-weight: 400;
  110.             line-height: 30.08px;
  111.             word-wrap: break-word;
  112.         }
  115.         .panel {
  116.             padding: 20px;
  118.         }
  119.         .accordionMainTitle {
  120.             background: #c1e3ff;
  121.             border: 2px solid #ddd;
  122.             border-radius: 10px 10px 0 0;
  123.             padding: 20px 35px;
  124.             font-family: 'Raleway', sans-serif;
  125.             font-size: 25px;
  126.         }
  128.         .acc-header {
  129.             cursor: pointer;
  130.             padding: 25px;
  131.             color: white;
  132.             font-weight: bold;
  133.             background-color: transparent;
  134.             display: block;
  135.             font-family: 'Raleway', sans-serif;
  136.             margin-bottom: 0;
  137.             border-bottom: 1px solid;
  138.         }
  140.         .acc-body {
  141.             padding: 20px;
  142.             line-height: 1.9;
  143.             background-color: transparent;
  144.             border-radius: 0 0 10px 10px;
  145.             font-family: 'Raleway', sans-serif;
  146.         }
  147.         #accordion .acc-body {
  148.             display: none;
  149.         }
  151.         #accordion .active .acc-body {
  152.             display: block;
  153.         }
  155.         #panel-wrapper {
  156.             top: -10px;
  157.             position: relative;
  158.             display: block;
  159.             background: #3f2a72d1;
  160.         }
  161.         div#panel-wrapper .active {
  162.             background:  #3f2a72d1 !important;
  163.         }
  164.         .iconFixer {
  165.             float: right;
  166.         }
  167.         .acc-header:hover {
  168.             background-color: #580bae !important;
  169.             color: white !important;
  170.         }
  172.         .panel:hover .acc-header {
  173.             /*background-color: #397BB5  !important;*/
  174.             background-color: #580bae  !important;
  175.             color: white !important;
  177.         }
  178.         @media only screen and (max-width: 767px)
  179.             {
  180.                 .col-sm-2{
  181.                     display:none ;
  182.                 }
  183.                 p.text-center.text-after-header{
  184.                     text-align:justify !important;
  185.                 }
  186.                 #top {
  187.                     margin-bottom: 40%;
  188.                 }
  189.                 .acc-header {
  190.                     font-size: 14px;
  191.                     
  192.                 }
  193.               
  194.                 .acc-header:last-of-type {
  195.                     border-bottom: 0px !important;
  196.                 }
  197.             }
  198.             
  199.             section#top .container {
  200.                 padding-bottom: 12%;
  201.                 position: relative;
  202.                 background: #540faee3;
  203.                 top: -85px;
  204.                 padding-top: 10%;
  205.                 border-radius: 0px 0px 50px 50px;
  206.             }
  207.     </style>
  208. {% endblock %}
  210. {% block body %}
  213.     {# travel #}
  215.     <section id="top" class="common-sec main-classes-list ">
  217.         <div class="container  ">
  218.             <div class="row">
  219.                 <div class="col-sm-2">
  220.                     <span class="dot"></span>
  221.                 </div>
  223.                 <div class="col-sm-8">
  224.                     <h1 class="header-title text-center">
  225.                         Financement
  226.                     </h1>
  227.                     <p class="text-center text-after-header">
  228.                         {#Lorem ipsum to lorem Lorem ipsum to loremLorem ipsum to loremLorem ipsum to loremLorem ipsum to loremLorem ipsum to loremLorLorem ipsum to lorem Lorem ipsum to loremLorem ipsum to loremLorem ipsum to loremLorem ipsum to loremLorem ipsum to loremLorLorem ipsum to lorem Lorem ipsum to loremLorem ipsum to loremLorem ipsum to loremLorem ipsum to#}
  229.                         
  230.                         
  231.                         Bienvenue dans notre FAQ dédiée au financement des formations professionnelles. Cette ressource vise à répondre de manière concise et claire à vos interrogations fréquentes sur le financement de ces diplômes. Que vous cherchiez des informations sur le CPF, les aides régionales, ou d'autres sources de financement, nous sommes là pour vous aider dans votre démarche éducative et professionnelle. 
  233.                         Pour les informations les plus récentes, consultez les sources officielles comme l'Onisep et les organismes de formation professionnelle. 
  234.                         
  235.                         Nous espérons que cette FAQ facilitera votre parcours vers la formation !
  237.                     </p>
  240.                     <main>
  241.                         <!-- Start DEMO HTML (Use the following code into your project)-->
  242.                         <div class="accord">
  243.                             <div id="accordion">
  245.                                 <div id="panel-wrapper">
  246.                                     <div class="panel active">
  247.                                         <div class="acc-header">
  249.                                             {#<span>What is Codehim?</span>#}
  250.                                             <span>Quels sont les différents types de financement disponibles pour ma formation ?</span>
  251.                                             <i class="fa fa-chevron-down iconFixer"></i>
  252.                                         </div>
  253.                                         <div class="acc-body">
  254.                                             <p>
  255.                                                 {#CodeHim is one of the BEST developer websites that provide web#}
  256.                                                 {#                  designers and developers with a simple way to preview and#}
  257.                                                 {#                  download a variety of free code &amp; scripts.#}
  258.                                                 
  259.                                                 Il existe plusieurs options de financement pour les étudiants. Vous pouvez bénéficier de bourses d'études du ministère de l'Éducation nationale, de la Région, ou d'organismes privés. De plus, le financement peut également être assuré par des dispositifs tels que le Compte Personnel de Formation (CPF) ou encore par des contrats d'apprentissage ou de professionnalisation
  260.                                             </p>
  261.                                         </div>
  262.                                     </div>
  263.                                     <div class="panel">
  264.                                         <div class="acc-header">
  265.                                             {#<span>Lorem Ipsum is simply dummy text</span>#}
  266.                                             <span>Quelles sont les conditions pour bénéficier d'une bourse d'études ?</span>
  267.                                             <i class="fa fa-chevron-down iconFixer"></i>
  268.                                         </div>
  269.                                         <div class="acc-body">
  270.                                             <p>
  271.                                                 {#But I must explain to you how all this mistaken idea of#}
  272.                                                 {#                  denouncing pleasure and praising pain was born and I will give#}
  273.                                                 {#                  you a complete account of the system, and expound the actual#}
  274.                                                 {#                  teachings of the great explorer of the truth, the#}
  275.                                                 {#                  master-builder of human happiness. No one rejects, dislikes,#}
  276.                                                 {#                  or avoids pleasure itself, because it is pleasure, but because#}
  277.                                                 {#                  those who do not know how to pursue pleasure rationally#}
  278.                                                 {#                  encounter consequences that are extremely painful.#}
  279.                                                 
  280.                                                 Les conditions d'attribution des bourses d'études peuvent varier en fonction des organismes financeurs. En général, ces bourses sont allouées en fonction des revenus du foyer, de la situation familiale et du niveau de formation. Il est recommandé de consulter le site de l'Onisep et celui du ministère de l'Éducation nationale pour obtenir des informations détaillées sur les critères d'éligibilité.
  281.                                             </p>
  282.                                         </div>
  283.                                     </div>
  284.                                     <div class="panel">
  285.                                         <div class="acc-header">
  286.                                             <span class="acc-header-title">Comment fonctionne le Compte Personnel de Formation (CPF) pour le financement de ma formation ?</span>
  287.                                             <i class="fa fa-chevron-down iconFixer"></i>
  288.                                         </div>
  289.                                         <div class="acc-body">
  290.                                             <p>
  291.                                                 Le CPF permet à tout individu de cumuler des droits à la formation tout au long de sa carrière. Pour utiliser votre CPF, vous devez créer un compte sur le site officiel "Mon Compte Formation". Vous pourrez ainsi consulter le montant de vos droits acquis et les utiliser pour suivre votre formation, sous réserve que le diplôme visé soit éligible au CPF.
  292.                                             </p>
  293.                                         </div>
  294.                                     </div>
  295.                                     <div class="panel">
  296.                                         <div class="acc-header">
  297.                                             <span class="acc-header-title">Quelles sont les conditions d'éligibilité pour un contrat d'apprentissage ou un contrat de professionnalisation ?</span>
  298.                                             <i class="fa fa-chevron-down iconFixer"></i>
  299.                                         </div>
  300.                                         <div class="acc-body">
  301.                                             <p>
  302.                                                 Les contrats d'apprentissage et de professionnalisation sont des moyens populaires de financer une formation professionnelle. Les conditions d'éligibilité varient, mais en général, les candidats doivent être âgés de 16 à 29 ans pour un contrat d'apprentissage, et aucune limite d'âge n'est fixée pour un contrat de professionnalisation. Ces contrats sont également accessibles aux personnes en situation de handicap.
  303.                                             </p>
  304.                                         </div>
  305.                                     </div>
  306.                                     <div class="panel">
  307.                                         <div class="acc-header">
  308.                                             <span class="acc-header-title">Quels sont les avantages des contrats d'apprentissage et de professionnalisation pour financer sa formation ?</span>
  309.                                             <i class="fa fa-chevron-down iconFixer"></i>
  310.                                         </div>
  311.                                         <div class="acc-body">
  312.                                             <p>
  313.                                                 Les contrats d'apprentissage et de professionnalisation sont des alternatives intéressantes pour financer ses études tout en acquérant une expérience professionnelle. Ces contrats permettent de bénéficier d'une rémunération tout en suivant la formation, et les frais de scolarité sont pris en charge par l'employeur. De plus, ils facilitent l'insertion professionnelle en favorisant l'acquisition de compétences directement en entreprise
  314.                                             </p>
  315.                                         </div>
  316.                                     </div>
  317.                                     
  318.                                     <div class="panel">
  319.                                         <div class="acc-header">
  320.                                             <span class="acc-header-title">Existe-t-il des bourses ou des aides spécifiques pour les formations professionnelles ?</span>
  321.                                             <i class="fa fa-chevron-down iconFixer"></i>
  322.                                         </div>
  323.                                         <div class="acc-body">
  324.                                             <p>
  325.                                                 Certaines régions proposent des bourses ou des aides spécifiques pour les formations professionnelles, y compris celles liées à la menuiserie, à la serrurerie et à la conception. Consultez les dispositifs mis en place par votre région et n'hésitez pas à contacter les services d'orientation professionnelle pour obtenir des informations précises sur les aides disponibles.
  326.                                             </p>
  327.                                         </div>
  328.                                     </div>
  329.                                     
  330.                                     <div class="panel">
  331.                                         <div class="acc-header">
  332.                                             <span class="acc-header-title">Puis-je cumuler plusieurs sources de financement pour ma formation ?</span>
  333.                                             <i class="fa fa-chevron-down iconFixer"></i>
  334.                                         </div>
  335.                                         <div class="acc-body">
  336.                                             <p>
  337.                                                 Oui, il est souvent possible de cumuler plusieurs sources de financement pour votre formation.Par exemple, vous pouvez combiner le CPF avec d'autres dispositifs tels que le CIF ou des aides régionales. Cependant, les modalités peuvent varier, donc il est recommandé de vérifier les conditions spécifiques de chaque dispositif de financement.
  338.                                             </p>
  339.                                         </div>
  340.                                     </div>
  341.                                     
  342.                                     <div class="panel">
  343.                                         <div class="acc-header">
  344.                                             <span class="acc-header-title">Comment puis-je obtenir plus d'informations sur le financement de ma formation ?</span>
  345.                                             <i class="fa fa-chevron-down iconFixer"></i>
  346.                                         </div>
  347.                                         <div class="acc-body">
  348.                                             <p>
  349.                                                 Pour des informations spécifiques et actualisées sur le financement de vos études, il est recommandé de consulter le site de l'Onisep (Office national d'information sur les enseignements et les professions) et de contacter notre organisme de formation pour obtenir des conseils personnalisés.
  350.                                             </p>
  351.                                         </div>
  352.                                     </div>
  353.                                 </div>
  354.                             </div>
  355.                         </div>
  356.                         <!-- END EDMO HTML (Happy Coding!)-->
  357.                     </main>
  360.                 </div>
  362.                 <div class="col-sm-2"></div>
  363.             </div>
  364.         </div>
  367.     </section>
  369.     {# travel #}
  372.     <script>
  373.         function initAccordion(accordionElem) { // when panel is clicked, handlePanelClick is called.
  374. function handlePanelClick(event) {
  375. showPanel(event.currentTarget);
  376. }
  377. // Hide currentPanel and show new panel.
  379. function showPanel(panel) { // Hide current one. First time it will be null.
  380. var expandedPanel = accordionElem.querySelector(".active");
  381. if (expandedPanel) {
  382. expandedPanel.classList.remove("active");
  383. }
  384. // Show new one
  385. panel.classList.add("active");
  387. }
  388. var allPanelElems = accordionElem.querySelectorAll(".panel");
  389. for (var i = 0, len = allPanelElems.length; i < len; i++) {
  390. allPanelElems[i].addEventListener("click", handlePanelClick);
  391. }
  392. // By Default Show first panel
  393. showPanel(allPanelElems[-1])
  394. }
  395. initAccordion(document.getElementById("accordion"));
  397. //var accordionHeader = document.g
  398.     </script>
  399. {% endblock %}