templates/pages/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block stylesheets %}
  4.         {{ parent() }}
  6.     <style>
  7.         h3.imagesllide{
  8.            color:white; 
  9.         }
  10.         .slide {
  11.             background-repeat: no-repeat;
  12.             background-size: cover;
  13.             width: revert;
  14.             height: 600px;
  15.             background-image: url('{{ asset('front/images/Frame10.png') }}');
  16.             
  17.         }
  18.         section.common-sec.main-classes-list.mt-5.second-section {
  19.                 margin-top: 12% !important;
  20.             }
  21.         .btn-more{
  22.             background:#5821D4;
  23.                 width: 140px;
  24.                 border-radius:0px;
  25.                 color:white;
  26.         }
  27.         
  28.         .btn-more:hover{
  29.       
  30.                 color:white !important;
  31.         }
  32.           i.fas.fa-download {
  33.             color: #FFEE9D;
  34.             font-size: 23px;
  35.             margin-right: 10px;
  36.         }
  37.         i.fas.fa-comment-dots {
  38.             color: #FFEE9D;
  39.             font-size: 23px;
  40.             margin-right: 10px;
  41.         }
  42.            a.btn.btn-download , a.btn.btn-contact {
  43.             color: white;
  44.             font-size: 13px;
  45.         }
  46.         a.btn.btn-contact {
  47.             border: 1px solid white;
  48.             padding: 12px;
  49.             padding-right: 30px;
  50.             padding-left: 30px;
  51.         }
  52.         
  53.         section#top {
  54.             padding: 10%;
  55.             padding-bottom: 46% !important;
  56.         }
  57.     
  58.         .slide {
  59.            background-repeat: round;
  60.     background-size: cover;
  61.     width: 100%;
  62.     height: 600px;
  63.     background-image: url(/front/images/Frame155.png);
  65.         }
  66.         .objectif {
  67.             background-repeat: no-repeat;
  68.             background-size: cover;
  69.             width: revert;
  70.             height: 600px;
  71.             background-image: url('{{ asset('front/images/objectif.png') }}')
  72.         }
  73.         .travel {
  75.             background-repeat: no-repeat;
  76.             background-size: cover;
  77.             width: revert;
  78.             height: 250px;
  79.             background-image: url('{{ asset('front/images/travel.png') }}')
  80.         }
  82.         #top {
  84.             top: 140px;
  86.         }
  88.         hr {
  89.             width: 36px;
  90.             height: 3px !important;
  91.             background: #00008F;
  92.             margin: 1.5rem 0;
  93.             border: 0;
  94.             opacity: 1;
  95.         }
  97.         .imageslide {
  98.             color: #FFF;
  99.             font-family: Poppins;
  100.             font-size: 40px;
  101.             font-style: normal;
  102.             font-weight: 600;
  103.             line-height: 188%;
  104.         }
  105.         button a {
  106.             color: white;
  107.             font-size: 16px;
  108.             font-weight: 600;
  109.         }
  110.         #btnslide {
  112.             background-color: transparent;
  113.             width: 250px;
  114.             height: 75px;
  116.             position: relative;
  117.             box-shadow: 0 20px 73px rgba(173.19, 173.19, 173.19, 0.50);
  118.             border-radius: 10px;
  119.             border: 2px #FFEE9D solid;
  121.         }
  123.         #btnslide1 {
  124.             background-color: transparent;
  125.             width: 250px;
  126.             height: 75px;
  128.             position: relative;
  130.             border: 2px transparent solid;
  133.         }
  134.         .cont {
  135.             max-width: 800px;
  136.         }
  137.         .mobile-version{
  138.                     display:none;
  139.                     text-align: center;
  140.                 }
  141.         
  142.         @media only screen and (max-width: 767px)
  143.             {
  144.                 a.btn.btn-download, a.btn.btn-contact{
  145.                     margin-top: 10px;
  146.                 }
  147.                 .margin-mobile {
  148.                     margin-top: 100px;
  149.                 }
  150.                 .first-section-mobile{
  151.                     background: #3e2e6c !important;
  152.                     color: white !important;
  153.                     height: 650px;
  154.                     border-radius: 0px 0px 10px 10px;
  155.                     padding-top: 25px;
  156.                 }
  157.                 .mobile-version{
  158.                     display:block !important;
  159.                     text-align: center;
  160.                 }
  161.                 p.paragph-mobile {
  162.                     margin: 21px;
  163.                     text-align: justify;
  164.                     padding: 0px 10px 0px 10px;
  165.                 }
  166.                 section.footer {
  167.                     padding: 20% 0 !important;
  168.                 }
  169.                .laptop-version {
  170.                     display: none !important;
  171.                 }
  172.                 
  173.                 .objectif {
  174.     
  175.                     height: revert !important;
  176.                     background-image: url('{{ asset('front/images/objectif.png') }})
  177.                 }
  178.                 .travel {
  179.     
  180.                     height: revert !important;
  181.                     background-image: url('{{ asset('front/images/travel.png') }}')
  182.                 }
  183.                 .slide {
  184.     
  185.                     height: revert !important;
  186.                     background-image: url('{{ asset('front/images/slide.png') }}')
  187.                 }
  188.                 
  189.                 
  191.         }
  192.         
  193.         
  194.     </style>
  195. {% endblock %}
  197. {% block body %}
  199.    
  201.     <div class="laptop-version">
  203.     <section id="top" class="common-sec main-classes-list slide">
  206.         <div class="container">
  207.             <div class="row">
  208.                 <div class="col-lg-6" style="padding: 0px 60px 0px 60px;position: relative;">
  209.                     <h2 style="color:white !important">SMART CRAFT<br>
  210.                         ACADEMY</h2><br>
  211.                     <div class="row">
  212.                         <div class="col-lg-4">
  213.                             <h3 class="imagesllide">2024</h3>
  214.                             <p class="imagesllide">Ouverture</p>
  215.                         </div>
  216.                         <div class="col-lg-4">
  217.                             <h3 class="imagesllide">⁠2</h3>
  218.                             <p class="imagesllide">Diplômes</p>
  219.                         </div>
  220.                         <div class="col-lg-4">
  221.                             <h3 class="imagesllide">3</h3>
  222.                             <p class="imagesllide">Filières</p>
  223.                         </div>
  224.                     </div>
  225.                     <div class="row">
  226.                         {#<div class="col-lg-6">#}
  227.                         {#    <button id="btnslide" type="button">#}
  228.                         {#        <img style="margin: 0px 19px; width: 10%;" src="{{asset('front/images/message.png') }}" alt="accademy">#}
  230.                         {#        <a href="#">Contactez-nous</a>#}
  231.                         {#    </button>#}
  233.                         {#</div>#}
  234.                         {#<div class="col-lg-6">#}
  235.                         {#    <button id="btnslide1" type="button">#}
  236.                         {#        <img style="margin: 0px 19px; width: 10%;" src="{{asset('front/images/telecharger.png') }}" alt="accademy">#}
  238.                         {#        <a href="#">Contactez-nous</a>#}
  239.                         {#    </button>#}
  240.                         {#</div>#}
  241.                         
  242.                         <div class="col-sm-12 text-center mt-5">
  243.                             
  244.                             <a href="#" class="btn btn-contact"><i class="fas fa-comment-dots"></i> Contactez-nous</a>
  245.                             <a href="#" class="btn btn-download"><i class="fas fa-download"></i>Brochure générale</a>
  246.                             
  247.                         </div>
  249.                     </div>
  250.                 </div>
  251.                 <div class="col-lg-6">
  252.                     <center>
  253.                         <p style="color:white !important">CFA d&#39;excellence sur les métiers de l&#39;artisanat et de la construction : organisme de
  254. formation à taille humaine, privilégiant la proximité pour offrir une expérience
  255. éducative de qualité.<br>
  256.                         </p>
  257.                     </center>
  258.                     <div class="row">
  259.                         <div class="col-lg-6">
  260.                             <img style="position: relative;  border-top-left-radius: 740px;border-top-right-radius: 40px;border-bottom-right-radius: 40px;border-bottom-left-radius: 40px;width: 50%;top: 45%;left: 55%;" src="{{asset('front/images/22.png') }}" alt="accademy">
  263.                         </div>
  264.                         <div class="col-lg-6">
  266.                             <img style="width: 90%; border-bottom-right-radius: 1208px;    border-top-left-radius: 40px;border-top-right-radius: 40px;    border-bottom-left-radius: 40px;" src="{{asset('front/images/1.png') }}" alt="accademy">
  269.                         </div>
  271.                     </div>
  272.                 </div>
  274.             </div>
  277.     </section>
  280.         {# objectif #}
  282.         <section class="common-sec main-classes-list mt-5 second-section">
  285.             <div class="container objectif">
  286.                 <div class="row">
  287.                     <div class="col-lg-8">
  288.                         <h2>Nos objectifs?</h2>
  289.                         <img style="width: 90%;" src="{{asset('front/images/hr.png') }}" alt="accademy">
  290.                         <p style="color:#8D96B5!important; text-align: justify;padding: 0px 10px 0px 10px;">Chez Smart Craft Academy, notre mission consiste à former les futures
  291. générations en créant un environnement d&#39;apprentissage fondé sur l&#39;éthique, le
  292. respect et les valeurs du travail. Notre objectif est l&#39;excellence à toutes les étapes,
  293. grâce à des programmes de formation de pointe conçus pour développer les
  294. compétences techniques et professionnelles de nos étudiants. Dans un monde
  295. où les ressources deviennent de plus en plus rares, nous croyons en l&#39;importance
  296. de redécouvrir la noblesse de la matière première.
  297. À Smart Craft Academy, nous enseignons à nos étudiants à travailler la matière à
  298. la main, à la comprendre et à la respecter. Cette approche met l&#39;accent sur la
  299. durabilité, l&#39;efficacité et la qualité dans le travail artisanal, préparant nos étudiants
  300. à devenir des acteurs responsables dans leur domaine. Nous mettons en avant les
  301. valeurs du travail acharné, de la persévérance et de la détermination, et nous
  302. guidons nos étudiants vers la réalisation de leurs objectifs.
  303. Chez Smart Craft Academy, le succès est perçu comme un voyage vers
  304. l&#39;accomplissement personnel et professionnel et nous serons fiers d&#39;être vos
  305. compagnons de route tout au long de votre aventure.</p>
  306.                     </div>
  307.                     <div class="col-lg-4">
  308.                         <div style=" padding: 22px;background: white;box-shadow: 0px 1px 24px rgba(3, 1, 56, 0.10);border-radius: 5px;">
  309.                             <img style="width: 10%;" src="{{asset('front/images/message.png') }}" alt="accademy"><br>
  310.                             <h5>Emploi</h5>
  311.                             <p style="color:#8D96B5 !important;font-size:15px;">Adapter la formation aux métiers existants, formation en lien avec les besoin
  312. nationaux insertion et reconversion accessibilité</p>
  314.                         </div>
  316.                     </div>
  317.                 </div>
  318.                 <br>
  319.                 <div class="row">
  320.                     <div class="col-lg-4">
  321.                         <div style="border-radius: 5px;background: #5821D4;box-shadow: 0px 1px 24px 0px rgba(3, 1, 56, 0.10);padding: 22px; border-radius: 5px;">
  322.                             <img style="width: 10%;" src="{{asset('front/images/message.png') }}" alt="accademy"><br>
  323.                             <h5 style="color:white">Federer les acteurs</h5>
  324.                             <p style="color:#FFFFFF !important; font-size:13px"> Autour des verticalités  Formation/Environnement/Métiers nobles/ Digital<br> Création de l’écosystème vertueux (institutionnels, entreprises...)</p>
  325.                         </div>
  327.                     </div>
  328.                     <div class="col-lg-4">
  329.                         <div style=" padding: 22px;background: white;box-shadow: 0px 1px 24px rgba(3, 1, 56, 0.10);border-radius: 5px;">
  330.                             <img style="width: 10%;" src="{{asset('front/images/message.png') }}" alt="accademy"><br>
  331.                             <h5>Maillage territoriale</h5>
  332.                             <p style="color:#8D96B5 !important; font-size:13px">Innovation dans la formation<br>Partenariats Publics /Privés <br>Lien social et générationnel</p>
  334.                         </div>
  336.                     </div>
  337.                     <div class="col-lg-4">
  338.                         <div style="border-radius: 5px;background: #5821D4;box-shadow: 0px 1px 24px 0px rgba(3, 1, 56, 0.10);padding: 22px; border-radius: 5px;">
  339.                             <img style="width: 10%;" src="{{asset('front/images/message.png') }}" alt="accademy"><br>
  340.                             <h5 style="color:white">Ambition sociale</h5>
  341.                             <p style="color:#FFFFFF !important; font-size:13px"> S'installer dans la durée <br>Former sur les métiers de demain, sur les enjeux environnementaux et digitaux <br> Dimension RSE</p>
  343.                         </div>
  345.                     </div>
  346.                 </div>
  347.             </div>
  348.         </section>
  350.         {# objectif #}
  352.         
  354.         {#<section id="top" class="common-sec main-classes-list travel"></section>#}
  356.         {# travel  #}
  358.         {# formation #}
  359.         <div class="background-section">
  360.             <img style="margin-top: 10%;width: 100%;" src="{{asset('front/images/inginner.png') }}" alt="accademy">
  361.         </div>
  362.         
  363.         <section class="common-sec main-classes-list mt-5">
  364.             <div class="container cont">
  365.                 <div class="row">
  366.                     <h2>Setup Academy :
  367.                         <br><b>Nos formations</b>
  368.                     </h2><br>
  369.                     <img style="margin-bottom: 40px;width: 50%;" src="{{asset('front/images/hr.png') }}" alt="accademy">
  370.                     <p style="color:#8D96B5!important;text-align: justify;padding: 0px 10px 0px 10px;">Porté vers les métiers d'avenir, l'Académie d'Excellence propose des parcours de formation dans des domaines stratégiques pour la sauvegarde du savoir-faire français.</p>
  371.                     <a href="#" class="btn btn-more">En savoir plus</a>
  372.                 </div>
  373.             </div>
  374.         </section>
  376.         {# formation #}
  379.         {# blog #}
  380.         {#<section class="common-sec main-our-blog">#}
  381.         {#    <div class="container">#}
  382.         {#        <div class="row">#}
  383.         {#            <div class="col-12">#}
  384.         {#                <div class="title">#}
  385.         {#                    <span class="sub-title">Blog</span>#}
  386.         {#                    <h2 class="h2-title">Articles Recent</h2>#}
  387.         {#                </div>#}
  388.         {#            </div>#}
  389.         {#        </div>#}
  390.         {#        <div class="blog-list">#}
  391.         {#            <div class="row">#}
  392.         {#                <div class="col-lg-6">#}
  393.         {#                    <div class="blog-box">#}
  394.         {#                        <div class="blog-img-box">#}
  395.         {#                            <div class="blog-img back-img" style="background-image: url('{{ asset('front/images/travel.png') }}')"></div>#}
  396.                                     {#<span class="category">Fitness</span>#}
  397.         {#                              <img src="{{asset('front/images/Group1381.png') }}" alt="phototest" style="  float: right;position: relative;top:15%;right:5%;">#}
  398.         {#                        </div>#}
  399.         {#                        <div class="blog-date-by">#}
  400.         {#                            <p style="color:#727376 !important">Serrurerie : BP MÉTALLIER RNCP32231<br>Menuiserie : BP MENUISERIE RNCP37238</p>#}
  401.         {#                            <h2>Filière Menuiserie & Serrrurerie</h2><br>#}
  402.                                     {#<a href="javascript:void(0);" title="Lorem ipsum">#}
  403.                                     {#    <span class="icon"><img width="16" height="16" src="assets/images/calendar-icon.svg" alt="Calendar"></span>#}
  404.                                     {#    Lorem ipsum</a>#}
  405.                                     {#<a href="javascript:void(0);" title="Lorem ipsum">#}
  406.                                     {#    <span class="icon"><img width="16" height="16" src="assets/images/calendar-icon.svg" alt="Calendar"></span>#}
  407.                                     {#    Lorem ipsum</a>#}
  408.                                     {#<a href="javascript:void(0);" title="Richard Stark">#}
  409.                                     {#    <span class="icon"><img width="16" height="16" src="assets/images/blog-by-icon.svg" alt="Calendar"></span>Lorem ipsum</a>#}
  410.         {#                        </div>#}
  411.         {#                        <div class="blog-text">#}
  413.         {#                            <a href="{{path('filieremenuiserie')}}" class="btn btn-secondary" style="width:40%;" title="Découvrir">Découvrir</a>#}
  414.         {#                        </div>#}
  415.         {#                    </div>#}
  416.         {#                </div>#}
  418.         {#                <div class="col-lg-6">#}
  419.         {#                    <div class="blog-box">#}
  420.         {#                        <div class="blog-img-box">#}
  421.         {#                            <div class="blog-img back-img" style="background-image: url('{{ asset('front/images/travel.png') }}')"></div>#}
  422.                                     {#<span class="category">Fitness</span>#}
  423.         {#                            <img src="{{asset('front/images/Group1381.png') }}" alt="phototest" style="  float: right;position: relative;top:15%;right:5%;">#}
  424.         {#                        </div>#}
  425.         {#                        <div class="blog-date-by">#}
  426.                                     {#<p style="color:#727376 !important">Serrurerie : BP MÉTALLIER RNCP32231<br>Menuiserie : BP MENUISERIE RNCP37238</p>#}
  427.         {#                            <p style="color:#727376 !important">Cybersécurité<br>Conception de décors d’éléments, de mobilier et d’accessoires<br>Réalisation de plans, études et méthodes, modélisation 3D</p>#}
  428.         {#                            <h2>Filière Menuiserie & Serrrurerie</h2><br>#}
  429.                                     {#<a href="javascript:void(0);" title="Lorem ipsum">#}
  430.                                     {#    <span class="icon"><img width="16" height="16" src="assets/images/calendar-icon.svg" alt="Calendar"></span>#}
  431.                                     {#    Lorem ipsum</a>#}
  432.                                     {#<a href="javascript:void(0);" title="Lorem ipsum">#}
  433.                                     {#    <span class="icon"><img width="16" height="16" src="assets/images/calendar-icon.svg" alt="Calendar"></span>#}
  434.                                     {#    Lorem ipsum</a>#}
  435.                                     {#<a href="javascript:void(0);" title="Richard Stark">#}
  436.                                     {#    <span class="icon"><img width="16" height="16" src="assets/images/blog-by-icon.svg" alt="Calendar"></span>Lorem ipsum</a>#}
  437.         {#                        </div>#}
  438.         {#                        <div class="blog-text">#}
  440.         {#                            <a href="{{path('serrurerie')}}" class="btn btn-secondary" style="width:40%;" title="Découvrir">Découvrir</a>#}
  441.                                     {#<button type="button">Secondary</button>#}
  442.         {#                        </div>#}
  443.         {#                    </div>#}
  444.         {#                </div>#}
  445.         {#            </div>#}
  446.         {#        </div>#}
  447.         {#    </div>#}
  448.         {#</section>#}
  449.         {# blog #}
  450.     </div>
  451.     
  452.     <div class="mobile-version">
  453.         <div class="margin-mobile"></div>
  454.         <div class="first-section-mobile">
  455.           <h2 style="color:white !important">SMART CRAFT ACADEMY </h2>
  456.             <div class="images-version mt-5">
  457.                 <img style="width: 30%;  border-top-left-radius: 740px;border-top-right-radius: 40px;border-bottom-right-radius: 40px;border-bottom-left-radius: 40px;" src="{{asset('front/images/22.png') }}" alt="accademy">
  458.                 <img style="width: 30%;border-bottom-right-radius: 1208px;" src="{{asset('front/images/1.png') }}" alt="accademy">
  459.             </div>
  460.             <div>
  461.                 <p class="paragph-mobile">CFA d&#39;excellence sur les métiers de l&#39;artisanat et de la construction : organisme de
  462. formation à taille humaine, privilégiant la proximité pour offrir une expérience
  463. éducative de qualité.
  464.                 </p>
  465.             </div>
  466.             <div class="row">
  467.                 <div class="col-sm-3"><h3>Ouverture</h3></div>
  468.                 <div class="col-sm-3">2024</div>
  469.                 <div class="col-sm-3"><h3>Diplômes</h3></div>
  470.                 <div class="col-sm-3">2</div>
  471.                  <div class="col-sm-3"><h3>Filières</h3></div>
  472.                 <div class="col-sm-3">3</div>
  473.             </div>
  474.             <div class="row">
  475.                 
  476.                 
  477.                
  478.             </div>
  479.             <a href="#" class="btn btn-contact"><i class="fas fa-comment-dots" aria-hidden="true"></i> Contactez-nous</a>
  480.             <a href="#" class="btn btn-download"><i class="fas fa-download" aria-hidden="true"></i>Brochure générale</a>
  481.             
  482.         </div>
  483.         
  484.         <div class="second-section-mobile mt-5">
  485.             
  486.             <div class="container objectif">
  487.                 <div class="row">
  488.                     <div class="col-lg-8">
  489.                         <h2>Nos objectifs?</h2>
  490.                         <img style="width: 90%;" src="/front/images/hr.png" alt="accademy">
  491.                         <p style="color:#8D96B5!important;text-align: justify;padding: 0px 10px 0px 10px;">Chez Smart Craft Academy, notre mission consiste à former les futures
  492. générations en créant un environnement d&#39;apprentissage fondé sur l&#39;éthique, le
  493. respect et les valeurs du travail. Notre objectif est l&#39;excellence à toutes les étapes,
  494. grâce à des programmes de formation de pointe conçus pour développer les
  495. compétences techniques et professionnelles de nos étudiants. Dans un monde
  496. où les ressources deviennent de plus en plus rares, nous croyons en l&#39;importance
  497. de redécouvrir la noblesse de la matière première.
  498. À Smart Craft Academy, nous enseignons à nos étudiants à travailler la matière à
  499. la main, à la comprendre et à la respecter. Cette approche met l&#39;accent sur la
  500. durabilité, l&#39;efficacité et la qualité dans le travail artisanal, préparant nos étudiants
  501. à devenir des acteurs responsables dans leur domaine. Nous mettons en avant les
  502. valeurs du travail acharné, de la persévérance et de la détermination, et nous
  503. guidons nos étudiants vers la réalisation de leurs objectifs.
  504. Chez Smart Craft Academy, le succès est perçu comme un voyage vers
  505. l&#39;accomplissement personnel et professionnel et nous serons fiers d&#39;être vos
  506. compagnons de route tout au long de votre aventure.</p>
  507.                     </div>
  508.                     <div class="col-lg-4">
  509.                         <div style=" padding: 22px;background: white;box-shadow: 0px 1px 24px rgba(3, 1, 56, 0.10);border-radius: 5px;">
  510.                             <img style="width: 10%;" src="/front/images/message.png" alt="accademy"><br>
  511.                             <h5>Emploi</h5>
  512.                             <p style="color:#8D96B5 !important;font-size:15px;">Adapter la formation aux métiers existants, formation en lien avec les besoin
  513. nationaux insertion et reconversion accessibilité</p>
  515.                         </div>
  517.                     </div>
  518.                 </div>
  519.                 <br>
  520.                 <div class="row">
  521.                     <div class="col-lg-4 mt-3">
  522.                         <div style="border-radius: 5px;background: #3e2e6c;box-shadow: 0px 1px 24px 0px rgba(3, 1, 56, 0.10);padding: 22px; border-radius: 5px;">
  523.                             <img style="width: 10%;" src="/front/images/message.png" alt="accademy"><br>
  524.                             <h5 style="color:white">Federer les acteurs</h5>
  525.                             <p style="color:#FFFFFF !important; font-size:13px"> Autour des verticalités  Formation/Environnement/Métiers nobles/ Digital<br> Création de l’écosystème vertueux (institutionnels,&nbsp;entreprises...)</p>
  526.                         </div>
  528.                     </div>
  529.                     <div class="col-lg-4  mt-3">
  530.                         <div style=" padding: 22px;background: white;box-shadow: 0px 1px 24px rgba(3, 1, 56, 0.10);border-radius: 5px;">
  531.                             <img style="width: 10%;" src="/front/images/message.png" alt="accademy"><br>
  532.                             <h5>Maillage territoriale</h5>
  533.                             <p style="color:#8D96B5 !important; font-size:13px">Innovation dans la formation<br>Partenariats Publics/Privés<br>Lien social et générationnel</p>
  535.                         </div>
  537.                     </div>
  538.                     <div class="col-lg-4 mt-3">
  539.                         <div style="border-radius: 5px;background: #3e2e6c;box-shadow: 0px 1px 24px 0px rgba(3, 1, 56, 0.10);padding: 22px; border-radius: 5px;">
  540.                             <img style="width: 10%;" src="/front/images/message.png" alt="accademy"><br>
  541.                             <h5 style="color:white">Ambition sociale</h5>
  542.                             <p style="color:#FFFFFF !important; font-size:13px"> S'installer dans la durée <br>Former sur les métiers de demain, sur les enjeux environnementaux et digitaux <br> Dimension RSE</p>
  544.                         </div>
  546.                     </div>
  547.                 </div>
  548.             </div>
  549.             <div class="background-section">
  550.                 <img style="margin-top: 10%;width: 100%;" src="{{asset('front/images/inginner.png') }}" alt="accademy">
  551.             </div>
  552.             <section class="common-sec main-classes-list">
  553.             <div class="container cont">
  554.                 <div class="row">
  555.                     <h2>Setup Academy :
  556.                         <br><b>Nos formations</b>
  557.                     </h2><br>
  558.                     <img style="margin-bottom: 40px;width: 50%;display: block;margin-left: auto; margin-right: auto;" src="/front/images/hr.png" alt="accademy">
  559.                     <p style="color:#8D96B5!important;text-align: justify;padding: 0px 10px 0px 10px;">Porté vers les métiers d'avenir, l'Académie d'Excellence propose des parcours de formation dans des domaines stratégiques pour la sauvegarde du savoir-faire français.</p>
  560.                     <div class="text-center"><a href="#" class="btn btn-more">En savoir plus</a></div>
  561.                     
  562.                     </div>
  563.                 </div>
  564.             </section>
  565.             
  566.             <div class="third-section-mobile">
  567.                 
  568.                 <section class="main-our-blog">
  569.                     <div class="container">
  570.                         <div class="row">
  571.                             <div class="col-12">
  572.                                 <div class="title">
  573.                                     <span class="sub-title">Blog</span>
  574.                                     <h2 class="h2-title">Articles Recent</h2>
  575.                                 </div>
  576.                             </div>
  577.                         </div>
  578.                         <div class="blog-list">
  579.                             <div class="row">
  580.                                 <div class="col-lg-6">
  581.                                     <div class="blog-box">
  582.                                         <div class="blog-img-box">
  583.                                             <div class="blog-img back-img" style="background-image: url('/front/images/travel.png')"></div>
  584.                                                                                   <img src="/front/images/Group1381.png" alt="phototest" style="  float: right;position: relative;top:15%;right:5%;">
  585.                                         </div>
  586.                                         <div class="blog-date-by">
  587.                                             <p style="color:#727376 !important">Serrurerie : BP MÉTALLIER RNCP32231<br>Menuiserie : BP MENUISERIE RNCP37238</p>
  588.                                             <h2>Filière Menuiserie &amp; Serrrurerie</h2><br>
  589.                                                                                                                                                                                                                                                                                                                                         </div>
  590.                                         <div class="blog-text">
  591.         
  592.                                             <a href="/filieremenuiserie" class="btn btn-secondary" style="width:40%;" title="Découvrir">Découvrir</a>
  593.                                         </div>
  594.                                     </div>
  595.                                 </div>
  596.         
  597.                                 <div class="col-lg-6">
  598.                                     <div class="blog-box">
  599.                                         <div class="blog-img-box">
  600.                                             <div class="blog-img back-img" style="background-image: url('/front/images/travel.png')"></div>
  601.                                                                                 <img src="/front/images/Group1381.png" alt="phototest" style="  float: right;position: relative;top:15%;right:5%;">
  602.                                         </div>
  603.                                         <div class="blog-date-by">
  604.                                                                                 <p style="color:#727376 !important">Cybersécurité<br>Conception de décors d’éléments, de mobilier et d’accessoires<br>Réalisation de plans, études et méthodes, modélisation 3D</p>
  605.                                             <h2>Filière Menuiserie &amp; Serrrurerie</h2><br>
  606.                                                                                                                                                                                                                                                                                                                                         </div>
  607.                                         <div class="blog-text">
  608.         
  609.                                             <a href="/serrurerie" class="btn btn-secondary" style="width:40%;" title="Découvrir">Découvrir</a>
  610.                                                                             </div>
  611.                                     </div>
  612.                                 </div>
  613.                             </div>
  614.                         </div>
  615.                     </div>
  616.                 </section>
  617.                 
  618.                 
  619.             </div>
  620.         </div>
  621.         
  622.         
  623.         
  624.         
  625.     </div>
  627. {% endblock %}