templates/Theme/Produit/Produit/Produit/businessretenu.html.twig line 1

Open in your IDE?
  1. {% extends "Theme/Users/User/layoutoffert.html.twig" %}
  2. {% block meta %}
  4.     {{ parent() }}
  5.     <meta name="keywords" content="{{ site }}, {{ keywords }}"/>
  6.     <meta name="author" content="Noel Kenfack"/>
  7.     <meta name="description" content="{{ site }} - {{ souscategorie.nom }}"/>
  8.     
  9. {% endblock %}
  11. {% block title %}
  12.     {{ parent() }} - {{ souscategorie.nom }}
  13. {% endblock %}
  15. {% block userblog_body %}
  16. <style>
  17.     .mzp-c-details .is-summary button:before, details .is-summary button:before, summary:before{
  18.         display: none!important;
  19.     }
  20. </style>
  21. <div style="background: #90acd1; min-height: 200px;">
  22. <div class="container" style="overflow: hidden;">
  23.     <div class="row" style="margin-top: 15px;">
  24.     <div class="col-md-8">
  25.     {% if is_mobile() %}
  26.     <ol class="c-navigation-breadcrumbs__directory">
  27.         <!-- Duplicating the "Home" link in both the global navigation and the breadcrumb trail is not recommended. -->
  28.         <li class="c-navigation-breadcrumbs__item" property="itemListElement" typeof="ListItem">
  29.           <a class="c-navigation-breadcrumbs__link" href="" property="item" typeof="WebPage">
  30.             <span class="u-visually-hidden" property="name"><span class="fa fa-home"> </span> Accueil</span>
  31.           </a>
  32.           <meta property="position" content="1">
  33.         </li>
  35.         <li class="c-navigation-breadcrumbs__item" property="itemListElement" typeof="ListItem">
  36.           <a class="c-navigation-breadcrumbs__link" href="" property="item" typeof="WebPage">
  37.             <span property="name"> L'entreprise</span>
  38.           </a>
  39.           <meta property="position" content="2">
  40.         </li>
  42.         <li class="c-navigation-breadcrumbs__item" property="itemListElement" typeof="ListItem">
  43.           <a class="c-navigation-breadcrumbs__link" href="#!" property="item" aria-current="location">
  44.             <span property="name">À propos de  nous </span>
  45.           </a>
  46.           <meta property="position" content="3">
  47.         </li>
  48.     </ol>
  49.     {% else %}
  50.     <div style="padding: 20px 0px;">
  51.         <ul class="breadcrumbs">
  52.           <li><a href="{{ path('users_user_acces_plateforme') }}"><span class="fa fa-home"></span> Accueil</a></li>
  53.           <li><a > L'entreprise</a></li>
  54.           <li>À propos de nous</li>
  55.         </ul>
  56.     </div>
  57.     {% endif %}
  58.     
  59.     <div>
  60.         <h2 style="color: #fff;">{{ souscategorie.nom }}</h2>
  61.         <div style="color: #fff;">{{ souscategorie.description }}</div>
  62.     </div>
  63.   </div>
  64.   
  65.     <!-- div class="col-md-4">
  66.         <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0" class="my-svg">
  67.           <defs>
  68.             <filter id="goo">
  69.               <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
  70.               <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
  71.               <feBlend in="SourceGraphic" in2="goo" />
  72.             </filter>
  73.           </defs>
  74.         </svg>
  75.         <div class="demo">
  76.           <div class="demo__buttons">
  77.             <div class="demo__social-btn-4 demo__social-btn"><i class="fa fa-snapchat"></i></div>
  78.             <div class="demo__social-btn-3 demo__social-btn"><i class="fa fa-instagram"></i></div>
  79.             <div class="demo__social-btn-2 demo__social-btn"><i class="fa fa-facebook"></i></div>
  80.             <div class="demo__social-btn-1 demo__social-btn"><i class="fa fa-twitter"></i></div>
  81.             <div class="demo__open-btn"><i class="fa fa-share-alt"></i></div>
  82.           </div>
  83.           <h2 class="text-center" style="color: #fff;">Share and win</h2>
  84.         </div>
  85.     </div -->
  86.   
  87.   </div>
  89.   
  90. </div>
  91. </div>
  93. <div style="background-image: linear-gradient(-1deg, #F6FCFF 0%, #EAF7FF 98%); background: #f2f2f2;">
  94.     <div class="container" style="height: 100px;">
  95.       
  96.     </div>
  97. </div>
  99. <style>
  100.     .brand-wrap {
  101.       position: relative;
  102.       z-index: 2;
  103.     }
  104.     
  105.     @media (max-width: 991px) {
  106.         .brand-wrap {
  107.           padding: 20px 0;
  108.         } 
  109.     }
  110.     
  111.     .brand-wrap .owl-carousel .owl-item img {
  112.         width: auto !important; 
  113.     }
  114.     
  115.     .brand-wrap .single-brand {
  116.         text-align: center;
  117.         -webkit-filter: grayscale(100%);
  118.         -moz-filter: grayscale(100%);
  119.         -ms-filter: grayscale(100%);
  120.         -o-filter: grayscale(100%);
  121.         filter: grayscale(100%);
  122.         opacity: .5;
  123.         -webkit-transition: all 0.3s ease 0s;
  124.         -moz-transition: all 0.3s ease 0s;
  125.         -o-transition: all 0.3s ease 0s;
  126.         transition: all 0.3s ease 0s; 
  127.     }
  128.     
  129.     .brand-wrap .single-brand:hover{
  130.       -webkit-filter: grayscale(0%);
  131.       -moz-filter: grayscale(0%);
  132.       -ms-filter: grayscale(0%);
  133.       -o-filter: grayscale(0%);
  134.       filter: grayscale(0%);
  135.       opacity: 1; 
  136.      }
  137. </style>
  139. <div style="background: transparent; margin-bottom: -140px;">
  140. <div class="container" style="background: transparent;">
  142.   <div class="row" style="margin-top: 25px; background: transparent;">
  143.     <div class="col-md-12">
  144.     <div style="overflow: hidden; position: relative; top: -140px!important;  padding: 15px 7px; border-radius: 7px; border-top: 2px solid #ddd; border-radius: 15px; background: #fff;">
  146.         <h2>Services</h2>
  147.         <div class="boxC12">
  148.             
  149.             <details>
  150.                 <summary>
  151.                 <p> service.nom </p><span class="plusminus"></span>
  152.                 </summary>
  153.                 <p>
  154.                         service.description|raw
  155.                 
  156.                     
  157.                     <div class="box">
  158.                         <div class="title-bold">
  159.                             <span> scat.nom </span>
  160.                         </div>
  161.                         <div class="inner-profile">
  162.                                 scat.description|raw 
  163.                         </div>
  164.                         <div class="clearfix"></div>
  165.                     </div>
  167.                 </p>
  168.             </details>
  170.         </div>
  172.     </div>
  173.     </div>
  174.   </div>
  175.   
  176. </div>
  177. </div>
  179. <div style="background-image: linear-gradient(-1deg, #F6FCFF 0%, #EAF7FF 98%); margin-bottom: 30px;">
  180.     <div class="container" style="padding-top: 25px; padding-bottom: 25px;">
  181.        
  182.         <section style="margin-top: -20px;">
  183.             <div style="width: 100%; margin: 0px auto;">
  184.             <link href="{{ asset('template/css/tyfy.css') }}" rel="stylesheet"/>
  185.             <style>
  186.               div.demotabs {
  187.                 border: 2px dashed #e6e6e6;
  188.                 border-radius: .8125rem;
  189.                 box-shadow: inset 0px 0px 1.625rem rgba(0, 0, 0, 0.05);
  190.                 margin-top: 1.625rem;
  191.                 padding: 15px;
  192.                 background: #fff;
  193.               }
  194.               .links-underlined a[href]{border-bottom-style:solid;border-bottom-width:2px}ol,ul{line-height:1.625rem;padding-left:2.4375rem}
  195.             </style>
  196.             
  197.             
  198.             <div class="demotabs">
  199.                 <div class="mzp-l-content">
  200.               <div class="links-underlined">
  201.                   <h1>En quoi AFH Factory vous êtes utiles ?</h1>
  202.                   <p>  This is my implementation of responsive tabs. It is being incorporated into my <a href="https://github.com/aaronpinero/typography">Tyfy framework</a>.</p>
  203.               </div>
  204.               <div class="tabs-container">
  205.                   <h2 class="tab-label">Présentation</h2>
  206.                   <p>Porro excepturi ad eligendi excepturi quam voluptate velit. Placeat modi animi natus est temporibus tenetur pariatur suscipit. Dolores sit id sit placeat consequatur temporibus accusamus et. Cumque voluptatum voluptatum delectus et sequi. Vero vitae officia eius ad. Consequatur impedit quam mollitia.</p>
  207.                   <p>Aspernatur id nihil sit eveniet vero corporis necessitatibus sit. Magni quia vitae perferendis. Suscipit illo tempora minus officia nemo aut numquam. Qui et omnis velit repudiandae autem. Aperiam aut dolorem neque quis dolor est sunt.</p>
  208.                   
  209.                   <h2 class="tab-label collapsed">Eligibilité</h2>
  210.                   <p>Facilis error corrupti dolor eaque. 
  211.                   <a id="anchor">Occaecati</a> illum sequi officia rerum nostrum. Iste in quo eveniet. Deserunt quaerat a adipisci magni consequatur nesciunt distinctio praesentium. Ipsum vel ut est vel veritatis fugiat perspiciatis.</p>
  212.                   <p>Omnis dolores sit pariatur facilis odit magni. Totam excepturi incidunt dolorem assumenda neque dolorem. Dolorem odio consequatur quas corrupti sequi. Nihil ut nihil itaque non at molestiae corporis. Explicabo voluptate quis et.</p>
  213.                   
  214.                   <h2 class="tab-label collapsed">Rapport</h2>
  215.                   <p>Curabitur non mauris sodales, tempor lacus ac, maximus felis. Vestibulum ultrices augue ut arcu mattis pellentesque. Maecenas ullamcorper lorem sit amet pretium pharetra. Nunc ipsum tellus, hendrerit vitae bibendum vel, scelerisque sit amet libero. Duis imperdiet massa placerat venenatis pharetra. Donec consectetur quis odio sit amet sollicitudin. Morbi at faucibus odio. Duis viverra lacus a odio pretium, quis suscipit tortor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur egestas venenatis est vel hendrerit. Fusce molestie bibendum ex in suscipit.</p>
  216.                   
  217.                   <h2 class="tab-label collapsed">Historique</h2>
  218.                   <p>Curabitur non mauris sodales, tempor lacus ac, maximus felis. Vestibulum ultrices augue ut arcu mattis pellentesque. Maecenas ullamcorper lorem sit amet pretium pharetra. Nunc ipsum tellus, hendrerit vitae bibendum vel, scelerisque sit amet libero. Duis imperdiet massa placerat venenatis pharetra. Donec consectetur quis odio sit amet sollicitudin. Morbi at faucibus odio. Duis viverra lacus a odio pretium, quis suscipit tortor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur egestas venenatis est vel hendrerit. Fusce molestie bibendum ex in suscipit.</p>
  219.                   
  220.               </div>
  221.             
  222.             <h2>Notes</h2>
  223.             <p>I've relied on CSS Flexbox for the visual tabs. Flexbox is <a href="https://caniuse.com/#search=flex">a problem for just about any version of Internet <strike>Exploder</strike> Explorer</a>. At some point, I'll need to figure out an alternative way to present the tabs that will work for IE.</p>
  224.           </div>
  225.           </div>
  226.             
  227.           <script>
  228.               $(document).ready(function(){
  229.         
  230.                 GoToAnchor = function(){
  231.                   // find the anchor and any tab it might be in
  232.                   selected_anchor_name = encodeURIComponent(window.location.hash.substring(1));
  233.                       selected_anchor = $('a[name="'+selected_anchor_name+'"], a[id="'+selected_anchor_name+'"]');
  234.                   parent_tab = selected_anchor.parents('.tab-panel');
  235.                   // account for an anchor in a label
  236.                   parent_label = selected_anchor.parents('.tab-label');
  237.                   if (parent_label.length) {
  238.                     parent_tab = parent_label.next('.tab-panel');
  239.                   }
  240.                   // do the steps of this function only if we have an anchor link and a tab panel
  241.                   if (selected_anchor.length && parent_tab.length) {
  242.                     parent_tab_label = parent_tab.prev('.tab-label');
  243.                         parent_tab_index = parent_tab_label.attr('data-tabindex');
  244.                     parent_tab.parent().find('ul.tabs li').eq(parent_tab_index).click();
  245.                     if (parent_tab.hasClass('collapsed')) {
  246.                       parent_tab.removeClass('collapsed');
  247.                       parent_tab_label.removeClass('collapsed');
  248.                     }
  249.                     // scroll to the anchor
  250.                     var s = selected_anchor.offset().top - 50; // console.log(s);
  251.                     $('body,html').animate({'scrollTop':s},500,'swing');
  252.                       }
  253.                 };
  254.                 
  255.                 // prepare HTML structure for each tab container
  256.                 $('.tabs-container').each(function(){
  257.                   if (!$(this).hasClass('tabs-processed')) {
  258.                     // find the headings that are tab labels
  259.                     my_tablabels = $(this).find('.tab-label');
  260.                     // create tabs
  261.                     if ($(this).find('ul.tabs').length === 0) {
  262.                       $(this).prepend('<ul class="tabs"></ul>');
  263.                       var x;
  264.                       for (x=0;x<my_tablabels.length;x++) {
  265.                         $(this).find('ul.tabs').append('<li data-tabindex="'+x+'">'+my_tablabels.eq(x).text()+'</li>');
  266.                       }
  267.                     }
  268.                     // structure all labels and wrap all tab panels
  269.                     if ($(this).find('.tab-panel').length === 0) {
  270.                       my_tablabels.each(function(i){
  271.                         $(this).attr('data-tabindex',i);
  272.                         $(this).wrapInner('<a id="'+encodeURIComponent($(this).text())+'"></a>');
  273.                         kids = $(this).nextUntil('.tab-label').wrapAll('<div class="tab-panel"></div>');
  274.                         // default state class for when tabs are collapsable sections
  275.                         $(this).addClass('collapsed').next('.tab-panel').addClass('collapsed');
  276.                       });    
  277.                     }
  278.                     // open initial tab
  279.                     $(this).find('ul.tabs li').eq(0).addClass('open');
  280.                     my_tablabels.eq(0).addClass('open').next('.tab-panel').addClass('open');
  281.                     // tab click events
  282.                     $('.tabs-container ul.tabs li').each(function(i){
  283.                       $(this).click(function(){
  284.                         if (!$(this).hasClass('open')) {
  285.                           $('.tabs-container .open').removeClass('open');
  286.                           my_tabindex = $(this).attr('data-tabindex');
  287.                           $(this).addClass('open');
  288.                           $('.tabs-container .tab-label').eq(my_tabindex).addClass('open');
  289.                           $('.tabs-container .tab-panel').eq(my_tabindex).addClass('open');
  290.                         }
  291.                       });
  292.                     });
  293.                     // collapsable header click event
  294.                     $('.tabs-container .tab-label').click(function(){
  295.                       if (!$(this).hasClass('transition')) {
  296.                         kids = $(this).next('.tab-panel');
  297.                         kids.removeClass('collapsed');
  298.                         var fullHeight = kids.outerHeight();
  299.                         $(this).addClass('transition');
  300.                         kids.addClass('transition');
  301.                         if ($(this).hasClass('collapsed')) {
  302.                           kids.css({'height':'0px','padding-bottom':'0px','padding-top':'0px'}).animate({
  303.                             height:fullHeight+'px',
  304.                             paddingBottom:'32px',
  305.                             paddingTop:'16px',
  306.                           },500,function(){
  307.                             $('.tabs-container .transition').removeClass('collapsed').removeClass('transition').removeAttr('style');
  308.                           });
  309.                         }
  310.                         else {
  311.                           kids.css('height',fullHeight+'px').animate({
  312.                             height:'0px',
  313.                             paddingBottom:'0px',
  314.                             paddingTop:'0px',
  315.                           },500,function(){
  316.                             $('.tabs-container .transition').addClass('collapsed').removeClass('transition').removeAttr('style');
  317.                           });
  318.                         }
  319.                       }
  320.                     }); 
  321.                     // indicate state of readiness
  322.                     $(this).addClass('tabs-processed');
  323.                   }  
  324.                 });
  325.                 // if there are tabs and someone has linked to an anchor inside a tab
  326.                 console.log(window.location.hash);
  327.                 if (window.location.hash != '') {
  328.                   GoToAnchor();
  329.                 }
  330.                 // handle case when page is already loaded
  331.                 $(window).on('hashchange',function(){
  332.                   GoToAnchor();
  333.                 });
  334.               });
  335.             </script>
  336.             </div>
  337.         </section>
  338.     
  339.     </div>
  340.     </div>
  343. <style>
  346. body {
  347. /* Colors */
  348.     --color-blue-50: #0a84ff;
  349.     --color-blue-60: #0060df;
  350.     --color-blue-70: #003eaa;
  351.     --color-blue-80: #002275;
  352.     --color-gray-10: #f9f9fa;
  353.     --color-gray-20: #ededf0;
  354.     --color-gray-30: #d7d7db;
  355.     --color-gray-40: #b1b1b3;
  356.     --color-gray-50: #737373;
  357.     --color-gray-60: #4a4a4f;
  358.     --color-gray-70: #38383d;
  359.     --color-gray-80: #2a2a2e;
  360.     --color-gray-90: #0c0c0d;
  361.     --color-green-70: #058b00;
  362.     --color-teal-50: #00feff;
  363.     --color-teal-60: #00c8d7;
  364.     --color-teal-70: #008ea4;
  366. /* Icons */
  367.     --icon-context-menu: url({{ asset('template/images/twitter.png') }});
  368.     --icon-dismiss: url({{ asset('template/images/twitter.png') }});
  370.   --background-color: #F9F9FA;
  371.   --border-primary-color: #B1B1B3;
  373. /* Primary Action */
  374.   --primary-action-default: var(--color-blue-60);
  375.   --primary-action-hover: var(--color-blue-70);
  376.   --primary-action-active: var(--color-blue-80);
  377.   --primary-action-text-color: #fff;
  379. /* Secondary Action */
  380.   --secondary-action-default: var(--color-gray-20);
  381.   --secondary-action-hover: var(--color-gray-30);
  382.   --secondary-action-active: var(--color-gray-40);
  383.   --secondary-action-text-color: var(--color-gray-80);
  385. /* Ghost Action */
  386.     --ghost-action-hover: var(--color-gray-20);
  387.     --ghost-action-active: var(--color-gray-30);
  388.     --ghost-action-text-color: var(--color-gray-80);
  390. /* Forms */
  391.     --label-text-color: var(--text-secondary);
  392.     --text-field-border-color: var(--color-gray-30);
  393.     --text-field-hover-border-color: var(--color-gray-40);
  394.     --text-field-focus-border-color: var(--color-gray-40);
  395.     --text-field-bg-color: #fff;
  396. /* Focus */
  397.   --focus-box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(10, 132, 255, 0.5);
  399. /* Cards */
  400.   --rasied-card-bg-color: #FFF;
  401.   --rasied-card-border-radius: 8px;
  402.   --box-shadow-10: 0px 0px 8px 0 rgba(12, 12, 13, 0.05);
  403.   --raised-card-hover: 0 0 0 4px var(--secondary-action-default);
  404.     
  405.   /* Typography */
  406.   --base-font-size: 15px;
  407.   --small-font-size: 13px;
  408.   --base-line-height: 24px;
  409.   
  410.   /* Text Colors */
  411.   --text-primary: var(--color-gray-90);
  412.   --text-secondary: var(--color-gray-50);
  413. }
  417. .meta {
  418.     color: var(--text-secondary);
  419.     font-size: var(--small-font-size);
  420.     line-height: var(--base-line-height);
  421. }
  423. .small {
  424.     font-size: var(--small-font-size);
  425.     line-height: 20px;
  426. }
  428. .text-muted {
  429.     color: var(--text-secondary);
  430. }
  432. .sr-only {
  433.     display: none;
  434. }
  436. /* Default Link */
  437. a {
  438.      background-color: transparent;
  439.      color: var(--color-blue-60);
  440.      text-decoration: none;
  441. }
  442. a:hover {
  443.     text-decoration: underline;
  444. }
  445. a:active {
  446.     color: var(--color-blue-70);
  447.     text-decoration:underline;
  448. }
  449. a:focus {
  450.     box-shadow: ;
  451. }
  452. a:not([href]):not([tabindex]) {
  453.     color: inherit;
  454.     text-decoration: none;
  455. }
  457. /* Buttons */
  458. .btn {
  459.     border: none;
  460.     cursor: pointer;
  461.     font-weight: 500;
  462.     transition: background-color 150ms, transform 150ms;
  463.     transition-duration: 150ms;
  464. }
  466. .btn:active {
  467.     transform: scale(0.97);
  468. }
  470. .btn:focus {
  471.     box-shadow: var(--focus-box-shadow);
  472. }
  474. .btn.disabled {
  475.     cursor: default;
  476.     opacity: 0.4;
  477. }
  479. /* Primary Button */
  480. .btn--primary {
  481.     background-color: var(--primary-action-default);
  482.     color: var(--primary-action-text-color);
  483.     fill: var(--primary-action-text-color);
  484.     -moz-context-properties: fill;
  485. }
  487. .btn--primary:hover {
  488.     background-color: var(--primary-action-hover);
  489. }
  491. .btn--primary:active {
  492.     background-color: var(--primary-action-active);
  493. }
  495. .btn--primary:disabled,
  496. .btn--primary.disabled {
  497.     background-color: var(--primary-action-default);
  498.     color: var(--primary-action-text-color);
  499.     fill: var(--primary-action-text-color);
  500.     -moz-context-properties: fill;
  501. }
  503. /* Secondary Button */
  504. .btn--secondary {
  505.     background-color: var(--secondary-action-default);
  506.     color: var(--secondary-action-text-color);
  507.     fill: var(--secondary-action-text-color);
  508.     -moz-context-properties: fill;
  509. }
  511. .btn--secondary:hover {
  512.     background-color: var(--secondary-action-hover);
  513. }
  515. .btn--secondary:active {
  516.     background-color: var(--secondary-action-active);
  517. }
  519. .btn--secondary:disabled,
  520. .btn--secondary.disabled {
  521.     background-color: var(--secondary-action-default);
  522.     color: var(--secondary-action-text-color);
  523.     fill: var(--secondary-action-text-color);
  524.     -moz-context-properties: fill;
  525. }
  527. /* Pill Button */
  528. .btn--pill {
  529.     border-radius: 16px;
  530.     line-height: 32px;
  531.     min-height: 32px;
  532.     padding: 0 16px;
  533.     vertical-align: middle;
  534. }
  536. .btn--pill-icon-only {
  537.     background-position: 50%;
  538.     background-repeat: no-repeat;
  539.     background-size: 16px;
  540.     width: 32px;
  541. }
  543. /* Form Button */
  544. .btn--form {
  545.     border-radius: 4px;
  546.     min-height: 40px;
  547.     min-width: 96px;
  548.     padding: 0 8px;
  549. }
  551. /* Ghost Button */
  552. .btn--ghost {
  553.     background-color: transparent;
  554.     color: var(--ghost-action-text-color);
  555.     fill: var(--ghost-action-text-color);
  556.     -moz-context-properties: fill;
  557. }
  559. .btn--ghost:hover {
  560.     background-color: var(--ghost-action-hover);
  561. }
  563. .btn--ghost:active {
  564.     background-color: var(--ghost-action-active);
  565. }
  567. .btn--ghost:disabled,
  568. .btn--ghost.disabled {
  569.     background-color: transparent;
  570.     color: var(--ghost-action-text-color);
  571.     fill: var(--ghost-action-text-color);
  572.     -moz-context-properties: fill;
  573. }
  577. .card .context-menu-btn {
  578.     opacity: 0;
  579.     position: absolute;
  580.     right: -16px;
  581.     top: -16px;
  582.     transform: scale(0.25);
  583.     transition-duration: 150ms;
  584.     transition-property: transform, opacity;    
  585. }
  587. /* Cards */
  588. .card-raised {
  589.     background: var(--rasied-card-bg-color);
  590.     border-radius: var(--rasied-card-border-radius);
  591.     border: 1px inset rgba(12, 12, 13, 0.07);
  592.     box-shadow: var(--box-shadow-10);
  593.     transition: box-shadow 250ms, transform 150ms;
  594.     position: relative;
  595. }
  597. .card-raised:hover {
  598.     box-shadow: var(--box-shadow-10), var(--raised-card-hover);    
  599. }
  602. .card-raised:hover .context-menu-btn {
  603.     opacity: 1;
  604.     transform: scale(1);
  605.     transition-delay: 200ms;
  606. }
  608. .card-raised:hover .title {
  609.     color: var(--primary-action-default);
  610.     text-decoration: underline;
  611.     cursor: pointer;
  612. }
  614. .card-raised:active {    
  615.     transform: scale(0.97);
  616. }
  618. .card-raised:focus {
  619.     box-shadow: var(--box-shadow-10), 0 0 0 3px #fff, 0 0 0 6px rgba(10, 132, 255, 0.5);
  620. }
  622. /*
  623. .card-img {
  624.     border: 1px inset rgba(0, 0, 0, 0.15);
  625. }
  626. */
  628. .card-raised .card-img-top {
  629.     border-top-left-radius: var(--rasied-card-border-radius);
  630.     border-top-right-radius: var(--rasied-card-border-radius);
  631. }
  633. .card-body {
  634.     padding: 12px 16px;
  635. }
  637. .card-footer {
  638.     padding: 12px 16px;
  639. }
  642. /* Snippet */
  643. .snippet {
  644.     background-color: #fff;
  645.     bottom: 0;
  646.     box-shadow: var(--box-shadow-10);
  647.     padding: 24px 0;
  648.     position: fixed;
  649.     width: 100%;
  650.     z-index: 200;
  651. }
  653. .snippet .wrapper {
  654.     display: flex;
  655. }
  657. .snippet-promo-image,
  658. .snippet-content {
  659.     margin-right: 24px;
  660. }
  662. .snippet-promo-image img {
  663.     width: 48px;
  664. }
  666. .snippet-content {
  667.     flex-grow: 1;
  668. }
  670. .snippet-content .body {
  671.     max-width: 600px;    
  672. }
  674. .snippet .btn {
  675.     height: 32px;    
  676. }
  678. .icon-dark-theme {
  679.     display: none;
  680. }
  682. .search-wrapper {
  683.   padding: 24px 0; }
  684.   .only-search .search-wrapper {
  685.     padding: 0 0 64px; }
  686.   .search-wrapper .logo-and-wordmark {
  687.     align-items: center;
  688.     display: flex;
  689.     justify-content: center;
  690.     margin-bottom: 49px; }
  691.     .search-wrapper .logo-and-wordmark .logo {
  692.       background: url("chrome://branding/content/icon128.png") no-repeat center center;
  693.       background-size: 97px;
  694.       display: inline-block;
  695.       height: 97px;
  696.       width: 97px; }
  697.     .search-wrapper .logo-and-wordmark .wordmark {
  698.       background: url("../data/content/assets/firefox-wordmark.svg") no-repeat center center;
  699.       background-size: 142px;
  700.       -moz-context-properties: fill;
  701.       display: inline-block;
  702.       fill: var(--search-wordmark-color);
  703.       height: 97px;
  704.       margin-inline-start: 15px;
  705.       width: 142px; }
  706.     @media (max-width: 609px) {
  707.       .search-wrapper .logo-and-wordmark .logo {
  708.         background-size: 64px;
  709.         height: 64px;
  710.         width: 64px; }
  711.       .search-wrapper .logo-and-wordmark .wordmark {
  712.         background-size: 100px;
  713.         height: 64px;
  714.         width: 100px; } }
  715.   
  716.   .search-wrapper .search-inner-wrapper {
  717.     cursor: default;
  718.     display: flex;
  719.     height: 48px;
  720.     margin: 0 auto;
  721.     position: relative;
  722.     width: 224px; }
  723.     @media (min-width: 610px) {
  724.       .search-wrapper .search-inner-wrapper {
  725.         width: 480px; } }
  726.     @media (min-width: 866px) {
  727.       .search-wrapper .search-inner-wrapper {
  728.         width: 736px; } }
  729.   
  730.   .search-wrapper input {
  731.     background: var(--text-field-bg-color) /* var(--search-icon) 12px center no-repeat */;
  732.     background-size: 24px;
  733.     border: solid 1px var(--text-field-border-color);
  734.     border-radius: 4px;
  735. /*     box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15); */
  736.     font-size: 15px;
  737.     -moz-context-properties: fill;
  738.     fill: var(--search-icon-color);
  739.     padding: 0;
  740.     padding-inline-end: 48px;
  741.     padding-inline-start: 46px;
  742.     width: 100%; }
  743.     
  744.     .search-wrapper input:dir(rtl) {
  745.       background-position-x: right 12px; }
  746.   
  747. /*
  748.   .search-wrapper:hover input {
  749.     box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.25); }
  750. */
  751.   
  752.   .search-wrapper .search-inner-wrapper:active input,
  753.   .search-wrapper input:focus {
  754.     border: 1px solid var(--text-field-focus-border-color);
  755.     box-shadow: var(--focus-box-shadow); }
  756.   
  757.   .search-wrapper .search-button {
  758.     background: url("chrome://browser/skin/forward.svg") no-repeat center center;
  759.     background-size: 16px 16px;
  760.     border: 0;
  761.     border-radius: 0 3px 3px 0;
  762.     -moz-context-properties: fill;
  763.     fill: var(--search-icon-color);
  764.     height: 100%;
  765.     inset-inline-end: 0;
  766.     position: absolute;
  767.     width: 48px; }
  768.     .search-wrapper .search-button:focus, .search-wrapper .search-button:hover {
  769.       background-color: rgba(12, 12, 13, 0.1);
  770.       cursor: pointer; }
  771.     .search-wrapper .search-button:active {
  772.       background-color: rgba(12, 12, 13, 0.2); }
  773.     .search-wrapper .search-button:dir(rtl) {
  774.       transform: scaleX(-1); }
  776. .non-collapsible-section + .below-search-snippet-wrapper {
  777.   margin-top: -48px; }
  779. @media (max-height: 700px) {
  780. /*
  781.   .search-wrapper {
  782.     padding: 0 0 30px; }
  783. */
  784.   .non-collapsible-section + .below-search-snippet-wrapper {
  785.     margin-top: -14px; }
  786.   .below-search-snippet-wrapper {
  787.     min-height: 0; } }
  789. .search-handoff-button {
  790.   background: var(--textbox-background-color) var(--search-icon) 12px center no-repeat;
  791.   background-size: 24px;
  792.   border: solid 1px var(--search-border-color);
  793.   border-radius: 3px;
  794.   box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15);
  795.   cursor: text;
  796.   font-size: 15px;
  797.   padding: 0;
  798.   padding-inline-end: 48px;
  799.   padding-inline-start: 46px;
  800.   opacity: 1;
  801.   transition: opacity 500ms;
  802.   width: 100%; }
  803.   .search-handoff-button:dir(rtl) {
  804.     background-position-x: right 12px; }
  805.   .search-handoff-button:hover {
  806.     box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.25); }
  807.   .fake-focus .search-handoff-button {
  808.     border: 1px solid var(--textbox-focus-color);
  809.     box-shadow: var(--textbox-focus-boxshadow); }
  810.     .fake-focus .search-handoff-button .fake-caret {
  811.       display: block; }
  812.   .search-hidden .search-handoff-button {
  813.     opacity: 0;
  814.     visibility: hidden; }
  815.   .search-handoff-button .fake-editable:focus {
  816.     outline: none;
  817.     caret-color: transparent; }
  818.   .search-handoff-button .fake-editable {
  819.     color: transparent;
  820.     height: 100%;
  821.     opacity: 0;
  822.     position: absolute;
  823.     top: 0;
  824.     left: 0;
  825.     right: 0;
  826.     bottom: 0; }
  827.   .search-handoff-button .fake-textbox {
  828.     opacity: 0.54;
  829.     text-align: start; }
  830.   .search-handoff-button .fake-caret {
  831.     animation: caret-animation 1.3s steps(5, start) infinite;
  832.     background: var(--text-primary-color);
  833.     display: none;
  834.     inset-inline-start: 47px;
  835.     height: 17px;
  836.     position: absolute;
  837.     top: 16px;
  838.     width: 1px; }
  840. @keyframes caret-animation {
  841.   to {
  842.     visibility: hidden; } }
  844. @media (min-height: 701px) {
  845.   body:not(.inline-onboarding) .fixed-search main {
  846.     padding-top: 146px; }
  847.   body:not(.inline-onboarding) .fixed-search .search-wrapper {
  848.     background-color: var(--search-header-background-color);
  849.     border-bottom: solid 1px var(--border-secondary-color);
  850.     height: 95px;
  851.     left: 0;
  852.     padding: 30px 0;
  853.     position: fixed;
  854.     top: 0;
  855.     width: 100%;
  856.     z-index: 9; }
  857.     body:not(.inline-onboarding) .fixed-search .search-wrapper .search-inner-wrapper {
  858.       height: 35px; }
  859.     body:not(.inline-onboarding) .fixed-search .search-wrapper input {
  860.       background-position-x: 16px;
  861.       background-size: 16px; }
  862.       body:not(.inline-onboarding) .fixed-search .search-wrapper input:dir(rtl) {
  863.         background-position-x: right 16px; }
  864.   body:not(.inline-onboarding) .fixed-search .search-handoff-button {
  865.     background-position-x: 12px;
  866.     background-size: 24px; }
  867.     body:not(.inline-onboarding) .fixed-search .search-handoff-button:dir(rtl) {
  868.       background-position-x: right 12px; }
  869.     body:not(.inline-onboarding) .fixed-search .search-handoff-button .fake-caret {
  870.       top: 10px; } }
  872. .contentSearchSuggestionTable {
  873.   background-color: var(--search-dropdown-color);
  874.   border: 0;
  875.   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.2);
  876.   transform: translateY(4px); }
  877.   .contentSearchSuggestionTable .contentSearchHeader {
  878.     background-color: var(--search-dropdown-header-color);
  879.     color: var(--text-secondary-color); }
  880.   .contentSearchSuggestionTable .contentSearchHeader,
  881.   .contentSearchSuggestionTable .contentSearchSettingsButton {
  882.     border-color: var(--border-secondary-color); }
  883.   .contentSearchSuggestionTable .contentSearchSuggestionsList {
  884.     border: 0; }
  885.   .contentSearchSuggestionTable .contentSearchOneOffsTable {
  886.     background-color: var(--search-dropdown-header-color);
  887.     border-top: solid 1px var(--border-secondary-color); }
  888.   .contentSearchSuggestionTable .contentSearchSearchWithHeaderSearchText {
  889.     color: var(--text-primary-color); }
  890.   .contentSearchSuggestionTable .contentSearchSuggestionsContainer {
  891.     background-color: var(--search-dropdown-color); }
  892.   .contentSearchSuggestionTable .contentSearchSuggestionRow.selected {
  893.     background: var(--element-hover-color);
  894.     color: var(--text-primary-color); }
  895.     .contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active {
  896.       background: var(--element-active-color); }
  897.     .contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon {
  898.       fill: var(--icon-secondary-color); }
  899.   .contentSearchSuggestionTable .contentSearchOneOffsTable .contentSearchSuggestionsContainer {
  900.     background-color: var(--search-dropdown-header-color); }
  901.   .contentSearchSuggestionTable .contentSearchOneOffItem {
  902.     background-image: none;
  903.     border-image: linear-gradient(transparent 18%, var(--border-secondary-color) 18%, var(--border-secondary-color) 82%, transparent 82%) 1;
  904.     border-inline-end: 1px solid;
  905.     position: relative; }
  906.     .contentSearchSuggestionTable .contentSearchOneOffItem.selected {
  907.       background: var(--element-hover-color); }
  908.     .contentSearchSuggestionTable .contentSearchOneOffItem:active {
  909.       background: var(--element-active-color); }
  910.   .contentSearchSuggestionTable .contentSearchSettingsButton:hover {
  911.     background: var(--element-hover-color);
  912.     color: var(--text-primary-color); }
  914. .contentSearchHeaderRow > td > img,
  915. .contentSearchSuggestionRow > td > .historyIcon{
  916.   margin-inline-start: 7px;
  917.   margin-inline-end: 15px;
  918. }
  919. </style>
  922. <section class="news-section">
  924.         <div class="mzp-l-content blog" id="blog">
  925.                 <div class="text-left">
  926.                     <h3>
  927.                         Nos programmes
  928.                     </h3>
  929.                     
  930.                     <div>
  931.                         La transparence 
  932.                     </div>
  933.                 </div>
  935.                    <div class="row posts-list">
  937.               
  938.                        <!--Single Blog Start-->
  939.                        <div class="col-lg-4 col-md-4 wow fadeInUp" data-wow-delay="0ms">
  941.                         <article>
  942.                             <div class="post-img">
  943.                                 <img src="https://i.ibb.co/m5yGbdR/blog2.jpg" alt="" class="img-fluid">
  944.                             </div>
  945.                             <p class="post-category">Commandez un  Hébergement pro.</p>
  946.                             <h2 class="title">
  947.                                 <a href="/detail/article/19" data-original-title="" title="">Commandez un hébergement Mutualisé ou un VPS chez l’hébergeur web professionnel AFH Host à prix malin.</a>
  948.                             </h2>
  949.                 
  950.                             <div class="d-flex align-items-center">
  951.                                 <img src="/template/images/co.png" alt="" class="img-fluid post-author-img flex-shrink-0">
  952.                                 <div class="post-meta">
  953.                                 <div class="post-author-list">Kenfack Noel</div>
  954.                                 <div class="post-date">
  955.                                     <time datetime="2022-01-01">01 Feb 2024</time>
  956.                                 </div>
  957.                                 </div>
  958.                             </div>
  959.                         </article>
  961.                        </div>
  962.                        <!--Single Blog End-->
  963.                        <!--Single Blog Start-->
  964.                        <div class="col-lg-4 col-md-4 wow fadeInUp" data-wow-delay="0ms">
  966.                         <article>
  967.                             <div class="post-img">
  968.                                 <img src="https://i.ibb.co/m5yGbdR/blog2.jpg" alt="" class="img-fluid">
  969.                             </div>
  970.                             <p class="post-category">Commandez un  Hébergement pro.</p>
  971.                             <h2 class="title">
  972.                                 <a href="/detail/article/19" data-original-title="" title="">Commandez un hébergement Mutualisé ou un VPS chez l’hébergeur web professionnel AFH Host à prix malin.</a>
  973.                             </h2>
  974.                 
  975.                             <div class="d-flex align-items-center">
  976.                                 <img src="/template/images/co.png" alt="" class="img-fluid post-author-img flex-shrink-0">
  977.                                 <div class="post-meta">
  978.                                 <div class="post-author-list">Kenfack Noel</div>
  979.                                 <div class="post-date">
  980.                                     <time datetime="2022-01-01">01 Feb 2024</time>
  981.                                 </div>
  982.                                 </div>
  983.                             </div>
  984.                         </article>
  986.                        </div>
  987.                        <!--Single Blog Start-->
  988.                        <!--Single Blog Start-->
  989.                        <div class="col-lg-4 col-md-4 wow fadeInUp" data-wow-delay="0ms">
  991.                         <article>
  992.                             <div class="post-img">
  993.                                 <img src="https://i.ibb.co/m5yGbdR/blog2.jpg" alt="" class="img-fluid">
  994.                             </div>
  995.                             <p class="post-category">Commandez un  Hébergement pro.</p>
  996.                             <h2 class="title">
  997.                                 <a href="/detail/article/19" data-original-title="" title="">Commandez un hébergement Mutualisé ou un VPS chez l’hébergeur web professionnel AFH Host à prix malin.</a>
  998.                             </h2>
  999.                 
  1000.                             <div class="d-flex align-items-center">
  1001.                                 <img src="/template/images/co.png" alt="" class="img-fluid post-author-img flex-shrink-0">
  1002.                                 <div class="post-meta">
  1003.                                 <div class="post-author-list">Kenfack Noel</div>
  1004.                                 <div class="post-date">
  1005.                                     <time datetime="2022-01-01">01 Feb 2024</time>
  1006.                                 </div>
  1007.                                 </div>
  1008.                             </div>
  1009.                         </article>
  1011.                        </div>
  1012.                        <!--Single Blog Start-->
  1013.                        
  1014.                    </div>
  1015.                </div>
  1016.            </div>
  1017.    </section>
  1019. {% endblock %}
  1021. {% block javascripttemplate %}
  1022. $(document).ready(function() {
  1023.   const $buttons = $(".demo__buttons");
  1024.   const $toggle = $(".demo__open-btn");
  1025.   let delay = 200;
  1026.   let steps = [];
  1027.   let open = false;
  1028.   
  1029.   let curStep = 0;
  1031.   for (let i = 0; i <= 3; i++) {
  1032.     steps[i] = "demo__step-" + i;
  1033.   }
  1035.   function setStep(index) {    
  1036.     $buttons.removeClass("step-1 step-0 step-3 step-2").addClass("step-" + curStep);   
  1037.   }
  1038.   
  1039.   let lastTimeout;
  1041.   function animate() {
  1042.     if (curStep >= 4) {
  1043.       curStep = 0;
  1044.       return;
  1045.     }
  1047.     open = true;
  1048.     setStep(curStep);    
  1049.     curStep++;
  1050.     lastTimeout = setTimeout(animate, delay);
  1051.   }
  1053.   $toggle.on("click", function() {
  1054.     if (!open) animate();
  1055.     else {
  1056.       $buttons.removeClass("step-1 step-0 step-3 step-2");
  1057.       clearTimeout(lastTimeout);
  1058.       open = false;
  1059.       curStep = 0;
  1060.     }
  1061.   });
  1062. });
  1063. {% endblock %}