templates/pages/BP.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block stylesheets %}
  4.     <style>
  5.        .divider-yellow{
  6.            height: 4px;
  7.             background: #EDDB83;
  8.             margin-bottom: 20px;
  9.        }
  10.        .row.filier-container {
  11.             box-shadow: 0px 0px 8px 1px;
  12.             padding-bottom: 11px;
  13.             margin-bottom: 30px;
  14.         }
  15.         .mobile-version{
  16.             display:none;
  17.         }
  18.         .col-sm-12.filiere{
  19.             padding:0;
  20.         }
  21.        .btn-decouvrir{
  22.            float: right;
  23.             margin-top: 22%;
  24.             background: #8080806b;
  25.             color: #16375C;
  26.             padding-right: 40px;
  27.             padding-left: 40px;
  28.             border-radius: 1px 1px 1px 1px;
  29.        }
  30.        .second-section{
  31.            margin-top:-8%;
  32.        }
  33.        @media only screen and (max-width: 767px) {
  35.             .laptop-version{
  36.                 display:none !important;
  37.             }
  38.             .mobile-version{
  39.                 display:block !important;
  40.             }
  41.             .first-section-mobile{
  42.                 background: #7209B7 !important;
  43.                 color: white !important;
  44.                 height: 477px;
  45.                 border-radius: 0px 0px 10px 10px;
  46.                 padding-top: 25px;
  47.             }
  48.             .divider-yellow{
  49.                 width:60%;
  50.             }
  51.             .card-center{
  52.                 margin: auto;
  53.                 width: 76%;
  54.                 padding: 10px;
  55.             }
  56.             img.card-img-top{
  57.                 height:80px;
  58.             }
  59.            
  60.        }
  61.     </style>
  62. {% endblock %}
  63. {% block body %}
  65.     <div class="laptop-version">
  66.         <div class="formation-head">
  67.             <div class="container">
  68.                 <div class="row" style="background-image: url(/front/images/formation-header.png);    margin-bottom: 19%;height: 576px;border-radius: 81px;text-align:center">
  69.                     {#<h3 style="color: white;margin-top: 15%;">BREVET PROFESSIONNEL (BP)</h3>#}
  70.                     <div class="col-sm-2"></div>
  71.                     <div class="col-sm-8">
  72.                         {#<p style="font-weigth:200">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 </p>#}
  73.                         
  74.                          <h3 style="color: white;margin-top: 15%;margin-top:45%;font-size:35px;">BREVET PROFESSIONNEL (BP)</h3>
  75.                     </div>
  76.                     <div class="col-sm-2"></div>
  77.                 </div>   
  78.             </div>
  79.         </div>
  80.         <div class="second-section">
  81.             <div class="container">
  82.                 <div class="row">
  83.                     <div class="col-sm-2">
  84.                         <h5 style="font-weight:200;">Setup Academy :</h5>
  85.                         <h5 style="font-weight:700;">Nos formations </h5>
  86.                         <div class="divider-yellow"></div>
  87.                     </div>
  88.                     <div class="col-sm-2">
  89.                         
  90.                     </div>
  91.                     <div class="col-sm-2">
  92.                         
  93.                     </div>
  94.                     <div class="col-sm-2">
  95.                         
  96.                     </div>
  97.                     <div class="col-sm-2">
  98.                         
  99.                     </div>
  100.                 </div>
  101.                 <div class="row">
  102.                     <div class="col-sm-6">
  103.                         <p style="font-size:13px; color:gray">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>
  104.                     </div>
  105.                     <div class="col-sm-6">
  106.                         
  107.                     </div>
  108.                   
  109.                 </div>
  110.                 <div class="row filier-container">
  111.                     <div class="col-sm-12 filiere">
  112.                         <img src="/front/images/header-filier.png" width="100%"/>
  113.                     </div>
  114.                 <div class="row" style="padding-left: 5%;">
  115.                         <div class="col-sm-4">
  116.                             <h5 style="font-weight:700; margin-top:40px">BP MENUISIER
  117. </h5>
  118.                             {#<div>#}
  119.                             {#    <img src="/front/images/tran.png">#}
  120.                             {#    <span style="font-size:10px">Lorem ipsum</span>#}
  121.                             {#     <img src="/front/images/tran.png">#}
  122.                             {#    <span style="font-size:10px">Lorem ipsum</span>#}
  123.                             {#     <img src="/front/images/tran.png">#}
  124.                             {#    <span style="font-size:10px">Lorem ipsum</span>#}
  125.                             {#</div>#}
  126.                             
  127.                             <div class="mt-5">
  128.                                 <span style="font-weight:bold">Prochaine session</span> : À venir
  129.                             </div>
  130.                         </div>
  131.                         <div class="col-sm-4">
  132.                             {#<p style="font-size:15px;color:gray; margin-top:40px">Serrurerie : BP MÉTALLIER RNCP32231</p>#}
  133.                             {#<p style="font-size:15px;color:gray">Menuiserie : BP MENUISERIE RNCP37238</p>#}
  134.                         </div>
  135.                         <div class="col-sm-4">
  136.                             {#<div style="margin-top:40px">#}
  137.                             {#    <img src="/front/images/tran.png" style="margin-top:10px">#}
  138.                             {#    <span style="font-size:10px">Lorem ipsum</span>#}
  139.                             {#     <img src="/front/images/tran.png" style="margin-top:10px">#}
  140.                             {#    <span style="font-size:10px">Lorem ipsum</span>#}
  141.                             {#     <img src="/front/images/tran.png" style="margin-top:10px">#}
  142.                             {#    <span style="font-size:10px">Lorem ipsum</span>#}
  143.                             {#</div>#}
  144.                             <a href="{{path('filieremenuiserie')}}" class="btn btn-decouvrir">En savoir plus</a>
  145.                         </div>
  146.                     </div>
  147.                 </div>
  148.                 <div class="row filier-container">
  149.                     <div class="col-sm-12 filiere">
  150.                         <img src="/front/images/header-filier.png" width="100%"/>
  151.                     </div>
  152.                 <div class="row" style="padding-left: 5%;">
  153.                         <div class="col-sm-4">
  154.                             <h5 style="font-weight:700; margin-top:40px">BP METALIER
  155. </h5>
  156.                             {#<div>#}
  157.                             {#    <img src="/front/images/tran.png">#}
  158.                             {#    <span style="font-size:10px">Lorem ipsum</span>#}
  159.                             {#     <img src="/front/images/tran.png">#}
  160.                             {#    <span style="font-size:10px">Lorem ipsum</span>#}
  161.                             {#     <img src="/front/images/tran.png">#}
  162.                             {#    <span style="font-size:10px">Lorem ipsum</span>#}
  163.                             {#</div>#}
  164.                             
  165.                             <div class="mt-5">
  166.                                 <span style="font-weight:bold">Prochaine session</span> : À venir
  167.                             </div>
  168.                         </div>
  169.                         <div class="col-sm-4">
  170.                             {# <p style="font-size:15px;color:gray; margin-top:40px">BTS SCBH</p>#}
  171.                             {#<p style="font-size:15px;color:gray">BTS MOS</p>#}
  172.                         </div>
  173.                         <div class="col-sm-4">
  174.                             {#<div>#}
  175.                             {#    <img src="/front/images/tran.png" style="margin-top:10px">#}
  176.                             {#    <span style="font-size:10px">Lorem ipsum</span>#}
  177.                             {#     <img src="/front/images/tran.png" style="margin-top:10px">#}
  178.                             {#    <span style="font-size:10px">Lorem ipsum</span>#}
  179.                             {#     <img src="/front/images/tran.png" style="margin-top:10px">#}
  180.                             {#    <span style="font-size:10px">Lorem ipsum</span>#}
  181.                             {#</div>#}
  182.                             <a href="{{path('serrurerie')}}" class="btn btn-decouvrir">En savoir plus</a>
  183.                         </div
  184.                     </div>
  185.                 </div>
  186.                 {# <div class="row filier-container">#}
  187.                 {#    <div class="col-sm-12 filiere">#}
  188.                 {#        <img src="/front/images/header-filier.png" width="100%"/>#}
  189.                 {#    </div>#}
  190.                 {#<div class="row" style="padding-left: 5%;">#}
  191.                 {#        <div class="col-sm-4">#}
  192.                 {#            <h5 style="font-weight:700; margin-top:40px">Filière Serrrurerie</h5>#}
  193.                 {#            <div>#}
  194.                 {#                <img src="/front/images/tran.png">#}
  195.                 {#                <span style="font-size:10px">Lorem ipsum</span>#}
  196.                 {#                 <img src="/front/images/tran.png">#}
  197.                 {#                <span style="font-size:10px">Lorem ipsum</span>#}
  198.                 {#                 <img src="/front/images/tran.png">#}
  199.                 {#                <span style="font-size:10px">Lorem ipsum</span>#}
  200.                 {#            </div>#}
  201.                             
  202.                 {#            <div class="mt-5">#}
  203.                 {#                <span style="font-weight:bold">Prochaine session</span> : 12 Nov 2023 #}
  204.                 {#            </div>#}
  205.                 {#        </div>#}
  206.                 {#        <div class="col-sm-4">#}
  207.                 {#            <p style="font-size:15px;color:gray; margin-top:40px">Serrurerie : BP MÉTALLIER RNCP32231</p>#}
  208.                 {#            <p style="font-size:15px;color:gray">Menuiserie : BP MENUISERIE RNCP37238</p>#}
  209.                 {#        </div>#}
  210.                 {#        <div class="col-sm-4">#}
  211.                             {#<div>#}
  212.                             {#    <img src="/front/images/tran.png" style="margin-top:10px">#}
  213.                             {#    <span style="font-size:10px">Lorem ipsum</span>#}
  214.                             {#     <img src="/front/images/tran.png" style="margin-top:10px">#}
  215.                             {#    <span style="font-size:10px">Lorem ipsum</span>#}
  216.                             {#     <img src="/front/images/tran.png" style="margin-top:10px">#}
  217.                             {#    <span style="font-size:10px">Lorem ipsum</span>#}
  218.                             {#</div>#}
  219.                 {#            <a href="{{path('BTS')}}" class="btn btn-decouvrir">en savoir plus</a>#}
  220.                 {#        </div>#}
  221.                 {#    </div>#}
  222.                 {#</div>#}
  223.             </div>
  224.         </div>
  225.     </div>
  226.     
  227.     <div class="mobile-version">
  228.         <div style="margin-top:20%;"></div>
  229.         
  230.         <div class="first-section-mobile">
  231.             <h3 style="color: white;margin-top: 15%;text-align: center">Formations</h3>
  232.              <p style="text-align: justify;padding: 25px;">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 </p>
  233.              
  234.         </div>
  235.         <div class="container mt-5">
  236.                 <div class="row">
  237.                     <div class="col-sm-12 mt-5">
  238.                         <h5 style="font-weight:200;">Setup Academy :</h5>
  239.                         <h5 style="font-weight:700;">Nos formations </h5>
  240.                         <div class="divider-yellow"></div>
  241.                     </div>
  242.                 </div>
  243.         </div> 
  244.         <div class="card-center">
  245.             <div class="card text-center mb-4" style="width: 18rem;">
  246.               <img class="card-img-top" src="/front/images/header-filier.png" alt="Card image cap">
  247.               <div class="card-body">
  248.                 <h5 class="card-title mt-3">Filière Menuiserie</h5>
  249.                 {#<div>#}
  250.                 {#    <img src="/front/images/tran.png">#}
  251.                 {#    <span style="font-size:8px">Lorem ipsum</span>#}
  252.                 {#    <img src="/front/images/tran.png">#}
  253.                 {#    <span style="font-size:8px">Lorem ipsum</span>#}
  254.                 {#    <img src="/front/images/tran.png">#}
  255.                 {#    <span style="font-size:8px">Lorem ipsum</span>#}
  256.                 {#</div>#}
  257.                 {#<p class="card-text" style="color:gray;font-size:12px;margin-bottom: 10px;">Serrurerie : BP MÉTALLIER RNCP32231</p>#}
  258.                 {#<p class="card-text" style="color:gray;font-size:12px;margin-bottom: 10px;">Menuiserie : BP MENUISERIE RNCP37238</p>#}
  259.                 {# <div>#}
  260.                 {#    <img src="/front/images/tran.png">#}
  261.                 {#    <span style="font-size:8px">Lorem ipsum</span>#}
  262.                 {#    <img src="/front/images/tran.png">#}
  263.                 {#    <span style="font-size:8px">Lorem ipsum</span>#}
  264.                 {#    <img src="/front/images/tran.png">#}
  265.                 {#    <span style="font-size:8px">Lorem ipsum</span>#}
  266.                 {#</div>#}
  267.                 <h6 style="color:gray" class="mt-4">Prochaine session : À venir</h6>
  269.                  <a href="#" class="btn btn-decouvrir">En savoir plus</a>
  270.               </div>
  271.             </div>
  272.              <div class="card text-center mb-4" style="width: 18rem;">
  273.               <img class="card-img-top" src="/front/images/header-filier.png" alt="Card image cap">
  274.               <div class="card-body">
  275.                 <h5 class="card-title mt-3">Filière Serrrurerie</h5>
  276.                 {#<div>#}
  277.                 {#    <img src="/front/images/tran.png">#}
  278.                 {#    <span style="font-size:8px">Lorem ipsum</span>#}
  279.                 {#    <img src="/front/images/tran.png">#}
  280.                 {#    <span style="font-size:8px">Lorem ipsum</span>#}
  281.                 {#    <img src="/front/images/tran.png">#}
  282.                 {#    <span style="font-size:8px">Lorem ipsum</span>#}
  283.                 {#</div>#}
  284.                 {#<p class="card-text" style="color:gray;font-size:12px;margin-bottom: 10px;">Serrurerie : BP MÉTALLIER RNCP32231</p>#}
  285.                 {#<p class="card-text" style="color:gray;font-size:12px;margin-bottom: 10px;">Menuiserie : BP MENUISERIE RNCP37238</p>#}
  286.                 {# <div>#}
  287.                 {#    <img src="/front/images/tran.png">#}
  288.                 {#    <span style="font-size:8px">Lorem ipsum</span>#}
  289.                 {#    <img src="/front/images/tran.png">#}
  290.                 {#    <span style="font-size:8px">Lorem ipsum</span>#}
  291.                 {#    <img src="/front/images/tran.png">#}
  292.                 {#</div>#}
  293.                 <h6 style="color:gray" class="mt-4">Prochaine session : À venir</h6>
  295.                  <a href="{{path('serrurerie')}}" class="btn btn-decouvrir">En savoir plus</a>
  296.               </div>
  297.             </div>
  298.         </div>    
  299.     </div>
  300.     
  301.     
  302. {% endblock %}