templates/Theme/Produit/Service/Service/aproposdenous.html.twig line 1

Open in your IDE?
  1. {% set hideblock = true %}
  3. {% extends "Theme/Users/User/layouthome.html.twig" %}
  5. {% block meta %}
  6.     {{ parent() }}
  7.     <meta name="keywords" content="{{ site }}, Business, Innovation,Administration"/>
  8.     <meta name="author" content="Noel Kenfack"/>
  9.     <meta name="description" content="{{ site }} | {% if article != null %}{{ article.description }}{% else %}{% if typearticle != null %}{{ typearticle.description }}{% endif %}{% endif %}"/>
  10. {% endblock %}
  12. {% block title %}
  13.     {{ parent() }} - {% if article != null %}{{ typearticle.nom }} - {{ article.nom }}{% else %}{% if typearticle != null %}{{ typearticle.nom }}{% else %}Informations à propos de l'institut{% endif %}{% endif %}
  14. {% endblock %}
  16. {% block stylesheets %}
  17. {{ parent() }}
  19. <style>
  20.   .card {
  21.     display: flex;
  22.     margin-bottom: 30px;
  23.     width: 100%;
  24.     background-color: #fff;
  25.   }
  26.   .card .card-icon-top {
  27.     font-size: 4.5rem;
  28.     margin-top: 3rem;
  29.   }
  30.   .card .card-tags {
  31.     color: #097d6c;
  32.     display: inline-block;
  33.     font-weight: 700;
  34.     margin-bottom: 1rem;
  35.   }
  36.   .card .card-tags:before {
  37.     content: "";
  38.     background-color: #097d6c;
  39.     width: 0.75em;
  40.     height: 0.75em;
  41.     border-radius: 100%;
  42.     display: inline-block;
  43.     margin-right: 0.5rem;
  44.   }
  45.   .card .card-date {
  46.     display: inline-block;
  47.     padding-bottom: 1rem;
  48.   }
  49.   .card .card-title {
  50.     color: #212529;
  51.     display: block;
  52.     font-weight: 700;
  53.     font-size: 1.5rem;
  54.     line-height: 1.33333;
  55.     margin-bottom: 1rem;
  56.   }
  57.   .card .card-title:last-child {
  58.     margin-bottom: 0;
  59.   }
  60.   .card .card-label {
  61.     color: #212529;
  62.     display: block;
  63.     font-size: 1.5rem;
  64.     line-height: 1.33333;
  65.     font-weight: 700;
  66.   }
  67.   .card .card-body {
  68.     padding: 2rem 2rem 2rem 2rem;
  69.     align-self: center;
  70.     width: 100%;
  71.   }
  72.   .card .card-body .popover-wrapper.right {
  73.     position: absolute;
  74.     right: 0;
  75.   }
  76.   .card .card-metadata {
  77.     min-width: 10rem;
  78.   }
  79.   .card .card-footer {
  80.     border-top: none;
  81.     padding: 0 2rem 2rem 2rem;
  82.     background-color: inherit;
  83.     display: flex;
  84.     align-items: center;
  85.   }
  86.   .card .card-footer .vfi {
  87.     color: #097d6c;
  88.     font-size: 2.5rem;
  89.     padding-left: 0.5rem;
  90.   }
  91.   .card .vfi {
  92.     color: #097d6c;
  93.   }
  94.   .card > a {
  95.     border-bottom: none;
  96.     color: #637381;
  97.     display: flex;
  98.     flex-direction: column;
  99.     height: 100%;
  100.   }
  101.   .card > a:hover,
  102.   .card > a:active {
  103.     color: #fff;
  104.     background: #097d6c;
  105.     text-decoration: none;
  106.   }
  107.   .card > a:hover .card-title,
  108.   .card > a:hover .card-icon-top,
  109.   .card > a:hover .card-footer .vfi,
  110.   .card > a:hover .card-tags,
  111.   .card > a:active .card-title,
  112.   .card > a:active .card-icon-top,
  113.   .card > a:active .card-footer .vfi,
  114.   .card > a:active .card-tags {
  115.     color: #fff;
  116.   }
  117.   .card > a:hover .text-muted,
  118.   .card > a:active .text-muted {
  119.     color: #fff !important;
  120.   }
  121.   .card > a:hover .card-tags:before,
  122.   .card > a:active .card-tags:before {
  123.     background-color: #fff;
  124.   }
  125.   .card2 {
  126.     -webkit-transition: all 100ms ease-in-out;
  127.     transition: all 100ms ease-in-out;
  128.     border: none;
  129.     -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);
  130.     box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);
  131.   }
  132.   .card2:hover {
  133.     transform: scale(1.04);
  134.     border: none;
  135.   }
  136.   .card2 > a:hover,
  137.   .card2 > a:active {
  138.     color: inherit;
  139.     background: #fff;
  140.     text-decoration: none;
  141.   }
  142.   .card2 > a:hover .card-icon-top,
  143.   .card2 > a:hover .card-footer .vfi,
  144.   .card2 > a:hover .card-tags,
  145.   .card2 > a:active .card-icon-top,
  146.   .card2 > a:active .card-footer .vfi,
  147.   .card2 > a:active .card-tags {
  148.     color: inherit;
  149.   }
  150.   .card2 > a:hover .card-title,
  151.   .card2 > a:active .card-title {
  152.     color: #097d6c;
  153.   }
  154.   .card2 > a:hover .text-muted,
  155.   .card2 > a:active .text-muted {
  156.     color: #fff !important;
  157.   }
  158.   .card2 > a:hover .card-tags:before,
  159.   .card2 > a:active .card-tags:before {
  160.     background-color: #fff;
  161.   }
  162.   .card3 {
  163.     -webkit-transition: all 200ms ease-in-out;
  164.     transition: all 200ms ease-in-out;
  165.   }
  166.   .card3:hover {
  167.     border: 1px solid #0cb097;
  168.   }
  169.   .card3 > a:hover,
  170.   .card3 > a:active {
  171.     color: inherit;
  172.     background: #fff;
  173.     text-decoration: none;
  174.   }
  175.   .card3 > a:hover .card-icon-top,
  176.   .card3 > a:hover .card-footer .vfi,
  177.   .card3 > a:hover .card-tags,
  178.   .card3 > a:active .card-icon-top,
  179.   .card3 > a:active .card-footer .vfi,
  180.   .card3 > a:active .card-tags {
  181.     color: inherit;
  182.   }
  183.   .card3 > a:hover .card-title,
  184.   .card3 > a:active .card-title {
  185.     color: #212529;
  186.   }
  187.   .card3 > a .card-icon-top,
  188.   .card3 > a .card-icon-top {
  189.     -webkit-transition: all 200ms ease-in-out;
  190.     transition: all 200ms ease-in-out;
  191.   }
  192.   .card3 > a:hover .card-icon-top,
  193.   .card3 > a:active .card-icon-top {
  194.     transform: scale(1.4);
  195.   }
  196.   .card3 > a:hover .text-muted,
  197.   .card3 > a:active .text-muted {
  198.     color: #fff !important;
  199.   }
  200.   .card3 > a:hover .card-tags:before,
  201.   .card3 > a:active .card-tags:before {
  202.     background-color: #fff;
  203.   }
  204.   .card4 {
  205.     -webkit-transition: all 200ms ease-in-out;
  206.     transition: all 200ms ease-in-out;
  207.     border: 0;
  208.     -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);
  209.     box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);
  210.   }
  211.   .card4 > a:hover,
  212.   .card4 > a:active {
  213.     background: #ffffff;
  214.     color: inherit;
  215.     text-decoration: none;
  216.     cursor: url(https://dl.dropbox.com/s/2nmb5ja0g888q8n/arrow.png) 0 0, auto;
  217.   }
  218.   .card4 > a:hover:before,
  219.   .card4 > a:active:before {
  220.     content: "";
  221.     display: block;
  222.     width: 100%;
  223.     height: 100%;
  224.     background: rgba(0, 0, 0, 0.3);
  225.     position: absolute;
  226.   }
  227.   .card4 > a:hover .card-icon-top,
  228.   .card4 > a:hover .card-footer .vfi,
  229.   .card4 > a:hover .card-tags,
  230.   .card4 > a:active .card-icon-top,
  231.   .card4 > a:active .card-footer .vfi,
  232.   .card4 > a:active .card-tags {
  233.     color: inherit;
  234.   }
  235.   .card4 > a:hover .card-title,
  236.   .card4 > a:active .card-title {
  237.     color: #212529;
  238.   }
  239.   .card4 > a .card-icon-top,
  240.   .card4 > a .card-icon-top {
  241.     -webkit-transition: all 200ms ease-in-out;
  242.     transition: all 200ms ease-in-out;
  243.   }
  244.   .card4 > a:hover .text-muted,
  245.   .card4 > a:active .text-muted {
  246.     color: #fff !important;
  247.   }
  248.   .card4 > a:hover .card-tags:before,
  249.   .card4 > a:active .card-tags:before {
  250.     background-color: #fff;
  251.   }
  252.   .card.card-row-layout .card-body {
  253.     text-align: left;
  254.   }
  255.   @media (min-width: 992px) {
  256.     .card.card-row-layout {
  257.       flex-direction: row;
  258.       align-items: center;
  259.     }
  260.     .card.card-row-layout .card-icon-top {
  261.       margin-top: 0;
  262.       margin-left: 2rem;
  263.     }
  264.     .card.card-row-layout .card-icon-top.card-icon-right {
  265.       order: 100;
  266.       margin-right: 2rem;
  267.     }
  268.     .card.card-row-layout .card-body {
  269.       text-align: left;
  270.     }
  271.     .card.card-row-layout .card-footer {
  272.       padding: 2rem;
  273.     }
  274.     .card.card-row-layout .card-footer .vfi {
  275.       font-size: 3.6rem;
  276.     }
  277.     .card.card-row-layout > a {
  278.       flex-direction: row;
  279.       align-items: center;
  280.       width: 100%;
  281.     }
  282.   }
  283.   .card.card-large .card-title,
  284.   .card.card-featured .card-title {
  285.     color: #212529;
  286.     display: block;
  287.     font-weight: 700;
  288.     font-size: 1.5rem;
  289.     line-height: 1.33333;
  290.   }
  291.   .card.card-large .card-body,
  292.   .card.card-featured .card-body {
  293.     text-align: left;
  294.   }
  295.   @media (min-width: 992px) {
  296.     .card.card-fw .card-img-top {
  297.       margin-left: 1rem;
  298.       max-width: 300px;
  299.       order: 100;
  300.     }
  301.   }
  302.   .card.card-large.card-row-layout .card-body {
  303.     text-align: center;
  304.   }
  305.   @media (min-width: 992px) {
  306.     .card.card-large.card-row-layout .card-body {
  307.       text-align: left;
  308.     }
  309.   }
  310.   @media (min-width: 992px) {
  311.     .card.card-large.card-fw .card-img-top {
  312.       margin-left: 1rem;
  313.       max-width: 400px;
  314.       order: 100;
  315.     }
  316.     .card.card-large.card-fw .vfi {
  317.       color: #fff;
  318.     }
  319.   }
  320.   @media (min-width: 1200px) {
  321.     .card.card-large.card-fw .card-img-top {
  322.       max-width: 500px;
  323.     }
  324.   }
  325.   .card.card-featured .card-body .text-muted {
  326.     display: inline-block;
  327.     margin-bottom: 1.5rem;
  328.   }
  329.   .card.card-featured .card-body .card-footer {
  330.     padding: 0;
  331.   }
  332.   @media (min-width: 992px) {
  333.     .card.card-featured .card-img-top {
  334.       flex: 0 0 50%;
  335.       max-width: 50%;
  336.       margin: 0;
  337.       align-self: start;
  338.     }
  339.     .card.card-featured .card-body {
  340.       display: flex;
  341.       flex-flow: column nowrap;
  342.       height: 100%;
  343.     }
  344.     .card.card-featured .card-body .card-footer {
  345.       margin-top: auto;
  346.     }
  347.   }
  348.   .card.card-label-content .card-title {
  349.     font-weight: 700;
  350.   }
  351.   .card.card-label-content .card-label {
  352.     font-size: 1rem;
  353.   }
  354.   .card .rounded-circle {
  355.     margin: 2rem auto 1rem auto;
  356.     width: 61.5%;
  357.   }
  358.   .card[data-toggle="modal"] {
  359.     cursor: pointer;
  360.   }
  361.   .cards > div,
  362.   .cards .card-item {
  363.     display: flex;
  364.   }
  365.   .cards .card.bg-gray-sky {
  366.     border: none;
  367.   }
  368.   .cards.bg-gray-sky {
  369.     background-color: transparent;
  370.   }
  371.   .cards.bg-gray-sky .card {
  372.     background-color: #f4f6f8;
  373.     border: none;
  374.   }
  375.   .cards.bg-gray-sky .card .vfi {
  376.     color: #097d6c;
  377.   }
  378.   .cards.bg-gray-sky .card a:hover .vfi {
  379.     color: #fff;
  380.   }
  381.   .cards.cards-bs-grid {
  382.     display: flex;
  383.     flex-wrap: wrap;
  384.     margin-right: -15px;
  385.     margin-left: -15px;
  386.   }
  387.   .cards.cards-bs-grid .card-item {
  388.     position: relative;
  389.     width: 100%;
  390.     min-height: 1px;
  391.     padding-right: 15px;
  392.     padding-left: 15px;
  393.     flex: 0 0 100%;
  394.     max-width: 100%;
  395.   }
  396.   @media (min-width: 768px) {
  397.     .cards.cards-bs-grid .card-item {
  398.       flex: 0 0 50%;
  399.       max-width: 50%;
  400.     }
  401.   }
  402.   @media (min-width: 992px) {
  403.     .cards.cards-bs-grid .card-item {
  404.       flex: 0 0 33.33333%;
  405.       max-width: 33.33333%;
  406.     }
  407.   }
  408. </style>
  409. {% endblock %}
  411. {% block userblog_body %}
  413. <link rel="stylesheet" href="{{ asset('template/css/jquery.expandable.css') }}">
  414. <script type="text/javascript" src="{{ asset('template/js/jquery.expandable.js') }}"></script>
  415. <style>
  416.   .cool-link {
  417.     display: inline-block;
  418.     color: #000;
  419.     text-decoration: none;
  420.   }
  422.   .cool-link::after {
  423.     content: '';
  424.     display: block;
  425.     width: 0;
  426.     height: 2px;
  427.     background: #000;
  428.     transition: width .3s;
  429.   }
  431.   .cool-link:hover::after {
  432.     width: 100%;
  433.   }
  437.   .welcome_area_thumb .video_btn .video-sonar::before {
  438.       position: absolute;
  439.       width: 90px;
  440.       height: 90px;
  441.       border-radius: 50%;
  442.       background-color: rgba(255, 255, 255, 0.7);
  443.       content: '';
  444.       top: -15px;
  445.       left: -15px;
  446.       z-index: -100;
  447.   }
  449.   .welcome_area_thumb .video_btn .video-sonar::after {
  450.       position: absolute;
  451.       width: 80px;
  452.       height: 80px;
  453.       border-radius: 50%;
  454.       background-color: #ffffff;
  455.       content: '';
  456.       top: -10px;
  457.       left: -10px;
  458.       z-index: -50;
  459.   }
  460. </style>
  463. <div class="breadcrumb-panel" style="background: #f0f0f2;">
  464. <div class="container">
  466. <div class="row">
  467. <div class="col-md-12">
  468.     <div class="animecourant-panel" style="display: block;">
  469.             
  470.     </div>
  471. </div>
  472. </div>
  474. <div class="row">
  475. {% if is_mobile() %}
  476. <div class="col-md-12">
  477. <ol class="c-navigation-breadcrumbs__directory">
  478. <!-- Duplicating the "Home" link in both the global navigation and the breadcrumb trail is not recommended. -->
  479. <li class="c-navigation-breadcrumbs__item" property="itemListElement" typeof="ListItem">
  480.   <a class="c-navigation-breadcrumbs__link" href="" property="item" typeof="WebPage">
  481.     <span class="u-visually-hidden" property="name"><span class="fa fa-home"> </span> Accueil</span>
  482.   </a>
  483.   <meta property="position" content="1">
  484. </li>
  486. <li class="c-navigation-breadcrumbs__item" property="itemListElement" typeof="ListItem">
  487.   <a class="c-navigation-breadcrumbs__link" href="#!" property="item" typeof="WebPage">
  488.     <span property="name">L'Institut</span>
  489.   </a>
  490.   <meta property="position" content="2">
  491. </li>
  494. {% if article != null %}
  495. <li class="c-navigation-breadcrumbs__item" property="itemListElement" typeof="ListItem">
  496.   <a class="c-navigation-breadcrumbs__link" href="#!" property="item" typeof="WebPage">
  497.     <span property="name">{{ typearticle.nom }}</span>
  498.   </a>
  499.   <meta property="position" content="2">
  500. </li>
  502. <li class="c-navigation-breadcrumbs__item" property="itemListElement" typeof="ListItem">
  503.   <a class="c-navigation-breadcrumbs__link" href="#!" property="item" aria-current="location">
  504.     <span property="name">{{ article.nom }}</span>
  505.   </a>
  506.   <meta property="position" content="3">
  507. </li>
  508. {% else %}
  509.     {% if typearticle != null %}
  511.         <li class="c-navigation-breadcrumbs__item" property="itemListElement" typeof="ListItem">
  512.           <a class="c-navigation-breadcrumbs__link" href="#!" property="item" aria-current="location">
  513.             <span property="name">{{ typearticle.nom }}</span>
  514.           </a>
  515.           <meta property="position" content="3">
  516.         </li>
  517.         
  518.     {% else %}
  519.     
  520.         <li class="c-navigation-breadcrumbs__item" property="itemListElement" typeof="ListItem">
  521.           <a class="c-navigation-breadcrumbs__link" href="#!" property="item" aria-current="location">
  522.             <span property="name">Informations à propos de l'institut</span>
  523.           </a>
  524.           <meta property="position" content="3">
  525.         </li>
  526.         
  527.     {% endif %}
  528. {% endif %}
  529. </ol>
  530. </div>
  531. {% else %}
  532. <div class="col-md-12">
  533. <div style="padding: 20px 0px;">
  534.     {% include "Theme/General/Template/Menu/contacts.html.twig" %}
  535.     <ul class="breadcrumbs">
  536.       <li><a href="#"><span class="fa fa-home"></span> Accueil</a></li>
  537.         
  538.     {% if position == 'evenement' %}
  539.     <li>Nos évènements</li>
  540.     {% elseif(position == 'planingcours') %}
  541.     <li>Dépliants et planning des cours</li>
  542.     {% elseif(position == 'mediatheque') %}
  543.     <li><a href="#"> L'institut</a></li>
  544.     <li>Nos vidéos</li>
  545.     {% endif %}
  547.         {% if article != null %}
  548.         <li><a href="#!">{{ typearticle.nom }}</a></li>
  549.         <li>{{ article.nom }}</li>
  550.         
  551.         {% else %}
  552.             {% if typearticle != null %}
  553.                 <li>{{ typearticle.nom }}</li>
  554.             {% endif %}
  555.         {% endif %}
  556.     </ul>
  557. </div>
  559. </div>
  560. {% endif %}
  562. </div>
  563. </div>
  564. </div>
  566. <div style="background: #f0f0f2; padding-top: 20px;">
  567. <div class="container">
  568. <div class="row">
  569.     <div class="col-md-4">
  570.     {{ render(controller("App\\Controller\\Produit\\Service\\ServiceController:menuleft")) }}
  571.   </div>
  574.     {% if position == 'aproposinstitut' %}
  575.         {% include 'Theme/Produit/Service/Apropos/aproposdenous.html.twig' %}
  576.     {% elseif position == 'demarcheaz' %}
  577.         {% include 'Theme/Produit/Service/Apropos/aproposdenous.html.twig' %}
  578.     {% elseif position == 'actualite' %}
  579.         {% include 'Theme/Produit/Service/Apropos/listeactualite.html.twig' %}
  580.     {% elseif position == 'temoignage' %}
  581.         {% include 'Theme/Produit/Service/Apropos/temoignage.html.twig' %}
  582.     {% elseif position == 'avis' %}
  583.         {% include 'Theme/Produit/Service/Apropos/avisutilisateur.html.twig' %}
  584.     {% elseif position == 'evenement' %}
  585.         {% include 'Theme/Produit/Service/Apropos/evenement.html.twig' %}
  586.     {% elseif position == 'mediatheque' %}
  587.         {% include 'Theme/Produit/Service/Apropos/mediatheque.html.twig' %}
  588.     {% elseif position == 'aide' %}
  589.         {% include 'Theme/Produit/Service/Apropos/aide.html.twig' %}
  590.     {% elseif position == 'galeriephoto' %}
  591.         {% include 'Theme/Produit/Service/Apropos/galeriephoto.html.twig' %}
  592.     {% elseif position == 'planingcours' %}
  593.         {% include 'Theme/Produit/Service/Apropos/planingcours.html.twig' %}
  594.     {% endif %}
  595. </div>
  596. </div>
  597. </div>
  599. {% endblock %}
  601. {% block srcjavascripttemplate %}
  602. <script src="{{ asset('template/js/onvisible.js') }}" type="text/javascript"></script>
  603. {% endblock %}
  605. {% block javascripttemplate %}
  607. var bouge = 1;
  608. var dimension = 200;
  609. function activateelement()
  610. {
  611. var visibility = visibleElement('.animecourant-panel');
  613. if(visibility && bouge == 0){
  614.     bouge = 1;
  615.     $('.toutleblock').css('position','relative');
  616.     $('.toutleblock').css('bottom','0px');
  617.     $('.toutleblock').css('margin-bottom','0px');
  618. }
  619. }
  621. function stopelement()
  622. {
  623. var visibility = visibleElement('.stop-courant-panel');
  625. if(visibility && bouge == 1){
  626.     if(visibleElement('.animecourant-panel') && visibleElement('.stop-courant-panel'))
  627.     {
  628.     }else{
  629.     bouge = 0;
  630.     $('.toutleblock').css('position','fixed');
  631.     $('.toutleblock').css('width',dimension+'px');
  632.     $('.toutleblock').css('bottom','7px');
  633.     $('.toutleblock').css('margin-bottom','0px');
  634.     }
  635. }
  636. }
  638. function controlScroll()
  639. {
  640.     var largeur = ($(window).width());
  641.     dimension = $('.toutleblock').width();
  642.     if (largeur >= 768)
  643.     {
  644.         if(visibleElement('.animecourant-panel') && visibleElement('.stop-courant-panel'))
  645.         {
  646.         $('.toutleblock').css('position','fixed');
  647.         $('.toutleblock').css('width',dimension+'px');
  648.         }else{
  649.         window.setInterval(function() { stopelement(); }, 100);
  650.         window.setInterval(function() { activateelement(); }, 100);
  651.         }
  652.         
  653.     }
  654. }
  655. controlScroll();
  658. $('.description2').expandable({
  659.     height: 200,
  660.     expand_responsive : 960,
  661.     offset: 30
  662. });
  665. $('.accordion-1 > li:eq(0) a').addClass('active').next().slideDown();
  666. $('.accordion-2 > li:eq(0) a').addClass('active').next().slideDown();
  668. $('.accordion a.targetlink').click(function(j) {
  669.     var dropDown = $(this).closest('li').find('p');
  670.     $(this).closest('.accordion').find('p').not(dropDown).slideUp();
  671.     if ($(this).hasClass('active')) {
  672.         $(this).removeClass('active');
  673.     } else {
  674.         $(this).closest('.accordion').find('a.active').removeClass('active');
  675.         $(this).addClass('active');
  676.     }
  677.     dropDown.stop(false, true).slideToggle();
  679.     j.preventDefault();
  680. });
  682. {% if article != null %}
  683.     openArticleOverlay({{ article.id }});
  684. {% endif %}
  685. {% endblock %}