templates/Theme/Users/User/Security/accueilsite.html.twig line 1

Open in your IDE?
  1. {% extends "Theme/Users/User/layoutoffert.html.twig" %}
  2. {% block meta %}
  3.     {{ parent() }}
  4.     <meta name="keywords" content="{{ site }}, {{ keywords }}"/>
  5.     <meta name="author" content="Noel Kenfack"/>
  6.     <meta name="description" content="{{ site }} | {{ description }}"/>
  7. {% endblock %}
  9. {% block title %}
  10.     {{ parent() }} | Accueil
  11. {% endblock %}
  13. {% block userblog_body %}
  15. <style>
  16.     .banner-content .me {
  17.         background: #90acd1;
  18.         padding: 18px;
  19.         display: inline-block;
  20.         color:#fff;
  21.         font-size: 16px;
  22.         border-radius: 8px;
  23.         position: relative;
  24.     }
  25.     
  26.     .banner-content .me::after{
  27.         content: '';
  28.         position: absolute;
  29.         right: 0;
  30.         bottom: -15px;
  31.         width: 0;
  32.         height: 0;
  33.         border-left: 26px solid transparent;
  34.         border-right: 0px solid
  35.         transparent;
  36.         border-top: 24px solid#90acd1;
  37.     }
  38.     
  39.     *, ::after, ::before {
  40.         box-sizing: border-box;
  41.     }
  42. </style>
  43.         
  44. {% if slideaccueil != null %}
  45. <section id="download-firefox-primary-cta" class="c-primary-cta download-firefox-primary-cta mzp-t-firefox" style="background-image: url({% if slideaccueil.src != null %}{{ asset(slideaccueil.getwebpath) }}{% else %}{{ asset('templatehome/images/browser-high-res.188e4ab6d8f4.png') }}{% endif %})!important;background-size:400px 278px,auto;background-position:calc(50vw + 34px) 60px,calc(50vw - 41px) -78px;background-repeat:no-repeat;">
  46.   <div class="mzp-l-content">
  47.     <div class="c-primary-cta-wrapper">
  48.       <div class="banner-content" style="margin-bottom: 20px; margin-top: -40px;">
  49.           <div class="me wow fadeInDown" data-wow-duration="1s" data-wow-delay="1.2s" style="visibility: visible; animation-duration: 1s; animation-delay: 1.2s; animation-name: fadeInDown;">Investissez</div>
  50.       </div>
  51.       <h3 class="c-primary-cta-title">{{ slideaccueil.titre }}</h3>
  52.       <h3 class="c-primary-cta-title-sub"></h3>
  53.       <p class="c-primary-cta-desc-sub">{{ slideaccueil.description }}</p>
  54.       
  55.       <div class="c-primary-cta-button">
  56.         <a class="download-link button button-green mzp-c-button mzp-t-product" href="{{ path('produit_produit_tarification_courant_product') }}" data-direct-link="" data-link-type="download" data-display-name="Windows 64-bit" data-download-version="win64" data-download-os="Desktop" data-download-location="primary cta">
  57.           <strong class="download-title">
  58.             Investir sur un chantier
  59.           </strong>
  60.         </a><a class="download-link button button-green mzp-c-button mzp-t-product open-spp-modal" href="{{ path('produit_produit_tarification_souscription_donation') }}" data-direct-link="" data-link-type="download" data-display-name="Windows 64-bit" data-download-version="win64" data-download-os="Desktop" data-download-location="primary cta">
  61.           <strong class="download-title">
  62.             Faire un don
  63.           </strong>
  64.         </a>
  65.       </div>
  66.     </div>
  67.   </div>
  68. </section>
  69. {% else %}
  70. <style>
  71.     .articleplay {
  72.         text-align: left;
  73.         position: relative;
  74.         width: 100%;
  75.         height: 400px;
  76.         overflow: hidden;
  77.         background: white;
  78.         border-radius: 5px;
  79.         color: #fff;
  80.         transform: translate3d(0);
  81.         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.03);
  82.         transition: all 0.3s ease;
  83.         top: 50%;
  84.         left: 50%;
  85.         transform: translate(-50%, -50%);
  86.     }
  87.     .image {
  88.         width: 100%;
  89.         position: absolute;
  90.         height: 400px;
  91.         transition: 0.3s ease;
  92.         background-image: url({{ asset('template/images/bg-reseller.jpg') }});
  93.         background-size: cover;
  94.         background-position: center center;
  95.     }
  96.     .image:before {
  97.         transition: all 0.3s ease;
  98.         content: "";
  99.         position: absolute;
  100.         width: 100%;
  101.         height: 150px;
  102.         bottom: 0;
  103.         background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  104.         border-radius: 0 0 5px 5px;
  105.     }
  106.     .player-wrap {
  107.         height: 280px;
  108.         width: 100%;
  109.         position: relative;
  110.         opacity: 0;
  111.         pointer-events: none;
  112.         overflow: hidden;
  113.     }
  114.     .player-active .player-wrap {
  115.         opacity: 1;
  116.     }
  117.     .articleplay #player {
  118.         width: 100%;
  119.         height: calc(330px*16/9);
  120.         position: absolute;
  121.         top: 50%;
  122.         left: 50%;
  123.         transform: translate(-50%, -50%) scale(1.4);
  124.         -webkit-filter: saturate(1);
  125.     }
  126.     .articleplay .nfo {
  127.         width: 100%;
  128.         position: absolute;
  129.         bottom: 0;
  130.         left: 20px;
  131.         transition: all 0.3s ease;
  132.         height: 92px;
  133.     }
  134.     .articleplay h3 {
  135.         font-size: 30px;
  136.         line-hight: 0;
  137.         margin: 0;
  138.         position: relative;
  139.         transition: all 0.3s ease;
  140.         white-space: nowrap;
  141.     }
  142.     .articleplay h3:after {
  143.         position: absolute;
  144.         content: "";
  145.         bottom: 0;
  146.         left: 0;
  147.         width: 60px;
  148.         height: 3px;
  149.         background: #F15826;
  150.         z-index: 100;
  151.         transition: all 0.3s ease;
  152.         transition-delay: 0s;
  153.     }
  154.     .articleplay p {
  155.     color: #B3B7B9;
  156.     margin-top: 0.3em;
  157.     position: relative;
  158.     transition: all 0.3s ease;
  159.     }
  160.     .articleplay  .desc {
  161.         background: #9ebb3d;
  162.         width: 100%;
  163.         height: 144px;
  164.         margin-left: -20px;
  165.         position: relative;
  166.         box-sizing: border-box;
  167.         transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  168.         line-height: 1.4;
  169.         font-weight: 100;
  170.     }
  171.     .articleplay  .desc p {
  172.         margin: 0;
  173.         padding: 20px;
  174.         padding-top: 25px;
  175.         color: #fff;
  176.         font-size: 15px;
  177.         height: 2.8em;
  178.         overflow: hidden;
  179.     }
  180.     .articleplay a {
  181.         padding: 10px 0px;
  182.         height: 50px;
  183.         background: #ec9204;
  184.         color: white;
  185.         display: inline-block;
  186.         text-align: center;
  187.         bottom: 0;
  188.         position: absolute;
  189.         width: 100%;
  190.         overflow: hidden;
  191.         box-sizing: border-box;
  192.         font-weight: 400;
  193.         text-decoration: none;
  194.         transition: all 0.1s ease;
  195.     }
  196.     .articleplay a:hover {
  197.         color: white;
  198.         -webkit-filter: contrast(1.5);
  199.     }
  200.     .articleplay a:hover .maxdome-logo, .articleplay a:hover span {
  201.     transform: translateY(-37px);
  202.     }
  203.     .articleplay  a:active {
  204.     -webkit-filter: contrast(2);
  205.     }
  206.     .articleplay  a:active .maxdome-logo {
  207.     transition: all 0.3s ease 0;
  208.     transform: translateY(-37px) scale(0.95);
  209.     }
  210.     .articleplay a .maxdome-logo, .articleplay a span {
  211.     transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1) 200ms;
  212.     width: 100%;
  213.     display: inline-block;
  214.     margin-top: 6px;
  215.     }
  216.     .articleplay a .maxdome-logo {
  217.     width: 154px;
  218.     margin-top: 12px;
  219.     height: 20px;
  220.     display: inline-block;
  221.     }
  222.     .articleplay  a .maxdome-logo:after {
  223.     content: "";
  224.     speak: none;
  225.     font-style: normal;
  226.     font-weight: 400;
  227.     font-family: Icons;
  228.     color: #fff;
  229.     margin-left: 0.11111rem;
  230.     }
  231.     .articleplay a .maxdome-logo:before {
  232.     content: "";
  233.     speak: none;
  234.     font-style: normal;
  235.     font-weight: 400;
  236.     color: #202831;
  237.     font-family: Icons;
  238.     }
  239.     .articleplay:hover {
  240.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 12px 22px rgba(0, 0, 0, 0.15);
  241.     }
  242.     .articleplay:hover .nfo {
  243.     transform: translateY(-100px);
  244.     }
  245.     .articleplay:hover .nfo p {
  246.     opacity: 0;
  247.     }
  248.     .articleplay:hover .desc {
  249.     transform: translateY(-47px);
  250.     }
  251.     .articleplay:hover .desc p {
  252.     opacity: 1;
  253.     }
  254.     .articleplay:hover h3:after {
  255.     width: 390px;
  256.     transform: translateX(-20px);
  257.     transition-delay: 0.3s;
  258.     transition: transform 0.3s ease, width 2s ease-in;
  259.     }
  260.     .articleplay:hover .image {
  261.     transform: translateY(-60px);
  262.     }
  263.     .articleplay:hover.player-active h3:after {
  264.     transition: 0.3s ease;
  265.     width: 440px;
  266.     }
  267.     .articleplay:hover.player-active .image:before {
  268.     transform: translate(0);
  269.     }
  270.     .articleplay:hover.player-active .nfo {
  271.     transition: 1s ease 1.5s;
  272.     transform: translateY(-6px);
  273.     }
  274.     .articleplay:hover.player-active .nfo a {
  275.     transform: translateY(-94px);
  276.     transition: 1s ease 1.5s;
  277.     }
  278.     .articleplay:hover.player-active .nfo:hover {
  279.     transition: 0.7s ease 0s;
  280.     transform: translateY(-100px);
  281.     }
  282.     .articleplay:hover.player-active .nfo:hover a {
  283.     transform: translateY(0);
  284.     transition: 0.7s ease 0s;
  285.     }
  286.     .articleplay:hover.player-active .nfo:hover h3 {
  287.     transition: 1s ease 0s;
  288.     color: white;
  289.     }
  290.     .articleplay:hover.player-active .nfo:hover h3 {
  291.     transition: 1s ease 2s;
  292.     }
  293.     .articleplay:hover.player-active .nfo:hover h3:after {
  294.     width: 440px;
  295.     transition: width 0.3s ease;
  296.     }
  297. .bg-danger {
  298.   background-color: #f5365c !important;
  299. }
  300. @media (min-width: 1200px) {
  301.   
  302.   .justify-content-xl-between {
  303.     justify-content: space-between !important;
  304.   }
  305. }
  306. .pt-5 {
  307.   padding-top: 3rem !important;
  308. }
  309. .pb-8 {
  310.   padding-bottom: 8rem !important;
  311. }
  312. @media (min-width: 768px) {
  313.   .pt-md-8 {
  314.     padding-top: 8rem !important;
  315.   }
  316. }
  317. @media (min-width: 1200px) {
  318.   
  319.   .mb-xl-0 {
  320.     margin-bottom: 0 !important;
  321.   }
  322. }
  323. .font-weight-bold {
  324.   font-weight: 600 !important;
  325. }
  326. a.text-success:hover,
  327. a.text-success:focus {
  328.   color: #24a46d !important;
  329. }
  330. .text-warning {
  331.   color: #fb6340 !important;
  332. }
  333. a.text-warning:hover,
  334. a.text-warning:focus {
  335.   color: #fa3a0e !important;
  336. }
  337. .text-danger {
  338.   color: #f5365c !important;
  339. }
  340. a.text-danger:hover,
  341. a.text-danger:focus {
  342.   color: #ec0c38 !important;
  343. }
  344. .text-white {
  345.   color: #fff !important;
  346. }
  347. a.text-white:hover,
  348. a.text-white:focus {
  349.   color: #e6e6e6 !important;
  350. }
  351. .text-muted {
  352.   color: #8898aa !important;
  353. }
  354. figcaption,
  355. main {
  356.   display: block;
  357. }
  358. main {
  359.   overflow: hidden;
  360. }
  361. .bg-yellow {
  362.   background-color: #ffd600 !important;
  363. }
  364. </style>
  367. <section id="download-firefox-primary-cta" class="c-primary-cta download-firefox-primary-cta mzp-t-firefox" style="background-image: url({{ asset('template/images/bg-shape-bottom-right.png') }}); background-size: 600px 400px,auto; background-position: top 100px right 0px; background-repeat:no-repeat;">
  368.   <div class="mzp-l-content ">
  369.     <div class="c-primary-cta-wrapper" style="max-width: 100%;">
  370.       <div class="banner-content" style="margin-bottom: 20px; margin-top: -40px;">
  371.           <div class="me wow fadeInDown" data-wow-duration="1s" data-wow-delay="1.2s" style="visibility: visible; animation-duration: 1s; animation-delay: 1.2s; animation-name: fadeInDown;">Investissez</div>
  372.       </div>
  373.       <div class="row">
  374.           <div class="col-md-6">
  375.             <h3 class="c-primary-cta-title">Sur les business les plus rentables en controlant intégralement l'activité.</h3>
  376.             <h3 class="c-primary-cta-title-sub">12</h3>
  377.             <p class="c-primary-cta-desc-sub">{{ site }} Transforme des idées et projets en business modernes dans lesquelles des millions de personnes peuvent investir et tracer leur investissement avec le risque d'échec quasiment nul.</p>
  378.             <div class="c-primary-cta-button">
  379.               <a style="margin: 1px;" class="download-link button button-green mzp-c-button mzp-t-product" href="{{ path('produit_produit_tarification_courant_product') }}" data-direct-link="" data-link-type="download" data-display-name="Windows 64-bit" data-download-version="win64" data-download-os="Desktop" data-download-location="primary cta">
  380.                 <strong class="download-title">
  381.                   Investir sur un chantier
  382.                 </strong>
  383.               </a>
  384.               
  385.               <a style="margin: 1px;" class="download-link button button-green mzp-c-button mzp-t-product" href="{{ path('produit_produit_tarification_souscription_donation') }}" data-direct-link="" data-link-type="download" data-display-name="Windows 64-bit" data-download-version="win64" data-download-os="Desktop" data-download-location="primary cta">
  386.                 <strong class="download-title">
  387.                   Faire un don
  388.                 </strong>
  389.               </a>
  391.             </div>
  392.           </div>
  393.           <div class="col-md-6">
  394.             
  395.             <div class="articleplay"  data-youtube-id="Ue_SfrHHBAc">
  396.                 <div class="image"></div>
  397.                 <div class="player-wrap">
  398.                   <div id="player"></div>
  399.                 </div>
  400.                 <div class="nfo">
  401.                   
  402.                   <h3>Monsters, Inc.</h3>
  403.                   <p>Animation/Comedy
  404.                   </p>
  405.                   <div class="desc">
  406.                     <p>In order to power the city, monsters have to scare children so that they scream. However, the children are toxic to the monsters, and after a child gets through, two monsters realize things may not be what they think.</p>
  407.                     <a href="#" ><span>&#9658; Rent or Buy Now</span>
  408.                       <div class="maxdome-logo"></div>
  409.                     </a>
  410.                   </div>
  411.             
  412.                 </div>
  413.             </div>
  415.           </div>
  416.       </div>
  417.       
  419.       <script type="text/javascript">
  420.         
  421.       </script>
  422.     </div>
  423.   </div>
  425.   <div>
  426.       <img src="" alt="" style="">
  427.   </div>
  428. </section>
  429. {% endif %}
  431. <div class="mzp-l-content " style="border-top: 1px solid #ddd;">
  432.     <div class="header-body">
  433.         <div class="row">
  434.           <div class="col-xl-3 col-lg-6">
  435.             <div class="card card-stats mb-4 mb-xl-0">
  436.               <div class="card-body">
  437.                 <div class="row">
  438.                   <div class="col">
  439.                     <h5 class="card-title text-uppercase text-muted mb-0">Chantiers</h5>
  440.                     <span class="h2 font-weight-bold mb-0">350,897</span>
  441.                   </div>
  442.                   <div class="col-auto">
  443.                     <div class="icon icon-shape bg-danger text-white rounded-circle shadow">
  444.                       <i class="fa fa-chart-bar"></i>
  445.                     </div>
  446.                   </div>
  447.                 </div>
  448.                 <p class="mt-3 mb-0 text-muted text-sm">
  449.                   <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
  450.                   <span class="text-nowrap">Since last month</span>
  451.                 </p>
  452.               </div>
  453.             </div>
  454.           </div>
  455.           <div class="col-xl-3 col-lg-6">
  456.             <div class="card card-stats mb-4 mb-xl-0">
  457.               <div class="card-body">
  458.                 <div class="row">
  459.                   <div class="col">
  460.                     <h5 class="card-title text-uppercase text-muted mb-0">Investissement</h5>
  461.                     <span class="h2 font-weight-bold mb-0">2,356</span>
  462.                   </div>
  463.                   <div class="col-auto">
  464.                     <div class="icon icon-shape bg-warning text-white rounded-circle shadow">
  465.                       <i class="fa fa-chart-pie"></i>
  466.                     </div>
  467.                   </div>
  468.                 </div>
  469.                 <p class="mt-3 mb-0 text-muted text-sm">
  470.                   <span class="text-danger mr-2"><i class="fa fa-arrow-down"></i> 3.48%</span>
  471.                   <span class="text-nowrap">Since last week</span>
  472.                 </p>
  473.               </div>
  474.             </div>
  475.           </div>
  476.           <div class="col-xl-3 col-lg-6">
  477.             <div class="card card-stats mb-4 mb-xl-0">
  478.               <div class="card-body">
  479.                 <div class="row">
  480.                   <div class="col">
  481.                     <h5 class="card-title text-uppercase text-muted mb-0">Investisseurs</h5>
  482.                     <span class="h2 font-weight-bold mb-0">924</span>
  483.                   </div>
  484.                   <div class="col-auto">
  485.                     <div class="icon icon-shape bg-yellow text-white rounded-circle shadow">
  486.                       <i class="fa fa-users"></i>
  487.                     </div>
  488.                   </div>
  489.                 </div>
  490.                 <p class="mt-3 mb-0 text-muted text-sm">
  491.                   <span class="text-warning mr-2"><i class="fa fa-arrow-down"></i> 1.10%</span>
  492.                   <span class="text-nowrap">Since yesterday</span>
  493.                 </p>
  494.               </div>
  495.             </div>
  496.           </div>
  497.           <div class="col-xl-3 col-lg-6">
  498.             <div class="card card-stats mb-4 mb-xl-0">
  499.               <div class="card-body">
  500.                 <div class="row">
  501.                   <div class="col">
  502.                     <h5 class="card-title text-uppercase text-muted mb-0">Donations</h5>
  503.                     <span class="h2 font-weight-bold mb-0">49,65%</span>
  504.                   </div>
  505.                   <div class="col-auto">
  506.                     <div class="icon icon-shape bg-info text-white rounded-circle shadow">
  507.                       <i class="fa fa-percent"></i>
  508.                     </div>
  509.                   </div>
  510.                 </div>
  511.                 <p class="mt-3 mb-0 text-muted text-sm">
  512.                   <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 12%</span>
  513.                   <span class="text-nowrap">Since last month</span>
  514.                 </p>
  515.               </div>
  516.             </div>
  517.           </div>
  518.         </div>
  519.       </div>
  520. </div>
  525.   <section style="padding: 15px 0px;">
  526.     <div class="mzp-l-content">
  527.       <div class="mzp-l-card-hero">
  528.       {% for article in article_presentation %}
  529.             {% if loop.first %}
  530.                 <section class="mzp-c-card mzp-c-card-large mzp-has-aspect-16-9 mzp-has-video has-video-embed">
  531.                   <a class="mzp-c-card-block-link" href="{{ path('produit_service_detail_article_central', {'id': article.id }) }}" data-link-name="Dites stop aux traqueurs publicitaires" data-link-type="link" data-link-group="card" data-card-tag="Firefox">
  532.                     <div class="mzp-c-card-media-wrapper">
  533.                         <div class="lazy-image-container"><img class="mzp-c-card-image" src="{% if article.imgservice != null %}{{ asset(article.imgservice.getwebpath) }}{% else %}{{ asset('template/images/bg-host.png') }}{% endif %}" alt="" srcset="{% if article.imgservice != null %}{{ asset(article.imgservice.getwebpath) }}{% else %}{{ asset('template/images/bg-host.png') }}{% endif %} 2x"/></div>
  534.                     </div>
  535.                     <div class="mzp-c-card-content">
  536.                     
  537.                       <div class="mzp-c-card-tag">Firefox</div>
  538.                     
  539.                       <h2 class="mzp-c-card-title"><span>{{ article.nom }}</span></h2>
  540.                     
  541.                       <p class="mzp-c-card-desc">{{ article.description }}</p>
  542.                     </div>
  543.                   </a>
  544.                   
  545.                   <div class="mzp-c-card-video-wrapper hidden">
  546.                   <figure class="mzp-c-card-video-content mzp-c-modal-overlay-contents">
  547.                       <div class="ytcontainer-video">
  548.                         <div class="video-container">
  549.                           <div class="video-play" data-id="4OKMVy859wA"></div>
  550.                         </div>
  551.                       </div>
  552.                       <figcaption>
  553.                         <p>Plus de 2000 traqueurs vous suivent partout sur le Web et menacent votre vie privée. Alors Firefox les bloque pour vous. <a href="{{ path('produit_service_detail_article_central', {'id': article.id }) }}">En savoir plus</a></p>
  554.                       </figcaption>
  555.                     </figure>
  556.                    </div>
  557.                 </section>
  558.             {% else %}
  559.             
  560.             {% if loop.index == 2 %}
  561.                 <section class="mzp-c-card mzp-c-card-medium mzp-has-aspect-1-1  mzp-has-video has-video-embed">
  562.                   <a class="mzp-c-card-block-link" href="{{ path('produit_service_detail_article_central', {'id': article.id }) }}" data-link-name="Monitor surveille les fuites de données" data-link-type="link" data-link-group="card" data-card-tag="Sécurité">
  563.                     <div class="mzp-c-card-media-wrapper">
  564.                         <div class="lazy-image-container"><img class="mzp-c-card-image" src="{% if article.imgservice != null %}{{ asset(article.imgservice.getwebpath) }}{% else %}{{ asset('template/images/bg-host.png') }}{% endif %}" alt="" srcset="{% if article.imgservice != null %}{{ asset(article.imgservice.getwebpath) }}{% else %}{{ asset('template/images/bg-host.png') }}{% endif %} 2x"/></div>
  565.                     </div>
  566.                     <div class="mzp-c-card-content">
  567.                       <div class="mzp-c-card-tag">Sécurité</div>
  568.                     
  569.                       <h2 class="mzp-c-card-title"><span>{{ article.nom }}</span></h2>
  570.                     
  571.                       <p class="mzp-c-card-desc">{{ article.description }}</p>
  572.                     </div>
  573.                   </a>
  574.                   <div class="mzp-c-card-video-wrapper hidden">
  575.                       <figure class="mzp-c-card-video-content mzp-c-modal-overlay-contents">
  576.                           <div class="ytcontainer-video">
  577.                             <div class="video-container">
  578.                               <div class="video-play" data-id="FawHxwNzyPM"></div>
  579.                             </div>
  580.                           </div>
  581.                           <figcaption>
  582.                             <p>Visualisez les traqueurs que nous bloquons directement dans le navigateur. <a href="{{ path('produit_service_detail_article_central', {'id': article.id }) }}">En savoir plus</a></p>
  583.                           </figcaption>
  584.                         </figure>
  585.                     </div>
  586.                 </section>
  587.             {% else %}
  588.                 <section class="mzp-c-card mzp-c-card-small mzp-has-aspect-16-9 mzp-has-video has-video-embed">
  589.                     <a class="mzp-c-card-block-link" href="{{ path('produit_service_detail_article_central', {'id': article.id }) }}" data-link-name="Découvrez votre rapport de protection" data-link-type="link" data-link-group="card" data-card-tag="Outils Firefox">
  590.                     <div class="mzp-c-card-media-wrapper">
  591.                         <div class="lazy-image-container"><img class="mzp-c-card-image" src="{% if article.imgservice != null %}{{ asset(article.imgservice.getwebpath) }}{% else %}{{ asset('template/images/bg-host.png') }}{% endif %}" alt="" srcset="{% if article.imgservice != null %}{{ asset(article.imgservice.getwebpath) }}{% else %}{{ asset('template/images/bg-host.png') }}{% endif %} 2x"/></div>
  592.                       
  593.                     </div>
  594.                     <div class="mzp-c-card-content">
  595.                       <div class="mzp-c-card-tag">Outils Firefox</div>
  597.                       <h2 class="mzp-c-card-title"><span>{{ article.nom }}</span></h2>
  599.                       <p class="mzp-c-card-desc">{{ article.description }}</p>
  601.                     </div>
  602.                     </a>
  603.               
  604.                     <div class="mzp-c-card-video-wrapper hidden">
  605.                       <figure class="mzp-c-card-video-content mzp-c-modal-overlay-contents">
  606.                           <div class="ytcontainer-video">
  607.                             <div class="video-container">
  608.                               <div class="video-play" data-id="FawHxwNzyPM"></div>
  609.                             </div>
  610.                           </div>
  611.                           <figcaption>
  612.                             <p>Visualisez les traqueurs que nous bloquons directement dans le navigateur. <a href="{{ path('produit_service_detail_article_central', {'id': article.id }) }}">En savoir plus</a></p>
  613.                           </figcaption>
  614.                         </figure>
  615.                     </div>
  616.                 </section>
  617.             {% endif %}
  618.             {% endif %}
  619.         {% endfor %}
  620.       </div>
  621.       </div>
  622.       </section>
  624.     
  625.       <section style="margin-top: -20px;">
  626.       <div style="width: 95%; margin: 0px auto;">
  627.       <link href="{{ asset('template/css/tyfy.css') }}" rel="stylesheet"/>
  628.       <style>
  629.         div.demotabs {
  630.           border: 2px dashed #e6e6e6;
  631.           border-radius: .8125rem;
  632.           box-shadow: inset 0px 0px 1.625rem rgba(0, 0, 0, 0.05);
  633.           margin-top: 1.625rem;
  634.           padding: 15px;
  635.           background: #fff;
  636.         }
  637.         .links-underlined a[href]{border-bottom-style:solid;border-bottom-width:2px}ol,ul{line-height:1.625rem;padding-left:2.4375rem}
  638.       </style>
  639.       
  640.       
  641.       <div class="demotabs">
  642.           <div class="mzp-l-content">
  643.         <div class="links-underlined">
  644.             <h1>En quoi AFH Factory vous êtes utiles ?</h1>
  645.             <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>
  646.         </div>
  647.         <div class="tabs-container">
  648.             <h2 class="tab-label">Investisseur</h2>
  649.             <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>
  650.             <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>
  651.             
  652.             <h2 class="tab-label collapsed">Porteur de projet</h2>
  653.             <p>Facilis error corrupti dolor eaque. 
  654.             <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>
  655.             <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>
  656.             
  657.             <h2 class="tab-label collapsed">Contributeurs</h2>
  658.             <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>
  659.             
  660.         </div>
  661.       
  662.       <h2>Notes</h2>
  663.       <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>
  664.     </div>
  665.     </div>
  666.       
  667.       <script>
  668.         $(document).ready(function(){
  669.   
  670.           GoToAnchor = function(){
  671.             // find the anchor and any tab it might be in
  672.             selected_anchor_name = encodeURIComponent(window.location.hash.substring(1));
  673.                 selected_anchor = $('a[name="'+selected_anchor_name+'"], a[id="'+selected_anchor_name+'"]');
  674.             parent_tab = selected_anchor.parents('.tab-panel');
  675.             // account for an anchor in a label
  676.             parent_label = selected_anchor.parents('.tab-label');
  677.             if (parent_label.length) {
  678.               parent_tab = parent_label.next('.tab-panel');
  679.             }
  680.             // do the steps of this function only if we have an anchor link and a tab panel
  681.             if (selected_anchor.length && parent_tab.length) {
  682.               parent_tab_label = parent_tab.prev('.tab-label');
  683.                   parent_tab_index = parent_tab_label.attr('data-tabindex');
  684.               parent_tab.parent().find('ul.tabs li').eq(parent_tab_index).click();
  685.               if (parent_tab.hasClass('collapsed')) {
  686.                 parent_tab.removeClass('collapsed');
  687.                 parent_tab_label.removeClass('collapsed');
  688.               }
  689.               // scroll to the anchor
  690.               var s = selected_anchor.offset().top - 50; // console.log(s);
  691.               $('body,html').animate({'scrollTop':s},500,'swing');
  692.                 }
  693.           };
  694.           
  695.           // prepare HTML structure for each tab container
  696.           $('.tabs-container').each(function(){
  697.             if (!$(this).hasClass('tabs-processed')) {
  698.               // find the headings that are tab labels
  699.               my_tablabels = $(this).find('.tab-label');
  700.               // create tabs
  701.               if ($(this).find('ul.tabs').length === 0) {
  702.                 $(this).prepend('<ul class="tabs"></ul>');
  703.                 var x;
  704.                 for (x=0;x<my_tablabels.length;x++) {
  705.                   $(this).find('ul.tabs').append('<li data-tabindex="'+x+'">'+my_tablabels.eq(x).text()+'</li>');
  706.                 }
  707.               }
  708.               // structure all labels and wrap all tab panels
  709.               if ($(this).find('.tab-panel').length === 0) {
  710.                 my_tablabels.each(function(i){
  711.                   $(this).attr('data-tabindex',i);
  712.                   $(this).wrapInner('<a id="'+encodeURIComponent($(this).text())+'"></a>');
  713.                   kids = $(this).nextUntil('.tab-label').wrapAll('<div class="tab-panel"></div>');
  714.                   // default state class for when tabs are collapsable sections
  715.                   $(this).addClass('collapsed').next('.tab-panel').addClass('collapsed');
  716.                 });    
  717.               }
  718.               // open initial tab
  719.               $(this).find('ul.tabs li').eq(0).addClass('open');
  720.               my_tablabels.eq(0).addClass('open').next('.tab-panel').addClass('open');
  721.               // tab click events
  722.               $('.tabs-container ul.tabs li').each(function(i){
  723.                 $(this).click(function(){
  724.                   if (!$(this).hasClass('open')) {
  725.                     $('.tabs-container .open').removeClass('open');
  726.                     my_tabindex = $(this).attr('data-tabindex');
  727.                     $(this).addClass('open');
  728.                     $('.tabs-container .tab-label').eq(my_tabindex).addClass('open');
  729.                     $('.tabs-container .tab-panel').eq(my_tabindex).addClass('open');
  730.                   }
  731.                 });
  732.               });
  733.               // collapsable header click event
  734.               $('.tabs-container .tab-label').click(function(){
  735.                 if (!$(this).hasClass('transition')) {
  736.                   kids = $(this).next('.tab-panel');
  737.                   kids.removeClass('collapsed');
  738.                   var fullHeight = kids.outerHeight();
  739.                   $(this).addClass('transition');
  740.                   kids.addClass('transition');
  741.                   if ($(this).hasClass('collapsed')) {
  742.                     kids.css({'height':'0px','padding-bottom':'0px','padding-top':'0px'}).animate({
  743.                       height:fullHeight+'px',
  744.                       paddingBottom:'32px',
  745.                       paddingTop:'16px',
  746.                     },500,function(){
  747.                       $('.tabs-container .transition').removeClass('collapsed').removeClass('transition').removeAttr('style');
  748.                     });
  749.                   }
  750.                   else {
  751.                     kids.css('height',fullHeight+'px').animate({
  752.                       height:'0px',
  753.                       paddingBottom:'0px',
  754.                       paddingTop:'0px',
  755.                     },500,function(){
  756.                       $('.tabs-container .transition').addClass('collapsed').removeClass('transition').removeAttr('style');
  757.                     });
  758.                   }
  759.                 }
  760.               }); 
  761.               // indicate state of readiness
  762.               $(this).addClass('tabs-processed');
  763.             }  
  764.           });
  765.           // if there are tabs and someone has linked to an anchor inside a tab
  766.           console.log(window.location.hash);
  767.           if (window.location.hash != '') {
  768.             GoToAnchor();
  769.           }
  770.           // handle case when page is already loaded
  771.           $(window).on('hashchange',function(){
  772.             GoToAnchor();
  773.           });
  774.         });
  775.       </script>
  776.       </div>
  777.       </section>
  779.       <style>
  780.           .articles {
  781.             background-color: white;
  782.             padding: 40px;
  783.             display: -webkit-box;
  784.             display: -ms-flexbox;
  785.             display: flex;
  786.             -webkit-box-orient: vertical;
  787.             -webkit-box-direction: normal;
  788.                 -ms-flex-direction: column;
  789.                     flex-direction: column;
  790.             max-width: 600px;
  791.             position: relative;
  792.             border-radius: 10px;
  793.             border: 7px dashed #ddd;
  794.             }
  795.             .articles__close {
  796.             display: -webkit-inline-box;
  797.             display: -ms-inline-flexbox;
  798.             display: inline-flex;
  799.             position: absolute;
  800.             right: 40px;
  801.             top: 40px;
  802.             cursor: pointer;
  803.             }
  804.             .articles h1 {
  805.             margin: 0px;
  806.             margin-bottom: 10px;
  807.             font-size: 22px;
  808.             color: #100e21;
  809.             }
  810.             .articles span {
  811.             color: #100e21;
  812.             margin-bottom: 30px;
  813.             }
  814.             .articles__list {
  815.             padding-left: 0px;
  816.             list-style: none;
  817.             display: -webkit-box;
  818.             display: -ms-flexbox;
  819.             display: flex;
  820.             -webkit-box-orient: vertical;
  821.             -webkit-box-direction: normal;
  822.                 -ms-flex-direction: column;
  823.                     flex-direction: column;
  824.             }
  825.             .articles__list > li {
  826.             padding: 30px;
  827.             display: -webkit-box;
  828.             display: -ms-flexbox;
  829.             display: flex;
  830.             -webkit-box-orient: vertical;
  831.             -webkit-box-direction: normal;
  832.                 -ms-flex-direction: column;
  833.                     flex-direction: column;
  834.             border: 1px solid #dedee9;
  835.             }
  836.             .articles__list > li + li {
  837.             margin-top: 10px;
  838.             }
  839.             .articles__list > li a {
  840.             text-decoration: none;
  841.             }
  842.             .articles__list > li a h2 {
  843.             margin: 0px;
  844.             color: #442fef;
  845.             }
  846.             .articles__list .list__footer {
  847.             padding-left: 0px;
  848.             list-style: none;
  849.             display: -webkit-box;
  850.             display: -ms-flexbox;
  851.             display: flex;
  852.             margin-top: 20px;
  853.             }
  854.             .articles__list .list__footer li {
  855.             display: -webkit-box;
  856.             display: -ms-flexbox;
  857.             display: flex;
  858.             -webkit-box-align: center;
  859.                 -ms-flex-align: center;
  860.                     align-items: center;
  861.             }
  862.             .articles__list .list__footer li span {
  863.             margin-bottom: 0px;
  864.             margin-left: 5px;
  865.             line-height: 17px;
  866.             color: #100e21;
  867.             font-size: 14px;
  868.             font-weight: 700;
  869.             }
  870.             .articles__list .list__footer li + li {
  871.             margin-left: 30px;
  872.             }
  873.             .articles__list .list__footer li i {
  874.             font-size: 26px;
  875.             }
  876.             @import "https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700";
  877. *, *:before, *:after {
  878.   box-sizing: border-box;
  879.   -webkit-box-sizing: border-box;
  880.   -moz-box-sizing: border-box;
  881. }
  882. body, html {
  883.   height: 100%;
  884. }
  885. body {
  886.   background: #f9f9f9;
  887.   background-size: cover;
  888.   margin: 0;
  889.   padding: 0;
  890.   font-family: helvetica, arial, tahoma, verdana;
  891.   line-height: 20px;
  892.   font-size: 14px;
  893.   color: #726f77;
  894. }
  895. img {
  896.   max-width: 100%;
  897. }
  898. a {
  899.   text-decoration: none;
  900. }
  901. h1, h2, h3, h4 {
  902.   font-family: "Dosis", arial, tahoma, verdana;
  903.   font-weight: 500;
  904. }
  905. .project-name {
  906.   text-align: center;
  907.   padding: 10px 0;
  908. }
  909. .success {
  910.   background: #78AD42 !important;
  911. }
  912. .timeline-container {
  913.   max-width: 1000px;
  914.   margin: 0 auto;
  915. }
  916. #timeline .timeline-item:after, #timeline .timeline-item:before {
  917.   content: '';
  918.   display: block;
  919.   width: 100%;
  920.   clear: both;
  921. }
  922. #timeline {
  923.   width: 100%;
  924.   margin: 0px auto;
  925.   position: relative;
  926.   padding: 0 20px;
  927.   -webkit-transition: all 0.4s ease;
  928.   -moz-transition: all 0.4s ease;
  929.   -ms-transition: all 0.4s ease;
  930.   transition: all 0.4s ease;
  931. }
  932. #timeline:before {
  933.   content: "";
  934.   width: 3px;
  935.   height: 100%;
  936.   background: #1C71A4;
  937.   left: 50%;
  938.   top: 0;
  939.   position: absolute;
  940. }
  941. #timeline:after {
  942.   content: "";
  943.   clear: both;
  944.   display: table;
  945.   width: 100%;
  946. }
  947. #timeline .timeline-item {
  948.   margin-bottom: 50px;
  949.   position: relative;
  950. }
  951. #timeline .timeline-item .timeline-icon {
  952.   background: #1C71A4;
  953.   width: 50px;
  954.   height: 50px;
  955.   position: absolute;
  956.   top: 0;
  957.   left: 50%;
  958.   overflow: hidden;
  959.   margin-left: -23px;
  960.   -webkit-border-radius: 50%;
  961.   -moz-border-radius: 50%;
  962.   -ms-border-radius: 50%;
  963.   border-radius: 50%;
  964. }
  965. #timeline .timeline-item .timeline-icon svg, #timeline .timeline-item .timeline-icon .fa {
  966.   position: relative;
  967.   top: 13px;
  968.   left: 14px;
  969.   font-size: 24px;
  970.   color: #fff;
  971. }
  972. #timeline .timeline-item .timeline-content {
  973.   width: 45%;
  974.   background: #fff;
  975.   padding: 20px;
  976.   -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  977.   -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  978.   -ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  979.   box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  980.   -webkit-border-radius: 5px;
  981.   -moz-border-radius: 5px;
  982.   -ms-border-radius: 5px;
  983.   border-radius: 5px;
  984.   -webkit-transition: all 0.3s ease;
  985.   -moz-transition: all 0.3s ease;
  986.   -ms-transition: all 0.3s ease;
  987.   transition: all 0.3s ease;
  988. }
  989. #timeline .timeline-item .timeline-content h2 {
  990.   padding: 15px;
  991.   background: #1C71A4;
  992.   color: #fff;
  993.   margin: -20px -20px 0 -20px;
  994.   font-weight: 300;
  995.   -webkit-border-radius: 3px 3px 0 0;
  996.   -moz-border-radius: 3px 3px 0 0;
  997.   -ms-border-radius: 3px 3px 0 0;
  998.   border-radius: 3px 3px 0 0;
  999.   font-size: 22px;
  1000. }
  1001. #timeline .timeline-item .timeline-content p {
  1002.   padding-top: 10px;
  1003.   padding-bottom: 10px;
  1004. }
  1005. #timeline .timeline-item .timeline-content:before {
  1006.   content: '';
  1007.   position: absolute;
  1008.   left: 45%;
  1009.   top: 20px;
  1010.   width: 0;
  1011.   height: 0;
  1012.   border-top: 7px solid transparent;
  1013.   border-bottom: 7px solid transparent;
  1014.   border-left: 7px solid #1C71A4;
  1015. }
  1016. #timeline .timeline-item .timeline-content.right {
  1017.   float: right;
  1018. }
  1019. #timeline .timeline-item .timeline-content.right:before {
  1020.   content: '';
  1021.   right: 45%;
  1022.   left: inherit;
  1023.   border-left: 0;
  1024.   border-right: 7px solid #1C71A4;
  1025. }
  1026.   #timeline {
  1027.     margin: 0px;
  1028.     padding: 0px;
  1029.     width: 100%;
  1030.   }
  1031.   #timeline:before {
  1032.     left: 0;
  1033.   }
  1034.   #timeline .timeline-item .timeline-content {
  1035.     width: 90%;
  1036.     float: right;
  1037.   }
  1038.   #timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
  1039.     left: 10%;
  1040.     margin-left: -6px;
  1041.     border-left: 0;
  1042.     border-right: 7px solid #1C71A4;
  1043.   }
  1044.   #timeline .timeline-item .timeline-icon {
  1045.     left: 0;
  1046.   }
  1047. /* Animation CSS */
  1048. /* icon animation */
  1049. .timeline-icon.is-hidden {
  1050.   visibility: hidden;
  1051. }
  1052. .timeline-icon.animate-it {
  1053.   visibility: visible;
  1054.    -webkit-animation: bounce-1 0.6s;
  1055.    -moz-animation: bounce-1 0.6s;
  1056.     animation: bounce-1 0.6s;
  1057. }
  1058. /* content block animation */
  1059. .timeline-content.is-hidden {
  1060.   visibility: hidden;
  1061. }
  1062. .timeline-content.animate-it {
  1063.   visibility: visible;
  1064.    -webkit-animation: bounce-2 0.6s;
  1065.    -moz-animation: bounce-2 0.6s;
  1066.     animation: bounce-2 0.6s;
  1067.   }
  1068. @media only screen and (min-width: 769px) {
  1069.   /* Inverse bounce effect on even content blocks */
  1070. .timeline-content.right.animate-it {
  1071.     -webkit-animation: bounce-2-inverse 0.6s;
  1072.     -moz-animation: bounce-2-inverse 0.6s;
  1073.     animation: bounce-2-inverse 0.6s;
  1074.   }
  1075. }
  1076. @media only screen and (max-width: 768px) {
  1077.   /* Inverse bounce effect on all content blocks */
  1078. .timeline-content.animate-it, .timeline-content.right.animate-it {
  1079.     -webkit-animation: bounce-2-inverse 0.6s;
  1080.     -moz-animation: bounce-2-inverse 0.6s;
  1081.     animation: bounce-2-inverse 0.6s;
  1082.   }
  1083. }
  1084. /* ALL animation types called */
  1085. @-webkit-keyframes bounce-1 {
  1086.   0% {
  1087.     opacity: 0;
  1088.     -webkit-transform: scale(0.5);
  1089.   }
  1090.   60% {
  1091.     opacity: 1;
  1092.     -webkit-transform: scale(1.2);
  1093.   }
  1094.   100% {
  1095.     -webkit-transform: scale(1);
  1096.   }
  1097. }
  1098. @-moz-keyframes bounce-1 {
  1099.   0% {
  1100.     opacity: 0;
  1101.     -moz-transform: scale(0.5);
  1102.   }
  1103.   60% {
  1104.     opacity: 1;
  1105.     -moz-transform: scale(1.2);
  1106.   }
  1107.   100% {
  1108.     -moz-transform: scale(1);
  1109.   }
  1110. }
  1111. @keyframes bounce-1 {
  1112.   0% {
  1113.     opacity: 0;
  1114.     -webkit-transform: scale(0.5);
  1115.     -moz-transform: scale(0.5);
  1116.     -ms-transform: scale(0.5);
  1117.     -o-transform: scale(0.5);
  1118.     transform: scale(0.5);
  1119.   }
  1120.   60% {
  1121.     opacity: 1;
  1122.     -webkit-transform: scale(1.2);
  1123.     -moz-transform: scale(1.2);
  1124.     -ms-transform: scale(1.2);
  1125.     -o-transform: scale(1.2);
  1126.     transform: scale(1.2);
  1127.   }
  1128.   100% {
  1129.     -webkit-transform: scale(1);
  1130.     -moz-transform: scale(1);
  1131.     -ms-transform: scale(1);
  1132.     -o-transform: scale(1);
  1133.     transform: scale(1);
  1134.   }
  1135. }
  1136. @-webkit-keyframes bounce-2 {
  1137.   0% {
  1138.     opacity: 0;
  1139.     -webkit-transform: translateX(-100px);
  1140.   }
  1141.   60% {
  1142.     opacity: 1;
  1143.     -webkit-transform: translateX(20px);
  1144.   }
  1145.   100% {
  1146.     -webkit-transform: translateX(0);
  1147.   }
  1148. }
  1149. @-moz-keyframes bounce-2 {
  1150.   0% {
  1151.     opacity: 0;
  1152.     -moz-transform: translateX(-100px);
  1153.   }
  1154.   60% {
  1155.     opacity: 1;
  1156.     -moz-transform: translateX(20px);
  1157.   }
  1158.   100% {
  1159.     -moz-transform: translateX(0);
  1160.   }
  1161. }
  1162. @keyframes bounce-2 {
  1163.   0% {
  1164.     opacity: 0;
  1165.     -webkit-transform: translateX(-100px);
  1166.     -moz-transform: translateX(-100px);
  1167.     -ms-transform: translateX(-100px);
  1168.     -o-transform: translateX(-100px);
  1169.     transform: translateX(-100px);
  1170.   }
  1171.   60% {
  1172.     opacity: 1;
  1173.     -webkit-transform: translateX(20px);
  1174.     -moz-transform: translateX(20px);
  1175.     -ms-transform: translateX(20px);
  1176.     -o-transform: translateX(20px);
  1177.     transform: translateX(20px);
  1178.   }
  1179.   100% {
  1180.     -webkit-transform: translateX(0);
  1181.     -moz-transform: translateX(0);
  1182.     -ms-transform: translateX(0);
  1183.     -o-transform: translateX(0);
  1184.     transform: translateX(0);
  1185.   }
  1186. }
  1187. @-webkit-keyframes bounce-2-inverse {
  1188.   0% {
  1189.     opacity: 0;
  1190.     -webkit-transform: translateX(100px);
  1191.   }
  1192.   60% {
  1193.     opacity: 1;
  1194.     -webkit-transform: translateX(-20px);
  1195.   }
  1196.   100% {
  1197.     -webkit-transform: translateX(0);
  1198.   }
  1199. }
  1200. @-moz-keyframes bounce-2-inverse {
  1201.   0% {
  1202.     opacity: 0;
  1203.     -moz-transform: translateX(100px);
  1204.   }
  1205.   60% {
  1206.     opacity: 1;
  1207.     -moz-transform: translateX(-20px);
  1208.   }
  1209.   100% {
  1210.     -moz-transform: translateX(0);
  1211.   }f
  1212. }
  1213. @keyframes bounce-2-inverse {
  1214.   0% {
  1215.     opacity: 0;
  1216.     -webkit-transform: translateX(100px);
  1217.     -moz-transform: translateX(100px);
  1218.     -ms-transform: translateX(100px);
  1219.     -o-transform: translateX(100px);
  1220.     transform: translateX(100px);
  1221.   }
  1222.   60% {
  1223.     opacity: 1;
  1224.     -webkit-transform: translateX(-20px);
  1225.     -moz-transform: translateX(-20px);
  1226.     -ms-transform: translateX(-20px);
  1227.     -o-transform: translateX(-20px);
  1228.     transform: translateX(-20px);
  1229.   }
  1230.   100% {
  1231.     -webkit-transform: translateX(0);
  1232.     -moz-transform: translateX(0);
  1233.     -ms-transform: translateX(0);
  1234.     -o-transform: translateX(0);
  1235.     transform: translateX(0);
  1236.   }
  1237. }
  1241.       </style>
  1244.     <section style="padding: 25px 0px;">
  1246.         <div class="mzp-l-content">
  1247.             <div class="row">
  1248.                 <div class="col-md-7">
  1250.                     {% for cat in liste_categorie|slice(0,2) %}
  1251.                     <h5 class="mzp-c-footer-heading" style="font-weight: 700;">
  1252.                         {{ cat.nom }}
  1253.                     </h5>
  1254.                     <div class="row grid">
  1255.                         {% set liste_scat = cat.getListeScat %}
  1256.                         {% for scat in liste_scat|slice(0,2) %}
  1257.                         <div class="col-md-6">
  1258.                             <div class="cardcode image-cardcode">
  1259.                                 <a href="{{ path('produit_produit_listes_produit_user', {'id': scat.id}) }}" class="img" style="height: 138.344px;"><span style="background: url('{% if scat.src != null %}{{ asset(scat.getWebpath) }}{% else %}{{ asset('template/images/3plan.png') }}{% endif %}')"></span></a>
  1260.                                 <a href="{{ path('produit_produit_listes_produit_user', {'id': scat.id}) }}" class="title"><h2> {{ scat.description }} </h2></a>
  1261.         
  1262.                                 <div class="infos">
  1263.                                     <span><a href="{{ path('produit_produit_listes_produit_user', {'id': scat.id}) }}"> {{ scat.nom }}</a></span>
  1264.                                     <span class="stats">
  1265.                                         <span><i class="fa fa-eye"></i>661</span>
  1266.                                         <span><i class="fa fa-comment"></i>0</span>
  1267.                                     </span>
  1268.                                 </div>
  1269.                             </div>
  1270.                         </div>
  1271.                         {% endfor %}
  1272.                     </div> <!-- End Row -->
  1273.                     {% endfor %}
  1275.                 </div>
  1277.                 <div class="col-md-5">
  1278.                     
  1279.                     <div id="timeline">
  1281.                         <div class="timeline-item">
  1282.                           <div class="timeline-icon">
  1283.                             <i class="fa fa-envelope-o" aria-hidden="true"></i>
  1284.                           </div>
  1285.                           <div class="timeline-content">
  1286.                             <h2>Notre vision</h2>
  1287.                             <p>
  1288.                               Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
  1289.                               Atque, facilis quo maiores magnam modi ab libero praesentium blanditiis.
  1290.                             </p>
  1291.                             <span class="time-stamp">Thu Jan - 26 - 2017 01:54</span>
  1292.                           </div>
  1293.                         </div>
  1294.                   
  1295.                         <div class="timeline-item">
  1296.                           <div class="timeline-icon">
  1297.                             <i class="fa fa-envelope-open-o" aria-hidden="true"></i>
  1298.                           </div>
  1299.                           <div class="timeline-content right">
  1300.                             <h2>Notre Missions</h2>
  1301.                             <p>
  1302.                               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, facilis quo. Maiores magnam modi ab libero praesentium blanditiis consequatur aspernatur.
  1303.                             </p>
  1304.                             <span class="time-stamp">Thu Jan - 26 - 2017 01:54</span>
  1305.                           </div>
  1306.                         </div>
  1307.                   
  1308.                         <div class="timeline-item">
  1309.                           <div class="timeline-icon success">
  1310.                             <i class="fa fa-star" aria-hidden="true"></i>
  1311.                           </div>
  1312.                           <div class="timeline-content">
  1313.                             <h2>Nos Valeurs</h2>
  1314.                             <p>
  1315.                               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, facilis quo. Maiores magnam modi ab libero praesentium blanditiis consequatur aspernatur accusantium maxime molestiae sunt ipsa.
  1316.                             </p>
  1317.                              <span class="time-stamp">Thu Jan - 26 - 2017 01:54</span>
  1318.                           </div>
  1319.                         </div>
  1320.                   
  1321.                   
  1322.                     </div>
  1324.                 </div>
  1325.             </div>
  1326.         </div>
  1328.         <script type="text/javascript">
  1329.             $(function() {
  1330.                 var timelineBlocks = $('.timeline-item'),
  1331.                     offset = 0.8;
  1332.                 //hide timeline blocks which are outside the viewport
  1333.                 hideBlocks(timelineBlocks, offset);
  1334.                 //on scolling, show/animate timeline blocks when entering the viewport
  1335.                 $(window).on('scroll', function(){
  1336.                     (!window.requestAnimationFrame) 
  1337.                         ? setTimeout(function(){ showBlocks(timelineBlocks, offset); }, 100)
  1338.                         : window.requestAnimationFrame(function(){ showBlocks(timelineBlocks, offset); });
  1339.                 });
  1340.                 function hideBlocks(blocks, offset) {
  1341.                     blocks.each(function(){
  1342.                         ($(this).offset().top > $(window).scrollTop() + $(window).height() * offset) && $(this).find('.timeline-icon, .timeline-content').addClass('is-hidden');
  1343.                     });
  1344.                 }
  1345.                 function showBlocks(blocks, offset) {
  1346.                     blocks.each(function(){
  1347.                         ($(this).offset().top <= $(window).scrollTop() + $(window).height() * offset && $(this).find('.timeline-icon').hasClass('is-hidden')) && $(this).find('.timeline-icon, .timeline-content').removeClass('is-hidden').addClass('animate-it');
  1348.                     });
  1349.                 }
  1350.             });
  1351.         </script>
  1352.       </section>
  1354. <style>
  1355. .news-section {
  1356.   padding: 0px 0;
  1357. }
  1358. .news-content {
  1359.     padding: 40px 30px;
  1360. }
  1361. .news-item {
  1362.     box-shadow: 0 0 15px #ededed;
  1363.     -webkit-transition: .5s;
  1364.     -o-transition: .5s;
  1365.     transition: .5s;
  1366.     margin-bottom: 40px;
  1367. }
  1368. .news-item:hover {
  1369.     -webkit-transform: translateY(-10px);
  1370.     -ms-transform: translateY(-10px);
  1371.     transform: translateY(-10px);
  1372.     -webkit-box-shadow: 0px 15px 15px 0px #edeaea;
  1373.     box-shadow: 0px 15px 15px 0px #edeaea;
  1374. }
  1375. .newsimg img {
  1376.     width: 100%;
  1377. }
  1378. .news_postdate {
  1379.     color: #FF3A46;
  1380. }
  1381. .news-content h3 {
  1382.     color: #233D63;
  1383.     font-size: 22px;
  1384.     margin-bottom: 25px;
  1385. }
  1386. .news_authorinfo {
  1387.     border: transparent;
  1388.     padding: 14px 0px 0px 0px;
  1389.     background: transparent;
  1390.     font-size: 14px;
  1391. }
  1392. .news_authorinfo i {
  1393.     margin-right: 6px;
  1394. }
  1395. .news_authorinfo span:last-child {
  1396.     float: right;
  1397. }
  1398. .news_authorinfo a {
  1399.     color: #666;
  1400. }
  1401. .center .news-content {
  1402.     background: linear-gradient(-120deg, #8758ff 0, #614ef9 100%);
  1403. }
  1404. .center .news-content h3,
  1405. .center .news-content p {
  1406.     color: #fff;
  1407. }
  1408. .center .news_authorinfo a,
  1409. .center .news_authorinfo i {
  1410.     color: #fff;
  1411. }
  1412. .news-slide.owl-carousel .col-lg-3 {
  1413.     max-width: 100%;
  1414.     padding: 0;
  1415. }
  1416. .news-section .owl-theme .owl-nav [class*="owl-"] {
  1417.     color: #333;
  1418.     font-size: 14px;
  1419.     margin: 5px;
  1420.     padding: 4px 7px;
  1421.     background: #fff;
  1422.     display: inline-block;
  1423.     cursor: pointer;
  1424.     border-radius: 3px;
  1425.     border: 1px solid #ddd;
  1426. }
  1427. .small-title {
  1428.   font-size: 20px;
  1429.   text-transform: capitalize;
  1430.   color: #FF3A46;
  1431.   margin-bottom: 10px;
  1432.   margin-top: 0px;
  1433.   font-weight: 600;
  1434. }
  1435. .big-title {
  1436.     letter-spacing: 0px;
  1437.     padding-bottom: 13px;
  1438.     position: relative;
  1439.     color: #233D63;
  1440.     line-height: 50px;
  1441.     font-size: 36px;
  1442.     text-transform: capitalize;
  1443.     font-weight: 600;
  1444. }
  1445. .main-title-box {
  1446.     margin-bottom: 60px;
  1447. }
  1448.       </style>
  1449.       
  1450.       
  1451. <section class="news-section">
  1453.         <div class="mzp-l-content blog" id="blog">
  1454.                 <div class="text-left">
  1455.                     <h3>
  1456.                         Nos programmes
  1457.                     </h3>
  1458.                     
  1459.                     <div>
  1460.                         La transparence 
  1461.                     </div>
  1462.                 </div>
  1464.                    <div class="row posts-list">
  1466.               
  1467.                        <!--Single Blog Start-->
  1468.                        <div class="col-lg-4 col-md-4 wow fadeInUp" data-wow-delay="0ms">
  1470.                         <article>
  1471.                             <div class="post-img">
  1472.                                 <img src="https://i.ibb.co/m5yGbdR/blog2.jpg" alt="" class="img-fluid">
  1473.                             </div>
  1474.                             <p class="post-category">Commandez un  Hébergement pro.</p>
  1475.                             <h2 class="title">
  1476.                                 <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>
  1477.                             </h2>
  1478.                 
  1479.                             <div class="d-flex align-items-center">
  1480.                                 <img src="/template/images/co.png" alt="" class="img-fluid post-author-img flex-shrink-0">
  1481.                                 <div class="post-meta">
  1482.                                 <div class="post-author-list">Kenfack Noel</div>
  1483.                                 <div class="post-date">
  1484.                                     <time datetime="2022-01-01">01 Feb 2024</time>
  1485.                                 </div>
  1486.                                 </div>
  1487.                             </div>
  1488.                         </article>
  1490.                        </div>
  1491.                        <!--Single Blog End-->
  1492.                        <!--Single Blog Start-->
  1493.                        <div class="col-lg-4 col-md-4 wow fadeInUp" data-wow-delay="0ms">
  1495.                         <article>
  1496.                             <div class="post-img">
  1497.                                 <img src="https://i.ibb.co/m5yGbdR/blog2.jpg" alt="" class="img-fluid">
  1498.                             </div>
  1499.                             <p class="post-category">Commandez un  Hébergement pro.</p>
  1500.                             <h2 class="title">
  1501.                                 <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>
  1502.                             </h2>
  1503.                 
  1504.                             <div class="d-flex align-items-center">
  1505.                                 <img src="/template/images/co.png" alt="" class="img-fluid post-author-img flex-shrink-0">
  1506.                                 <div class="post-meta">
  1507.                                 <div class="post-author-list">Kenfack Noel</div>
  1508.                                 <div class="post-date">
  1509.                                     <time datetime="2022-01-01">01 Feb 2024</time>
  1510.                                 </div>
  1511.                                 </div>
  1512.                             </div>
  1513.                         </article>
  1515.                        </div>
  1516.                        <!--Single Blog Start-->
  1517.                        <!--Single Blog Start-->
  1518.                        <div class="col-lg-4 col-md-4 wow fadeInUp" data-wow-delay="0ms">
  1520.                         <article>
  1521.                             <div class="post-img">
  1522.                                 <img src="https://i.ibb.co/m5yGbdR/blog2.jpg" alt="" class="img-fluid">
  1523.                             </div>
  1524.                             <p class="post-category">Commandez un  Hébergement pro.</p>
  1525.                             <h2 class="title">
  1526.                                 <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>
  1527.                             </h2>
  1528.                 
  1529.                             <div class="d-flex align-items-center">
  1530.                                 <img src="/template/images/co.png" alt="" class="img-fluid post-author-img flex-shrink-0">
  1531.                                 <div class="post-meta">
  1532.                                 <div class="post-author-list">Kenfack Noel</div>
  1533.                                 <div class="post-date">
  1534.                                     <time datetime="2022-01-01">01 Feb 2024</time>
  1535.                                 </div>
  1536.                                 </div>
  1537.                             </div>
  1538.                         </article>
  1540.                        </div>
  1541.                        <!--Single Blog Start-->
  1542.                        
  1543.                    </div>
  1544.                </div>
  1545.            </div>
  1546.    </section>
  1548. {% endblock %}
  1550. {% block javascripttemplate %}
  1552. {% endblock %}