var/cache/dev/twig/ef/ef7b4add6d753e207cc91ec92914f70d1cacca13772006b3e3e6b30af3b78088.php line 51

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\SandboxExtension;
  7. use Twig\Markup;
  8. use Twig\Sandbox\SecurityError;
  9. use Twig\Sandbox\SecurityNotAllowedTagError;
  10. use Twig\Sandbox\SecurityNotAllowedFilterError;
  11. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  12. use Twig\Source;
  13. use Twig\Template;
  15. /* Theme/Users/User/Security/accueilsite.html.twig */
  16. class __TwigTemplate_533524715d2214c8f34161a9ec2af395d8d6665b80c15af5b6cb15e16daf9efb extends Template
  17. {
  18.     private $source;
  19.     private $macros = [];
  21.     public function __construct(Environment $env)
  22.     {
  23.         parent::__construct($env);
  25.         $this->source = $this->getSourceContext();
  27.         $this->blocks = [
  28.             'meta' => [$this, 'block_meta'],
  29.             'title' => [$this, 'block_title'],
  30.             'userblog_body' => [$this, 'block_userblog_body'],
  31.             'javascripttemplate' => [$this, 'block_javascripttemplate'],
  32.         ];
  33.     }
  35.     protected function doGetParent(array $context)
  36.     {
  37.         // line 1
  38.         return "Theme/Users/User/layoutoffert.html.twig";
  39.     }
  41.     protected function doDisplay(array $context, array $blocks = [])
  42.     {
  43.         $macros = $this->macros;
  44.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  45.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Theme/Users/User/Security/accueilsite.html.twig"));
  47.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  48.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Theme/Users/User/Security/accueilsite.html.twig"));
  50.         $this->parent = $this->loadTemplate("Theme/Users/User/layoutoffert.html.twig", "Theme/Users/User/Security/accueilsite.html.twig", 1);
  51.         $this->parent->display($context, array_merge($this->blocks, $blocks));
  52.         
  53.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  55.         
  56.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  58.     }
  60.     // line 2
  61.     public function block_meta($context, array $blocks = [])
  62.     {
  63.         $macros = $this->macros;
  64.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  65.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "meta"));
  67.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  68.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "meta"));
  70.         // line 3
  71.         echo "\t";
  72.         $this->displayParentBlock("meta", $context, $blocks);
  73.         echo "
  74. \t<meta name=\"keywords\" content=\"";
  75.         // line 4
  76.         echo twig_escape_filter($this->env, (isset($context["site"]) || array_key_exists("site", $context) ? $context["site"] : (function () { throw new RuntimeError('Variable "site" does not exist.', 4, $this->source); })()), "html", null, true);
  77.         echo ", ";
  78.         echo twig_escape_filter($this->env, (isset($context["keywords"]) || array_key_exists("keywords", $context) ? $context["keywords"] : (function () { throw new RuntimeError('Variable "keywords" does not exist.', 4, $this->source); })()), "html", null, true);
  79.         echo "\"/>
  80. \t<meta name=\"author\" content=\"Noel Kenfack\"/>
  81. \t<meta name=\"description\" content=\"";
  82.         // line 6
  83.         echo twig_escape_filter($this->env, (isset($context["site"]) || array_key_exists("site", $context) ? $context["site"] : (function () { throw new RuntimeError('Variable "site" does not exist.', 6, $this->source); })()), "html", null, true);
  84.         echo " | ";
  85.         echo twig_escape_filter($this->env, (isset($context["description"]) || array_key_exists("description", $context) ? $context["description"] : (function () { throw new RuntimeError('Variable "description" does not exist.', 6, $this->source); })()), "html", null, true);
  86.         echo "\"/>
  87. ";
  88.         
  89.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  91.         
  92.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  94.     }
  96.     // line 9
  97.     public function block_title($context, array $blocks = [])
  98.     {
  99.         $macros = $this->macros;
  100.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  101.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  103.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  104.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  106.         // line 10
  107.         echo "\t";
  108.         $this->displayParentBlock("title", $context, $blocks);
  109.         echo " | Accueil
  110. ";
  111.         
  112.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  114.         
  115.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  117.     }
  119.     // line 13
  120.     public function block_userblog_body($context, array $blocks = [])
  121.     {
  122.         $macros = $this->macros;
  123.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  124.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "userblog_body"));
  126.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  127.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "userblog_body"));
  129.         // line 14
  130.         echo "
  131. <style>
  132. \t.banner-content .me {
  133. \t\tbackground: #90acd1;
  134. \t\tpadding: 18px;
  135. \t\tdisplay: inline-block;
  136. \t\tcolor:#fff;
  137. \t\tfont-size: 16px;
  138. \t\tborder-radius: 8px;
  139. \t\tposition: relative;
  140. \t}
  141. \t
  142. \t.banner-content .me::after{
  143. \t\tcontent: '';
  144. \t\tposition: absolute;
  145. \t\tright: 0;
  146. \t\tbottom: -15px;
  147. \t\twidth: 0;
  148. \t\theight: 0;
  149. \t\tborder-left: 26px solid transparent;
  150. \t\tborder-right: 0px solid
  151. \t\ttransparent;
  152. \t\tborder-top: 24px solid#90acd1;
  153. \t}
  154. \t
  155. \t*, ::after, ::before {
  156. \t\tbox-sizing: border-box;
  157. \t}
  158. </style>
  159. \t\t
  160. ";
  161.         // line 44
  162.         if ((0 !== twig_compare((isset($context["slideaccueil"]) || array_key_exists("slideaccueil", $context) ? $context["slideaccueil"] : (function () { throw new RuntimeError('Variable "slideaccueil" does not exist.', 44, $this->source); })()), null))) {
  163.             // line 45
  164.             echo "<section id=\"download-firefox-primary-cta\" class=\"c-primary-cta download-firefox-primary-cta mzp-t-firefox\" style=\"background-image: url(";
  165.             if ((0 !== twig_compare(twig_get_attribute($this->env, $this->source, (isset($context["slideaccueil"]) || array_key_exists("slideaccueil", $context) ? $context["slideaccueil"] : (function () { throw new RuntimeError('Variable "slideaccueil" does not exist.', 45, $this->source); })()), "src", [], "any", false, false, false, 45), null))) {
  166.                 echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(twig_get_attribute($this->env, $this->source, (isset($context["slideaccueil"]) || array_key_exists("slideaccueil", $context) ? $context["slideaccueil"] : (function () { throw new RuntimeError('Variable "slideaccueil" does not exist.', 45, $this->source); })()), "getwebpath", [], "any", false, false, false, 45)), "html", null, true);
  167.             } else {
  168.                 echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templatehome/images/browser-high-res.188e4ab6d8f4.png"), "html", null, true);
  169.             }
  170.             echo ")!important;background-size:400px 278px,auto;background-position:calc(50vw + 34px) 60px,calc(50vw - 41px) -78px;background-repeat:no-repeat;\">
  171.   <div class=\"mzp-l-content\">
  172.     <div class=\"c-primary-cta-wrapper\">
  173.       <div class=\"banner-content\" style=\"margin-bottom: 20px; margin-top: -40px;\">
  174. \t  \t<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>
  175. \t  </div>
  176. \t  <h3 class=\"c-primary-cta-title\">";
  177.             // line 51
  178.             echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, (isset($context["slideaccueil"]) || array_key_exists("slideaccueil", $context) ? $context["slideaccueil"] : (function () { throw new RuntimeError('Variable "slideaccueil" does not exist.', 51, $this->source); })()), "titre", [], "any", false, false, false, 51), "html", null, true);
  179.             echo "</h3>
  180.       <h3 class=\"c-primary-cta-title-sub\"></h3>
  181.       <p class=\"c-primary-cta-desc-sub\">";
  182.             // line 53
  183.             echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, (isset($context["slideaccueil"]) || array_key_exists("slideaccueil", $context) ? $context["slideaccueil"] : (function () { throw new RuntimeError('Variable "slideaccueil" does not exist.', 53, $this->source); })()), "description", [], "any", false, false, false, 53), "html", null, true);
  184.             echo "</p>
  185.       
  186.       <div class=\"c-primary-cta-button\">
  187. \t\t<a class=\"download-link button button-green mzp-c-button mzp-t-product\" href=\"";
  188.             // line 56
  189.             echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("produit_produit_tarification_courant_product");
  190.             echo "\" 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\">
  191. \t\t  <strong class=\"download-title\">
  192. \t\t\tInvestir sur un chantier
  193. \t\t  </strong>
  194. \t\t</a><a class=\"download-link button button-green mzp-c-button mzp-t-product open-spp-modal\" href=\"";
  195.             // line 60
  196.             echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("produit_produit_tarification_souscription_donation");
  197.             echo "\" 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\">
  198. \t\t  <strong class=\"download-title\">
  199. \t\t\tFaire un don
  200. \t\t  </strong>
  201. \t\t</a>
  202.       </div>
  203.     </div>
  204.   </div>
  205. </section>
  206. ";
  207.         } else {
  208.             // line 70
  209.             echo "<style>
  210. \t.articleplay {
  211. \t\ttext-align: left;
  212. \t\tposition: relative;
  213. \t\twidth: 100%;
  214. \t\theight: 400px;
  215. \t\toverflow: hidden;
  216. \t\tbackground: white;
  217. \t\tborder-radius: 5px;
  218. \t\tcolor: #fff;
  219. \t\ttransform: translate3d(0);
  220. \t\tbox-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.03);
  221. \t\ttransition: all 0.3s ease;
  222. \t\ttop: 50%;
  223. \t\tleft: 50%;
  224. \t\ttransform: translate(-50%, -50%);
  225. \t}
  226. \t.image {
  227. \t\twidth: 100%;
  228. \t\tposition: absolute;
  229. \t\theight: 400px;
  230. \t\ttransition: 0.3s ease;
  231. \t\tbackground-image: url(";
  232.             // line 92
  233.             echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/images/bg-reseller.jpg"), "html", null, true);
  234.             echo ");
  235. \t\tbackground-size: cover;
  236. \t\tbackground-position: center center;
  237. \t}
  238. \t.image:before {
  239. \t\ttransition: all 0.3s ease;
  240. \t\tcontent: \"\";
  241. \t\tposition: absolute;
  242. \t\twidth: 100%;
  243. \t\theight: 150px;
  244. \t\tbottom: 0;
  245. \t\tbackground-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  246. \t\tborder-radius: 0 0 5px 5px;
  247. \t}
  248. \t.player-wrap {
  249. \t\theight: 280px;
  250. \t\twidth: 100%;
  251. \t\tposition: relative;
  252. \t\topacity: 0;
  253. \t\tpointer-events: none;
  254. \t\toverflow: hidden;
  255. \t}
  256. \t.player-active .player-wrap {
  257. \t\topacity: 1;
  258. \t}
  259. \t.articleplay #player {
  260. \t\twidth: 100%;
  261. \t\theight: calc(330px*16/9);
  262. \t\tposition: absolute;
  263. \t\ttop: 50%;
  264. \t\tleft: 50%;
  265. \t\ttransform: translate(-50%, -50%) scale(1.4);
  266. \t\t-webkit-filter: saturate(1);
  267. \t}
  268. \t.articleplay .nfo {
  269. \t\twidth: 100%;
  270. \t\tposition: absolute;
  271. \t\tbottom: 0;
  272. \t\tleft: 20px;
  273. \t\ttransition: all 0.3s ease;
  274. \t\theight: 92px;
  275. \t}
  276. \t.articleplay h3 {
  277. \t\tfont-size: 30px;
  278. \t\tline-hight: 0;
  279. \t\tmargin: 0;
  280. \t\tposition: relative;
  281. \t\ttransition: all 0.3s ease;
  282. \t\twhite-space: nowrap;
  283. \t}
  284. \t.articleplay h3:after {
  285. \t\tposition: absolute;
  286. \t\tcontent: \"\";
  287. \t\tbottom: 0;
  288. \t\tleft: 0;
  289. \t\twidth: 60px;
  290. \t\theight: 3px;
  291. \t\tbackground: #F15826;
  292. \t\tz-index: 100;
  293. \t\ttransition: all 0.3s ease;
  294. \t\ttransition-delay: 0s;
  295. \t}
  296. \t.articleplay p {
  297. \tcolor: #B3B7B9;
  298. \tmargin-top: 0.3em;
  299. \tposition: relative;
  300. \ttransition: all 0.3s ease;
  301. \t}
  302. \t.articleplay  .desc {
  303. \t\tbackground: #9ebb3d;
  304. \t\twidth: 100%;
  305. \t\theight: 144px;
  306. \t\tmargin-left: -20px;
  307. \t\tposition: relative;
  308. \t\tbox-sizing: border-box;
  309. \t\ttransition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  310. \t\tline-height: 1.4;
  311. \t\tfont-weight: 100;
  312. \t}
  313. \t.articleplay  .desc p {
  314. \t\tmargin: 0;
  315. \t\tpadding: 20px;
  316. \t\tpadding-top: 25px;
  317. \t\tcolor: #fff;
  318. \t\tfont-size: 15px;
  319. \t\theight: 2.8em;
  320. \t\toverflow: hidden;
  321. \t}
  322. \t.articleplay a {
  323. \t\tpadding: 10px 0px;
  324. \t\theight: 50px;
  325. \t\tbackground: #ec9204;
  326. \t\tcolor: white;
  327. \t\tdisplay: inline-block;
  328. \t\ttext-align: center;
  329. \t\tbottom: 0;
  330. \t\tposition: absolute;
  331. \t\twidth: 100%;
  332. \t\toverflow: hidden;
  333. \t\tbox-sizing: border-box;
  334. \t\tfont-weight: 400;
  335. \t\ttext-decoration: none;
  336. \t\ttransition: all 0.1s ease;
  337. \t}
  338. \t.articleplay a:hover {
  339. \t\tcolor: white;
  340. \t\t-webkit-filter: contrast(1.5);
  341. \t}
  342. \t.articleplay a:hover .maxdome-logo, .articleplay a:hover span {
  343. \ttransform: translateY(-37px);
  344. \t}
  345. \t.articleplay  a:active {
  346. \t-webkit-filter: contrast(2);
  347. \t}
  348. \t.articleplay  a:active .maxdome-logo {
  349. \ttransition: all 0.3s ease 0;
  350. \ttransform: translateY(-37px) scale(0.95);
  351. \t}
  352. \t.articleplay a .maxdome-logo, .articleplay a span {
  353. \ttransition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1) 200ms;
  354. \twidth: 100%;
  355. \tdisplay: inline-block;
  356. \tmargin-top: 6px;
  357. \t}
  358. \t.articleplay a .maxdome-logo {
  359. \twidth: 154px;
  360. \tmargin-top: 12px;
  361. \theight: 20px;
  362. \tdisplay: inline-block;
  363. \t}
  364. \t.articleplay  a .maxdome-logo:after {
  365. \tcontent: \"\";
  366. \tspeak: none;
  367. \tfont-style: normal;
  368. \tfont-weight: 400;
  369. \tfont-family: Icons;
  370. \tcolor: #fff;
  371. \tmargin-left: 0.11111rem;
  372. \t}
  373. \t.articleplay a .maxdome-logo:before {
  374. \tcontent: \"\";
  375. \tspeak: none;
  376. \tfont-style: normal;
  377. \tfont-weight: 400;
  378. \tcolor: #202831;
  379. \tfont-family: Icons;
  380. \t}
  381. \t.articleplay:hover {
  382. \tbox-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 12px 22px rgba(0, 0, 0, 0.15);
  383. \t}
  384. \t.articleplay:hover .nfo {
  385. \ttransform: translateY(-100px);
  386. \t}
  387. \t.articleplay:hover .nfo p {
  388. \topacity: 0;
  389. \t}
  390. \t.articleplay:hover .desc {
  391. \ttransform: translateY(-47px);
  392. \t}
  393. \t.articleplay:hover .desc p {
  394. \topacity: 1;
  395. \t}
  396. \t.articleplay:hover h3:after {
  397. \twidth: 390px;
  398. \ttransform: translateX(-20px);
  399. \ttransition-delay: 0.3s;
  400. \ttransition: transform 0.3s ease, width 2s ease-in;
  401. \t}
  402. \t.articleplay:hover .image {
  403. \ttransform: translateY(-60px);
  404. \t}
  405. \t.articleplay:hover.player-active h3:after {
  406. \ttransition: 0.3s ease;
  407. \twidth: 440px;
  408. \t}
  409. \t.articleplay:hover.player-active .image:before {
  410. \ttransform: translate(0);
  411. \t}
  412. \t.articleplay:hover.player-active .nfo {
  413. \ttransition: 1s ease 1.5s;
  414. \ttransform: translateY(-6px);
  415. \t}
  416. \t.articleplay:hover.player-active .nfo a {
  417. \ttransform: translateY(-94px);
  418. \ttransition: 1s ease 1.5s;
  419. \t}
  420. \t.articleplay:hover.player-active .nfo:hover {
  421. \ttransition: 0.7s ease 0s;
  422. \ttransform: translateY(-100px);
  423. \t}
  424. \t.articleplay:hover.player-active .nfo:hover a {
  425. \ttransform: translateY(0);
  426. \ttransition: 0.7s ease 0s;
  427. \t}
  428. \t.articleplay:hover.player-active .nfo:hover h3 {
  429. \ttransition: 1s ease 0s;
  430. \tcolor: white;
  431. \t}
  432. \t.articleplay:hover.player-active .nfo:hover h3 {
  433. \ttransition: 1s ease 2s;
  434. \t}
  435. \t.articleplay:hover.player-active .nfo:hover h3:after {
  436. \twidth: 440px;
  437. \ttransition: width 0.3s ease;
  438. \t}
  439. .bg-danger {
  440.   background-color: #f5365c !important;
  441. }
  442. @media (min-width: 1200px) {
  443.   
  444.   .justify-content-xl-between {
  445.     justify-content: space-between !important;
  446.   }
  447. }
  448. .pt-5 {
  449.   padding-top: 3rem !important;
  450. }
  451. .pb-8 {
  452.   padding-bottom: 8rem !important;
  453. }
  454. @media (min-width: 768px) {
  455.   .pt-md-8 {
  456.     padding-top: 8rem !important;
  457.   }
  458. }
  459. @media (min-width: 1200px) {
  460.   
  461.   .mb-xl-0 {
  462.     margin-bottom: 0 !important;
  463.   }
  464. }
  465. .font-weight-bold {
  466.   font-weight: 600 !important;
  467. }
  468. a.text-success:hover,
  469. a.text-success:focus {
  470.   color: #24a46d !important;
  471. }
  472. .text-warning {
  473.   color: #fb6340 !important;
  474. }
  475. a.text-warning:hover,
  476. a.text-warning:focus {
  477.   color: #fa3a0e !important;
  478. }
  479. .text-danger {
  480.   color: #f5365c !important;
  481. }
  482. a.text-danger:hover,
  483. a.text-danger:focus {
  484.   color: #ec0c38 !important;
  485. }
  486. .text-white {
  487.   color: #fff !important;
  488. }
  489. a.text-white:hover,
  490. a.text-white:focus {
  491.   color: #e6e6e6 !important;
  492. }
  493. .text-muted {
  494.   color: #8898aa !important;
  495. }
  496. figcaption,
  497. main {
  498.   display: block;
  499. }
  500. main {
  501.   overflow: hidden;
  502. }
  503. .bg-yellow {
  504.   background-color: #ffd600 !important;
  505. }
  506. </style>
  509. <section id=\"download-firefox-primary-cta\" class=\"c-primary-cta download-firefox-primary-cta mzp-t-firefox\" style=\"background-image: url(";
  510.             // line 367
  511.             echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/images/bg-shape-bottom-right.png"), "html", null, true);
  512.             echo "); background-size: 600px 400px,auto; background-position: top 100px right 0px; background-repeat:no-repeat;\">
  513.   <div class=\"mzp-l-content \">
  514.     <div class=\"c-primary-cta-wrapper\" style=\"max-width: 100%;\">
  515.       <div class=\"banner-content\" style=\"margin-bottom: 20px; margin-top: -40px;\">
  516. \t  \t<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>
  517. \t  </div>
  518. \t  <div class=\"row\">
  519. \t\t  <div class=\"col-md-6\">
  520. \t\t\t<h3 class=\"c-primary-cta-title\">Sur les business les plus rentables en controlant intégralement l'activité.</h3>
  521. \t\t\t<h3 class=\"c-primary-cta-title-sub\">12</h3>
  522. \t\t\t<p class=\"c-primary-cta-desc-sub\">";
  523.             // line 377
  524.             echo twig_escape_filter($this->env, (isset($context["site"]) || array_key_exists("site", $context) ? $context["site"] : (function () { throw new RuntimeError('Variable "site" does not exist.', 377, $this->source); })()), "html", null, true);
  525.             echo " 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>
  526. \t\t\t<div class=\"c-primary-cta-button\">
  527. \t\t\t  <a style=\"margin: 1px;\" class=\"download-link button button-green mzp-c-button mzp-t-product\" href=\"";
  528.             // line 379
  529.             echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("produit_produit_tarification_courant_product");
  530.             echo "\" 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\">
  531. \t\t\t\t<strong class=\"download-title\">
  532. \t\t\t\t  Investir sur un chantier
  533. \t\t\t\t</strong>
  534. \t\t\t  </a>
  535. \t\t\t  
  536. \t\t\t  <a style=\"margin: 1px;\" class=\"download-link button button-green mzp-c-button mzp-t-product\" href=\"";
  537.             // line 385
  538.             echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("produit_produit_tarification_souscription_donation");
  539.             echo "\" 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\">
  540. \t\t\t\t<strong class=\"download-title\">
  541. \t\t\t\t  Faire un don
  542. \t\t\t\t</strong>
  543. \t\t\t  </a>
  545. \t\t\t</div>
  546. \t\t  </div>
  547. \t\t  <div class=\"col-md-6\">
  548. \t\t\t
  549. \t\t\t<div class=\"articleplay\"  data-youtube-id=\"Ue_SfrHHBAc\">
  550. \t\t\t\t<div class=\"image\"></div>
  551. \t\t\t\t<div class=\"player-wrap\">
  552. \t\t\t\t  <div id=\"player\"></div>
  553. \t\t\t\t</div>
  554. \t\t\t\t<div class=\"nfo\">
  555. \t\t\t\t  
  556. \t\t\t\t  <h3>Monsters, Inc.</h3>
  557. \t\t\t\t  <p>Animation/Comedy
  558. \t\t\t\t  </p>
  559. \t\t\t\t  <div class=\"desc\">
  560. \t\t\t\t\t<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>
  561. \t\t\t\t\t<a href=\"#\" ><span>&#9658; Rent or Buy Now</span>
  562. \t\t\t\t\t  <div class=\"maxdome-logo\"></div>
  563. \t\t\t\t\t</a>
  564. \t\t\t\t  </div>
  565. \t\t\t
  566. \t\t\t\t</div>
  567. \t\t\t</div>
  569. \t\t  </div>
  570. \t  </div>
  571. \t  
  573. \t  <script type=\"text/javascript\">
  574. \t\t
  575. \t  </script>
  576.     </div>
  577.   </div>
  579.   <div>
  580. \t  <img src=\"\" alt=\"\" style=\"\">
  581.   </div>
  582. </section>
  583. ";
  584.         }
  585.         // line 430
  586.         echo "
  587. <div class=\"mzp-l-content \" style=\"border-top: 1px solid #ddd;\">
  588. \t<div class=\"header-body\">
  589. \t\t<div class=\"row\">
  590. \t\t  <div class=\"col-xl-3 col-lg-6\">
  591. \t\t\t<div class=\"card card-stats mb-4 mb-xl-0\">
  592. \t\t\t  <div class=\"card-body\">
  593. \t\t\t\t<div class=\"row\">
  594. \t\t\t\t  <div class=\"col\">
  595. \t\t\t\t\t<h5 class=\"card-title text-uppercase text-muted mb-0\">Chantiers</h5>
  596. \t\t\t\t\t<span class=\"h2 font-weight-bold mb-0\">350,897</span>
  597. \t\t\t\t  </div>
  598. \t\t\t\t  <div class=\"col-auto\">
  599. \t\t\t\t\t<div class=\"icon icon-shape bg-danger text-white rounded-circle shadow\">
  600. \t\t\t\t\t  <i class=\"fa fa-chart-bar\"></i>
  601. \t\t\t\t\t</div>
  602. \t\t\t\t  </div>
  603. \t\t\t\t</div>
  604. \t\t\t\t<p class=\"mt-3 mb-0 text-muted text-sm\">
  605. \t\t\t\t  <span class=\"text-success mr-2\"><i class=\"fa fa-arrow-up\"></i> 3.48%</span>
  606. \t\t\t\t  <span class=\"text-nowrap\">Since last month</span>
  607. \t\t\t\t</p>
  608. \t\t\t  </div>
  609. \t\t\t</div>
  610. \t\t  </div>
  611. \t\t  <div class=\"col-xl-3 col-lg-6\">
  612. \t\t\t<div class=\"card card-stats mb-4 mb-xl-0\">
  613. \t\t\t  <div class=\"card-body\">
  614. \t\t\t\t<div class=\"row\">
  615. \t\t\t\t  <div class=\"col\">
  616. \t\t\t\t\t<h5 class=\"card-title text-uppercase text-muted mb-0\">Investissement</h5>
  617. \t\t\t\t\t<span class=\"h2 font-weight-bold mb-0\">2,356</span>
  618. \t\t\t\t  </div>
  619. \t\t\t\t  <div class=\"col-auto\">
  620. \t\t\t\t\t<div class=\"icon icon-shape bg-warning text-white rounded-circle shadow\">
  621. \t\t\t\t\t  <i class=\"fa fa-chart-pie\"></i>
  622. \t\t\t\t\t</div>
  623. \t\t\t\t  </div>
  624. \t\t\t\t</div>
  625. \t\t\t\t<p class=\"mt-3 mb-0 text-muted text-sm\">
  626. \t\t\t\t  <span class=\"text-danger mr-2\"><i class=\"fa fa-arrow-down\"></i> 3.48%</span>
  627. \t\t\t\t  <span class=\"text-nowrap\">Since last week</span>
  628. \t\t\t\t</p>
  629. \t\t\t  </div>
  630. \t\t\t</div>
  631. \t\t  </div>
  632. \t\t  <div class=\"col-xl-3 col-lg-6\">
  633. \t\t\t<div class=\"card card-stats mb-4 mb-xl-0\">
  634. \t\t\t  <div class=\"card-body\">
  635. \t\t\t\t<div class=\"row\">
  636. \t\t\t\t  <div class=\"col\">
  637. \t\t\t\t\t<h5 class=\"card-title text-uppercase text-muted mb-0\">Investisseurs</h5>
  638. \t\t\t\t\t<span class=\"h2 font-weight-bold mb-0\">924</span>
  639. \t\t\t\t  </div>
  640. \t\t\t\t  <div class=\"col-auto\">
  641. \t\t\t\t\t<div class=\"icon icon-shape bg-yellow text-white rounded-circle shadow\">
  642. \t\t\t\t\t  <i class=\"fa fa-users\"></i>
  643. \t\t\t\t\t</div>
  644. \t\t\t\t  </div>
  645. \t\t\t\t</div>
  646. \t\t\t\t<p class=\"mt-3 mb-0 text-muted text-sm\">
  647. \t\t\t\t  <span class=\"text-warning mr-2\"><i class=\"fa fa-arrow-down\"></i> 1.10%</span>
  648. \t\t\t\t  <span class=\"text-nowrap\">Since yesterday</span>
  649. \t\t\t\t</p>
  650. \t\t\t  </div>
  651. \t\t\t</div>
  652. \t\t  </div>
  653. \t\t  <div class=\"col-xl-3 col-lg-6\">
  654. \t\t\t<div class=\"card card-stats mb-4 mb-xl-0\">
  655. \t\t\t  <div class=\"card-body\">
  656. \t\t\t\t<div class=\"row\">
  657. \t\t\t\t  <div class=\"col\">
  658. \t\t\t\t\t<h5 class=\"card-title text-uppercase text-muted mb-0\">Donations</h5>
  659. \t\t\t\t\t<span class=\"h2 font-weight-bold mb-0\">49,65%</span>
  660. \t\t\t\t  </div>
  661. \t\t\t\t  <div class=\"col-auto\">
  662. \t\t\t\t\t<div class=\"icon icon-shape bg-info text-white rounded-circle shadow\">
  663. \t\t\t\t\t  <i class=\"fa fa-percent\"></i>
  664. \t\t\t\t\t</div>
  665. \t\t\t\t  </div>
  666. \t\t\t\t</div>
  667. \t\t\t\t<p class=\"mt-3 mb-0 text-muted text-sm\">
  668. \t\t\t\t  <span class=\"text-success mr-2\"><i class=\"fa fa-arrow-up\"></i> 12%</span>
  669. \t\t\t\t  <span class=\"text-nowrap\">Since last month</span>
  670. \t\t\t\t</p>
  671. \t\t\t  </div>
  672. \t\t\t</div>
  673. \t\t  </div>
  674. \t\t</div>
  675. \t  </div>
  676. </div>
  681.   <section style=\"padding: 15px 0px;\">
  682. \t<div class=\"mzp-l-content\">
  683.       <div class=\"mzp-l-card-hero\">
  684. \t  ";
  685.         // line 528
  686.         $context['_parent'] = $context;
  687.         $context['_seq'] = twig_ensure_traversable((isset($context["article_presentation"]) || array_key_exists("article_presentation", $context) ? $context["article_presentation"] : (function () { throw new RuntimeError('Variable "article_presentation" does not exist.', 528, $this->source); })()));
  688.         $context['loop'] = [
  689.           'parent' => $context['_parent'],
  690.           'index0' => 0,
  691.           'index'  => 1,
  692.           'first'  => true,
  693.         ];
  694.         if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  695.             $length = count($context['_seq']);
  696.             $context['loop']['revindex0'] = $length - 1;
  697.             $context['loop']['revindex'] = $length;
  698.             $context['loop']['length'] = $length;
  699.             $context['loop']['last'] = 1 === $length;
  700.         }
  701.         foreach ($context['_seq'] as $context["_key"] => $context["article"]) {
  702.             // line 529
  703.             echo "\t\t\t";
  704.             if (twig_get_attribute($this->env, $this->source, $context["loop"], "first", [], "any", false, false, false, 529)) {
  705.                 // line 530
  706.                 echo "\t\t\t\t<section class=\"mzp-c-card mzp-c-card-large mzp-has-aspect-16-9 mzp-has-video has-video-embed\">
  707. \t\t\t\t  <a class=\"mzp-c-card-block-link\" href=\"";
  708.                 // line 531
  709.                 echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("produit_service_detail_article_central", ["id" => twig_get_attribute($this->env, $this->source, $context["article"], "id", [], "any", false, false, false, 531)]), "html", null, true);
  710.                 echo "\" data-link-name=\"Dites stop aux traqueurs publicitaires\" data-link-type=\"link\" data-link-group=\"card\" data-card-tag=\"Firefox\">
  711. \t\t\t\t\t<div class=\"mzp-c-card-media-wrapper\">
  712. \t\t\t\t\t\t<div class=\"lazy-image-container\"><img class=\"mzp-c-card-image\" src=\"";
  713.                 // line 533
  714.                 if ((0 !== twig_compare(twig_get_attribute($this->env, $this->source, $context["article"], "imgservice", [], "any", false, false, false, 533), null))) {
  715.                     echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(twig_get_attribute($this->env, $this->source, twig_get_attribute($this->env, $this->source, $context["article"], "imgservice", [], "any", false, false, false, 533), "getwebpath", [], "any", false, false, false, 533)), "html", null, true);
  716.                 } else {
  717.                     echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/images/bg-host.png"), "html", null, true);
  718.                 }
  719.                 echo "\" alt=\"\" srcset=\"";
  720.                 if ((0 !== twig_compare(twig_get_attribute($this->env, $this->source, $context["article"], "imgservice", [], "any", false, false, false, 533), null))) {
  721.                     echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(twig_get_attribute($this->env, $this->source, twig_get_attribute($this->env, $this->source, $context["article"], "imgservice", [], "any", false, false, false, 533), "getwebpath", [], "any", false, false, false, 533)), "html", null, true);
  722.                 } else {
  723.                     echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/images/bg-host.png"), "html", null, true);
  724.                 }
  725.                 echo " 2x\"/></div>
  726. \t\t\t\t\t</div>
  727. \t\t\t\t\t<div class=\"mzp-c-card-content\">
  728. \t\t\t\t\t
  729. \t\t\t\t\t  <div class=\"mzp-c-card-tag\">Firefox</div>
  730. \t\t\t\t\t
  731. \t\t\t\t\t  <h2 class=\"mzp-c-card-title\"><span>";
  732.                 // line 539
  733.                 echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["article"], "nom", [], "any", false, false, false, 539), "html", null, true);
  734.                 echo "</span></h2>
  735. \t\t\t\t\t
  736. \t\t\t\t\t  <p class=\"mzp-c-card-desc\">";
  737.                 // line 541
  738.                 echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["article"], "description", [], "any", false, false, false, 541), "html", null, true);
  739.                 echo "</p>
  740. \t\t\t\t\t</div>
  741. \t\t\t\t  </a>
  742. \t\t\t\t  
  743. \t\t\t\t  <div class=\"mzp-c-card-video-wrapper hidden\">
  744. \t\t\t\t  <figure class=\"mzp-c-card-video-content mzp-c-modal-overlay-contents\">
  745. \t\t\t\t\t  <div class=\"ytcontainer-video\">
  746. \t\t\t\t\t\t<div class=\"video-container\">
  747. \t\t\t\t\t\t  <div class=\"video-play\" data-id=\"4OKMVy859wA\"></div>
  748. \t\t\t\t\t\t</div>
  749. \t\t\t\t\t  </div>
  750. \t\t\t\t\t  <figcaption>
  751. \t\t\t\t\t\t<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=\"";
  752.                 // line 553
  753.                 echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("produit_service_detail_article_central", ["id" => twig_get_attribute($this->env, $this->source, $context["article"], "id", [], "any", false, false, false, 553)]), "html", null, true);
  754.                 echo "\">En savoir plus</a></p>
  755. \t\t\t\t\t  </figcaption>
  756. \t\t\t\t\t</figure>
  757. \t\t\t\t   </div>
  758. \t\t\t\t</section>
  759. \t\t\t";
  760.             } else {
  761.                 // line 559
  762.                 echo "\t\t\t
  763. \t\t\t";
  764.                 // line 560
  765.                 if ((0 === twig_compare(twig_get_attribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 560), 2))) {
  766.                     // line 561
  767.                     echo "\t\t\t\t<section class=\"mzp-c-card mzp-c-card-medium mzp-has-aspect-1-1  mzp-has-video has-video-embed\">
  768. \t\t\t\t  <a class=\"mzp-c-card-block-link\" href=\"";
  769.                     // line 562
  770.                     echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("produit_service_detail_article_central", ["id" => twig_get_attribute($this->env, $this->source, $context["article"], "id", [], "any", false, false, false, 562)]), "html", null, true);
  771.                     echo "\" data-link-name=\"Monitor surveille les fuites de données\" data-link-type=\"link\" data-link-group=\"card\" data-card-tag=\"Sécurité\">
  772. \t\t\t\t\t<div class=\"mzp-c-card-media-wrapper\">
  773. \t\t\t\t\t\t<div class=\"lazy-image-container\"><img class=\"mzp-c-card-image\" src=\"";
  774.                     // line 564
  775.                     if ((0 !== twig_compare(twig_get_attribute($this->env, $this->source, $context["article"], "imgservice", [], "any", false, false, false, 564), null))) {
  776.                         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(twig_get_attribute($this->env, $this->source, twig_get_attribute($this->env, $this->source, $context["article"], "imgservice", [], "any", false, false, false, 564), "getwebpath", [], "any", false, false, false, 564)), "html", null, true);
  777.                     } else {
  778.                         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/images/bg-host.png"), "html", null, true);
  779.                     }
  780.                     echo "\" alt=\"\" srcset=\"";
  781.                     if ((0 !== twig_compare(twig_get_attribute($this->env, $this->source, $context["article"], "imgservice", [], "any", false, false, false, 564), null))) {
  782.                         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(twig_get_attribute($this->env, $this->source, twig_get_attribute($this->env, $this->source, $context["article"], "imgservice", [], "any", false, false, false, 564), "getwebpath", [], "any", false, false, false, 564)), "html", null, true);
  783.                     } else {
  784.                         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/images/bg-host.png"), "html", null, true);
  785.                     }
  786.                     echo " 2x\"/></div>
  787. \t\t\t\t\t</div>
  788. \t\t\t\t\t<div class=\"mzp-c-card-content\">
  789. \t\t\t\t\t  <div class=\"mzp-c-card-tag\">Sécurité</div>
  790. \t\t\t\t\t
  791. \t\t\t\t\t  <h2 class=\"mzp-c-card-title\"><span>";
  792.                     // line 569
  793.                     echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["article"], "nom", [], "any", false, false, false, 569), "html", null, true);
  794.                     echo "</span></h2>
  795. \t\t\t\t\t
  796. \t\t\t\t\t  <p class=\"mzp-c-card-desc\">";
  797.                     // line 571
  798.                     echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["article"], "description", [], "any", false, false, false, 571), "html", null, true);
  799.                     echo "</p>
  800. \t\t\t\t\t</div>
  801. \t\t\t\t  </a>
  802. \t\t\t\t  <div class=\"mzp-c-card-video-wrapper hidden\">
  803. \t\t\t\t\t  <figure class=\"mzp-c-card-video-content mzp-c-modal-overlay-contents\">
  804. \t\t\t\t\t\t  <div class=\"ytcontainer-video\">
  805. \t\t\t\t\t\t\t<div class=\"video-container\">
  806. \t\t\t\t\t\t\t  <div class=\"video-play\" data-id=\"FawHxwNzyPM\"></div>
  807. \t\t\t\t\t\t\t</div>
  808. \t\t\t\t\t\t  </div>
  809. \t\t\t\t\t\t  <figcaption>
  810. \t\t\t\t\t\t\t<p>Visualisez les traqueurs que nous bloquons directement dans le navigateur. <a href=\"";
  811.                     // line 582
  812.                     echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("produit_service_detail_article_central", ["id" => twig_get_attribute($this->env, $this->source, $context["article"], "id", [], "any", false, false, false, 582)]), "html", null, true);
  813.                     echo "\">En savoir plus</a></p>
  814. \t\t\t\t\t\t  </figcaption>
  815. \t\t\t\t\t\t</figure>
  816. \t\t\t\t\t</div>
  817. \t\t\t\t</section>
  818. \t\t\t";
  819.                 } else {
  820.                     // line 588
  821.                     echo "\t\t\t\t<section class=\"mzp-c-card mzp-c-card-small mzp-has-aspect-16-9 mzp-has-video has-video-embed\">
  822. \t\t\t\t\t<a class=\"mzp-c-card-block-link\" href=\"";
  823.                     // line 589
  824.                     echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("produit_service_detail_article_central", ["id" => twig_get_attribute($this->env, $this->source, $context["article"], "id", [], "any", false, false, false, 589)]), "html", null, true);
  825.                     echo "\" data-link-name=\"Découvrez votre rapport de protection\" data-link-type=\"link\" data-link-group=\"card\" data-card-tag=\"Outils Firefox\">
  826. \t\t\t\t\t<div class=\"mzp-c-card-media-wrapper\">
  827. \t\t\t\t\t\t<div class=\"lazy-image-container\"><img class=\"mzp-c-card-image\" src=\"";
  828.                     // line 591
  829.                     if ((0 !== twig_compare(twig_get_attribute($this->env, $this->source, $context["article"], "imgservice", [], "any", false, false, false, 591), null))) {
  830.                         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(twig_get_attribute($this->env, $this->source, twig_get_attribute($this->env, $this->source, $context["article"], "imgservice", [], "any", false, false, false, 591), "getwebpath", [], "any", false, false, false, 591)), "html", null, true);
  831.                     } else {
  832.                         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/images/bg-host.png"), "html", null, true);
  833.                     }
  834.                     echo "\" alt=\"\" srcset=\"";
  835.                     if ((0 !== twig_compare(twig_get_attribute($this->env, $this->source, $context["article"], "imgservice", [], "any", false, false, false, 591), null))) {
  836.                         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(twig_get_attribute($this->env, $this->source, twig_get_attribute($this->env, $this->source, $context["article"], "imgservice", [], "any", false, false, false, 591), "getwebpath", [], "any", false, false, false, 591)), "html", null, true);
  837.                     } else {
  838.                         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/images/bg-host.png"), "html", null, true);
  839.                     }
  840.                     echo " 2x\"/></div>
  841. \t\t\t\t\t  
  842. \t\t\t\t\t</div>
  843. \t\t\t\t\t<div class=\"mzp-c-card-content\">
  844. \t\t\t\t\t  <div class=\"mzp-c-card-tag\">Outils Firefox</div>
  846. \t\t\t\t\t  <h2 class=\"mzp-c-card-title\"><span>";
  847.                     // line 597
  848.                     echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["article"], "nom", [], "any", false, false, false, 597), "html", null, true);
  849.                     echo "</span></h2>
  851. \t\t\t\t\t  <p class=\"mzp-c-card-desc\">";
  852.                     // line 599
  853.                     echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["article"], "description", [], "any", false, false, false, 599), "html", null, true);
  854.                     echo "</p>
  856. \t\t\t\t\t</div>
  857. \t\t\t\t\t</a>
  858. \t\t\t  
  859. \t\t\t\t\t<div class=\"mzp-c-card-video-wrapper hidden\">
  860. \t\t\t\t\t  <figure class=\"mzp-c-card-video-content mzp-c-modal-overlay-contents\">
  861. \t\t\t\t\t\t  <div class=\"ytcontainer-video\">
  862. \t\t\t\t\t\t\t<div class=\"video-container\">
  863. \t\t\t\t\t\t\t  <div class=\"video-play\" data-id=\"FawHxwNzyPM\"></div>
  864. \t\t\t\t\t\t\t</div>
  865. \t\t\t\t\t\t  </div>
  866. \t\t\t\t\t\t  <figcaption>
  867. \t\t\t\t\t\t\t<p>Visualisez les traqueurs que nous bloquons directement dans le navigateur. <a href=\"";
  868.                     // line 612
  869.                     echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("produit_service_detail_article_central", ["id" => twig_get_attribute($this->env, $this->source, $context["article"], "id", [], "any", false, false, false, 612)]), "html", null, true);
  870.                     echo "\">En savoir plus</a></p>
  871. \t\t\t\t\t\t  </figcaption>
  872. \t\t\t\t\t\t</figure>
  873. \t\t\t\t\t</div>
  874. \t\t\t\t</section>
  875. \t\t\t";
  876.                 }
  877.                 // line 618
  878.                 echo "\t\t\t";
  879.             }
  880.             // line 619
  881.             echo "\t\t";
  882.             ++$context['loop']['index0'];
  883.             ++$context['loop']['index'];
  884.             $context['loop']['first'] = false;
  885.             if (isset($context['loop']['length'])) {
  886.                 --$context['loop']['revindex0'];
  887.                 --$context['loop']['revindex'];
  888.                 $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  889.             }
  890.         }
  891.         $_parent = $context['_parent'];
  892.         unset($context['_seq'], $context['_iterated'], $context['_key'], $context['article'], $context['_parent'], $context['loop']);
  893.         $context = array_intersect_key($context, $_parent) + $_parent;
  894.         // line 620
  895.         echo "      </div>
  896.       </div>
  897.       </section>
  899. \t
  900. \t  <section style=\"margin-top: -20px;\">
  901. \t  <div style=\"width: 95%; margin: 0px auto;\">
  902. \t  <link href=\"";
  903.         // line 627
  904.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/css/tyfy.css"), "html", null, true);
  905.         echo "\" rel=\"stylesheet\"/>
  906. \t  <style>
  907. \t\tdiv.demotabs {
  908. \t\t  border: 2px dashed #e6e6e6;
  909. \t\t  border-radius: .8125rem;
  910. \t\t  box-shadow: inset 0px 0px 1.625rem rgba(0, 0, 0, 0.05);
  911. \t\t  margin-top: 1.625rem;
  912. \t\t  padding: 15px;
  913. \t\t  background: #fff;
  914. \t\t}
  915. \t\t.links-underlined a[href]{border-bottom-style:solid;border-bottom-width:2px}ol,ul{line-height:1.625rem;padding-left:2.4375rem}
  916. \t  </style>
  917. \t  
  918. \t  
  919. \t  <div class=\"demotabs\">
  920. \t\t  <div class=\"mzp-l-content\">
  921. \t\t<div class=\"links-underlined\">
  922. \t\t\t<h1>En quoi AFH Factory vous êtes utiles ?</h1>
  923. \t\t\t<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>
  924. \t\t</div>
  925. \t\t<div class=\"tabs-container\">
  926. \t\t\t<h2 class=\"tab-label\">Investisseur</h2>
  927. \t\t\t<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>
  928. \t\t\t<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>
  929. \t\t\t
  930. \t\t\t<h2 class=\"tab-label collapsed\">Porteur de projet</h2>
  931. \t\t\t<p>Facilis error corrupti dolor eaque. 
  932. \t\t\t<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>
  933. \t\t\t<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>
  934. \t\t\t
  935. \t\t\t<h2 class=\"tab-label collapsed\">Contributeurs</h2>
  936. \t\t\t<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>
  937. \t\t\t
  938. \t\t</div>
  939. \t  
  940. \t  <h2>Notes</h2>
  941. \t  <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>
  942. \t</div>
  943. \t</div>
  944. \t  
  945. \t  <script>
  946. \t\t\$(document).ready(function(){
  947.   
  948. \t\t  GoToAnchor = function(){
  949. \t\t\t// find the anchor and any tab it might be in
  950. \t\t\tselected_anchor_name = encodeURIComponent(window.location.hash.substring(1));
  951. \t\t\t\tselected_anchor = \$('a[name=\"'+selected_anchor_name+'\"], a[id=\"'+selected_anchor_name+'\"]');
  952. \t\t\tparent_tab = selected_anchor.parents('.tab-panel');
  953. \t\t\t// account for an anchor in a label
  954. \t\t\tparent_label = selected_anchor.parents('.tab-label');
  955. \t\t\tif (parent_label.length) {
  956. \t\t\t  parent_tab = parent_label.next('.tab-panel');
  957. \t\t\t}
  958. \t\t\t// do the steps of this function only if we have an anchor link and a tab panel
  959. \t\t\tif (selected_anchor.length && parent_tab.length) {
  960. \t\t\t  parent_tab_label = parent_tab.prev('.tab-label');
  961. \t\t\t\t  parent_tab_index = parent_tab_label.attr('data-tabindex');
  962. \t\t\t  parent_tab.parent().find('ul.tabs li').eq(parent_tab_index).click();
  963. \t\t\t  if (parent_tab.hasClass('collapsed')) {
  964. \t\t\t\tparent_tab.removeClass('collapsed');
  965. \t\t\t\tparent_tab_label.removeClass('collapsed');
  966. \t\t\t  }
  967. \t\t\t  // scroll to the anchor
  968. \t\t\t  var s = selected_anchor.offset().top - 50; // console.log(s);
  969. \t\t\t  \$('body,html').animate({'scrollTop':s},500,'swing');
  970. \t\t\t\t}
  971. \t\t  };
  972. \t\t  
  973. \t\t  // prepare HTML structure for each tab container
  974. \t\t  \$('.tabs-container').each(function(){
  975. \t\t\tif (!\$(this).hasClass('tabs-processed')) {
  976. \t\t\t  // find the headings that are tab labels
  977. \t\t\t  my_tablabels = \$(this).find('.tab-label');
  978. \t\t\t  // create tabs
  979. \t\t\t  if (\$(this).find('ul.tabs').length === 0) {
  980. \t\t\t\t\$(this).prepend('<ul class=\"tabs\"></ul>');
  981. \t\t\t\tvar x;
  982. \t\t\t\tfor (x=0;x<my_tablabels.length;x++) {
  983. \t\t\t\t  \$(this).find('ul.tabs').append('<li data-tabindex=\"'+x+'\">'+my_tablabels.eq(x).text()+'</li>');
  984. \t\t\t\t}
  985. \t\t\t  }
  986. \t\t\t  // structure all labels and wrap all tab panels
  987. \t\t\t  if (\$(this).find('.tab-panel').length === 0) {
  988. \t\t\t\tmy_tablabels.each(function(i){
  989. \t\t\t\t  \$(this).attr('data-tabindex',i);
  990. \t\t\t\t  \$(this).wrapInner('<a id=\"'+encodeURIComponent(\$(this).text())+'\"></a>');
  991. \t\t\t\t  kids = \$(this).nextUntil('.tab-label').wrapAll('<div class=\"tab-panel\"></div>');
  992. \t\t\t\t  // default state class for when tabs are collapsable sections
  993. \t\t\t\t  \$(this).addClass('collapsed').next('.tab-panel').addClass('collapsed');
  994. \t\t\t\t});    
  995. \t\t\t  }
  996. \t\t\t  // open initial tab
  997. \t\t\t  \$(this).find('ul.tabs li').eq(0).addClass('open');
  998. \t\t\t  my_tablabels.eq(0).addClass('open').next('.tab-panel').addClass('open');
  999. \t\t\t  // tab click events
  1000. \t\t\t  \$('.tabs-container ul.tabs li').each(function(i){
  1001. \t\t\t\t\$(this).click(function(){
  1002. \t\t\t\t  if (!\$(this).hasClass('open')) {
  1003. \t\t\t\t\t\$('.tabs-container .open').removeClass('open');
  1004. \t\t\t\t\tmy_tabindex = \$(this).attr('data-tabindex');
  1005. \t\t\t\t\t\$(this).addClass('open');
  1006. \t\t\t\t\t\$('.tabs-container .tab-label').eq(my_tabindex).addClass('open');
  1007. \t\t\t\t\t\$('.tabs-container .tab-panel').eq(my_tabindex).addClass('open');
  1008. \t\t\t\t  }
  1009. \t\t\t\t});
  1010. \t\t\t  });
  1011. \t\t\t  // collapsable header click event
  1012. \t\t\t  \$('.tabs-container .tab-label').click(function(){
  1013. \t\t\t\tif (!\$(this).hasClass('transition')) {
  1014. \t\t\t\t  kids = \$(this).next('.tab-panel');
  1015. \t\t\t\t  kids.removeClass('collapsed');
  1016. \t\t\t\t  var fullHeight = kids.outerHeight();
  1017. \t\t\t\t  \$(this).addClass('transition');
  1018. \t\t\t\t  kids.addClass('transition');
  1019. \t\t\t\t  if (\$(this).hasClass('collapsed')) {
  1020. \t\t\t\t\tkids.css({'height':'0px','padding-bottom':'0px','padding-top':'0px'}).animate({
  1021. \t\t\t\t\t  height:fullHeight+'px',
  1022. \t\t\t\t\t  paddingBottom:'32px',
  1023. \t\t\t\t\t  paddingTop:'16px',
  1024. \t\t\t\t\t},500,function(){
  1025. \t\t\t\t\t  \$('.tabs-container .transition').removeClass('collapsed').removeClass('transition').removeAttr('style');
  1026. \t\t\t\t\t});
  1027. \t\t\t\t  }
  1028. \t\t\t\t  else {
  1029. \t\t\t\t\tkids.css('height',fullHeight+'px').animate({
  1030. \t\t\t\t\t  height:'0px',
  1031. \t\t\t\t\t  paddingBottom:'0px',
  1032. \t\t\t\t\t  paddingTop:'0px',
  1033. \t\t\t\t\t},500,function(){
  1034. \t\t\t\t\t  \$('.tabs-container .transition').addClass('collapsed').removeClass('transition').removeAttr('style');
  1035. \t\t\t\t\t});
  1036. \t\t\t\t  }
  1037. \t\t\t\t}
  1038. \t\t\t  }); 
  1039. \t\t\t  // indicate state of readiness
  1040. \t\t\t  \$(this).addClass('tabs-processed');
  1041. \t\t\t}  
  1042. \t\t  });
  1043. \t\t  // if there are tabs and someone has linked to an anchor inside a tab
  1044. \t\t  console.log(window.location.hash);
  1045. \t\t  if (window.location.hash != '') {
  1046. \t\t\tGoToAnchor();
  1047. \t\t  }
  1048. \t\t  // handle case when page is already loaded
  1049. \t\t  \$(window).on('hashchange',function(){
  1050. \t\t\tGoToAnchor();
  1051. \t\t  });
  1052. \t\t});
  1053. \t  </script>
  1054. \t  </div>
  1055. \t  </section>
  1057. \t  <style>
  1058. \t\t  .articles {
  1059. \t\t\tbackground-color: white;
  1060. \t\t\tpadding: 40px;
  1061. \t\t\tdisplay: -webkit-box;
  1062. \t\t\tdisplay: -ms-flexbox;
  1063. \t\t\tdisplay: flex;
  1064. \t\t\t-webkit-box-orient: vertical;
  1065. \t\t\t-webkit-box-direction: normal;
  1066. \t\t\t\t-ms-flex-direction: column;
  1067. \t\t\t\t\tflex-direction: column;
  1068. \t\t\tmax-width: 600px;
  1069. \t\t\tposition: relative;
  1070. \t\t\tborder-radius: 10px;
  1071. \t\t\tborder: 7px dashed #ddd;
  1072. \t\t\t}
  1073. \t\t\t.articles__close {
  1074. \t\t\tdisplay: -webkit-inline-box;
  1075. \t\t\tdisplay: -ms-inline-flexbox;
  1076. \t\t\tdisplay: inline-flex;
  1077. \t\t\tposition: absolute;
  1078. \t\t\tright: 40px;
  1079. \t\t\ttop: 40px;
  1080. \t\t\tcursor: pointer;
  1081. \t\t\t}
  1082. \t\t\t.articles h1 {
  1083. \t\t\tmargin: 0px;
  1084. \t\t\tmargin-bottom: 10px;
  1085. \t\t\tfont-size: 22px;
  1086. \t\t\tcolor: #100e21;
  1087. \t\t\t}
  1088. \t\t\t.articles span {
  1089. \t\t\tcolor: #100e21;
  1090. \t\t\tmargin-bottom: 30px;
  1091. \t\t\t}
  1092. \t\t\t.articles__list {
  1093. \t\t\tpadding-left: 0px;
  1094. \t\t\tlist-style: none;
  1095. \t\t\tdisplay: -webkit-box;
  1096. \t\t\tdisplay: -ms-flexbox;
  1097. \t\t\tdisplay: flex;
  1098. \t\t\t-webkit-box-orient: vertical;
  1099. \t\t\t-webkit-box-direction: normal;
  1100. \t\t\t\t-ms-flex-direction: column;
  1101. \t\t\t\t\tflex-direction: column;
  1102. \t\t\t}
  1103. \t\t\t.articles__list > li {
  1104. \t\t\tpadding: 30px;
  1105. \t\t\tdisplay: -webkit-box;
  1106. \t\t\tdisplay: -ms-flexbox;
  1107. \t\t\tdisplay: flex;
  1108. \t\t\t-webkit-box-orient: vertical;
  1109. \t\t\t-webkit-box-direction: normal;
  1110. \t\t\t\t-ms-flex-direction: column;
  1111. \t\t\t\t\tflex-direction: column;
  1112. \t\t\tborder: 1px solid #dedee9;
  1113. \t\t\t}
  1114. \t\t\t.articles__list > li + li {
  1115. \t\t\tmargin-top: 10px;
  1116. \t\t\t}
  1117. \t\t\t.articles__list > li a {
  1118. \t\t\ttext-decoration: none;
  1119. \t\t\t}
  1120. \t\t\t.articles__list > li a h2 {
  1121. \t\t\tmargin: 0px;
  1122. \t\t\tcolor: #442fef;
  1123. \t\t\t}
  1124. \t\t\t.articles__list .list__footer {
  1125. \t\t\tpadding-left: 0px;
  1126. \t\t\tlist-style: none;
  1127. \t\t\tdisplay: -webkit-box;
  1128. \t\t\tdisplay: -ms-flexbox;
  1129. \t\t\tdisplay: flex;
  1130. \t\t\tmargin-top: 20px;
  1131. \t\t\t}
  1132. \t\t\t.articles__list .list__footer li {
  1133. \t\t\tdisplay: -webkit-box;
  1134. \t\t\tdisplay: -ms-flexbox;
  1135. \t\t\tdisplay: flex;
  1136. \t\t\t-webkit-box-align: center;
  1137. \t\t\t\t-ms-flex-align: center;
  1138. \t\t\t\t\talign-items: center;
  1139. \t\t\t}
  1140. \t\t\t.articles__list .list__footer li span {
  1141. \t\t\tmargin-bottom: 0px;
  1142. \t\t\tmargin-left: 5px;
  1143. \t\t\tline-height: 17px;
  1144. \t\t\tcolor: #100e21;
  1145. \t\t\tfont-size: 14px;
  1146. \t\t\tfont-weight: 700;
  1147. \t\t\t}
  1148. \t\t\t.articles__list .list__footer li + li {
  1149. \t\t\tmargin-left: 30px;
  1150. \t\t\t}
  1151. \t\t\t.articles__list .list__footer li i {
  1152. \t\t\tfont-size: 26px;
  1153. \t\t\t}
  1154. \t\t\t@import \"https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700\";
  1155. *, *:before, *:after {
  1156.   box-sizing: border-box;
  1157.   -webkit-box-sizing: border-box;
  1158.   -moz-box-sizing: border-box;
  1159. }
  1160. body, html {
  1161.   height: 100%;
  1162. }
  1163. body {
  1164.   background: #f9f9f9;
  1165.   background-size: cover;
  1166.   margin: 0;
  1167.   padding: 0;
  1168.   font-family: helvetica, arial, tahoma, verdana;
  1169.   line-height: 20px;
  1170.   font-size: 14px;
  1171.   color: #726f77;
  1172. }
  1173. img {
  1174.   max-width: 100%;
  1175. }
  1176. a {
  1177.   text-decoration: none;
  1178. }
  1179. h1, h2, h3, h4 {
  1180.   font-family: \"Dosis\", arial, tahoma, verdana;
  1181.   font-weight: 500;
  1182. }
  1183. .project-name {
  1184.   text-align: center;
  1185.   padding: 10px 0;
  1186. }
  1187. .success {
  1188.   background: #78AD42 !important;
  1189. }
  1190. .timeline-container {
  1191.   max-width: 1000px;
  1192.   margin: 0 auto;
  1193. }
  1194. #timeline .timeline-item:after, #timeline .timeline-item:before {
  1195.   content: '';
  1196.   display: block;
  1197.   width: 100%;
  1198.   clear: both;
  1199. }
  1200. #timeline {
  1201.   width: 100%;
  1202.   margin: 0px auto;
  1203.   position: relative;
  1204.   padding: 0 20px;
  1205.   -webkit-transition: all 0.4s ease;
  1206.   -moz-transition: all 0.4s ease;
  1207.   -ms-transition: all 0.4s ease;
  1208.   transition: all 0.4s ease;
  1209. }
  1210. #timeline:before {
  1211.   content: \"\";
  1212.   width: 3px;
  1213.   height: 100%;
  1214.   background: #1C71A4;
  1215.   left: 50%;
  1216.   top: 0;
  1217.   position: absolute;
  1218. }
  1219. #timeline:after {
  1220.   content: \"\";
  1221.   clear: both;
  1222.   display: table;
  1223.   width: 100%;
  1224. }
  1225. #timeline .timeline-item {
  1226.   margin-bottom: 50px;
  1227.   position: relative;
  1228. }
  1229. #timeline .timeline-item .timeline-icon {
  1230.   background: #1C71A4;
  1231.   width: 50px;
  1232.   height: 50px;
  1233.   position: absolute;
  1234.   top: 0;
  1235.   left: 50%;
  1236.   overflow: hidden;
  1237.   margin-left: -23px;
  1238.   -webkit-border-radius: 50%;
  1239.   -moz-border-radius: 50%;
  1240.   -ms-border-radius: 50%;
  1241.   border-radius: 50%;
  1242. }
  1243. #timeline .timeline-item .timeline-icon svg, #timeline .timeline-item .timeline-icon .fa {
  1244.   position: relative;
  1245.   top: 13px;
  1246.   left: 14px;
  1247.   font-size: 24px;
  1248.   color: #fff;
  1249. }
  1250. #timeline .timeline-item .timeline-content {
  1251.   width: 45%;
  1252.   background: #fff;
  1253.   padding: 20px;
  1254.   -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  1255.   -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  1256.   -ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  1257.   box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  1258.   -webkit-border-radius: 5px;
  1259.   -moz-border-radius: 5px;
  1260.   -ms-border-radius: 5px;
  1261.   border-radius: 5px;
  1262.   -webkit-transition: all 0.3s ease;
  1263.   -moz-transition: all 0.3s ease;
  1264.   -ms-transition: all 0.3s ease;
  1265.   transition: all 0.3s ease;
  1266. }
  1267. #timeline .timeline-item .timeline-content h2 {
  1268.   padding: 15px;
  1269.   background: #1C71A4;
  1270.   color: #fff;
  1271.   margin: -20px -20px 0 -20px;
  1272.   font-weight: 300;
  1273.   -webkit-border-radius: 3px 3px 0 0;
  1274.   -moz-border-radius: 3px 3px 0 0;
  1275.   -ms-border-radius: 3px 3px 0 0;
  1276.   border-radius: 3px 3px 0 0;
  1277.   font-size: 22px;
  1278. }
  1279. #timeline .timeline-item .timeline-content p {
  1280.   padding-top: 10px;
  1281.   padding-bottom: 10px;
  1282. }
  1283. #timeline .timeline-item .timeline-content:before {
  1284.   content: '';
  1285.   position: absolute;
  1286.   left: 45%;
  1287.   top: 20px;
  1288.   width: 0;
  1289.   height: 0;
  1290.   border-top: 7px solid transparent;
  1291.   border-bottom: 7px solid transparent;
  1292.   border-left: 7px solid #1C71A4;
  1293. }
  1294. #timeline .timeline-item .timeline-content.right {
  1295.   float: right;
  1296. }
  1297. #timeline .timeline-item .timeline-content.right:before {
  1298.   content: '';
  1299.   right: 45%;
  1300.   left: inherit;
  1301.   border-left: 0;
  1302.   border-right: 7px solid #1C71A4;
  1303. }
  1304.   #timeline {
  1305.     margin: 0px;
  1306.     padding: 0px;
  1307.     width: 100%;
  1308.   }
  1309.   #timeline:before {
  1310.     left: 0;
  1311.   }
  1312.   #timeline .timeline-item .timeline-content {
  1313.     width: 90%;
  1314.     float: right;
  1315.   }
  1316.   #timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
  1317.     left: 10%;
  1318.     margin-left: -6px;
  1319.     border-left: 0;
  1320.     border-right: 7px solid #1C71A4;
  1321.   }
  1322.   #timeline .timeline-item .timeline-icon {
  1323.     left: 0;
  1324.   }
  1325. /* Animation CSS */
  1326. /* icon animation */
  1327. .timeline-icon.is-hidden {
  1328.   visibility: hidden;
  1329. }
  1330. .timeline-icon.animate-it {
  1331.   visibility: visible;
  1332.    -webkit-animation: bounce-1 0.6s;
  1333.    -moz-animation: bounce-1 0.6s;
  1334.     animation: bounce-1 0.6s;
  1335. }
  1336. /* content block animation */
  1337. .timeline-content.is-hidden {
  1338.   visibility: hidden;
  1339. }
  1340. .timeline-content.animate-it {
  1341.   visibility: visible;
  1342.    -webkit-animation: bounce-2 0.6s;
  1343.    -moz-animation: bounce-2 0.6s;
  1344.     animation: bounce-2 0.6s;
  1345.   }
  1346. @media only screen and (min-width: 769px) {
  1347.   /* Inverse bounce effect on even content blocks */
  1348. .timeline-content.right.animate-it {
  1349.     -webkit-animation: bounce-2-inverse 0.6s;
  1350.     -moz-animation: bounce-2-inverse 0.6s;
  1351.     animation: bounce-2-inverse 0.6s;
  1352.   }
  1353. }
  1354. @media only screen and (max-width: 768px) {
  1355.   /* Inverse bounce effect on all content blocks */
  1356. .timeline-content.animate-it, .timeline-content.right.animate-it {
  1357.     -webkit-animation: bounce-2-inverse 0.6s;
  1358.     -moz-animation: bounce-2-inverse 0.6s;
  1359.     animation: bounce-2-inverse 0.6s;
  1360.   }
  1361. }
  1362. /* ALL animation types called */
  1363. @-webkit-keyframes bounce-1 {
  1364.   0% {
  1365.     opacity: 0;
  1366.     -webkit-transform: scale(0.5);
  1367.   }
  1368.   60% {
  1369.     opacity: 1;
  1370.     -webkit-transform: scale(1.2);
  1371.   }
  1372.   100% {
  1373.     -webkit-transform: scale(1);
  1374.   }
  1375. }
  1376. @-moz-keyframes bounce-1 {
  1377.   0% {
  1378.     opacity: 0;
  1379.     -moz-transform: scale(0.5);
  1380.   }
  1381.   60% {
  1382.     opacity: 1;
  1383.     -moz-transform: scale(1.2);
  1384.   }
  1385.   100% {
  1386.     -moz-transform: scale(1);
  1387.   }
  1388. }
  1389. @keyframes bounce-1 {
  1390.   0% {
  1391.     opacity: 0;
  1392.     -webkit-transform: scale(0.5);
  1393.     -moz-transform: scale(0.5);
  1394.     -ms-transform: scale(0.5);
  1395.     -o-transform: scale(0.5);
  1396.     transform: scale(0.5);
  1397.   }
  1398.   60% {
  1399.     opacity: 1;
  1400.     -webkit-transform: scale(1.2);
  1401.     -moz-transform: scale(1.2);
  1402.     -ms-transform: scale(1.2);
  1403.     -o-transform: scale(1.2);
  1404.     transform: scale(1.2);
  1405.   }
  1406.   100% {
  1407.     -webkit-transform: scale(1);
  1408.     -moz-transform: scale(1);
  1409.     -ms-transform: scale(1);
  1410.     -o-transform: scale(1);
  1411.     transform: scale(1);
  1412.   }
  1413. }
  1414. @-webkit-keyframes bounce-2 {
  1415.   0% {
  1416.     opacity: 0;
  1417.     -webkit-transform: translateX(-100px);
  1418.   }
  1419.   60% {
  1420.     opacity: 1;
  1421.     -webkit-transform: translateX(20px);
  1422.   }
  1423.   100% {
  1424.     -webkit-transform: translateX(0);
  1425.   }
  1426. }
  1427. @-moz-keyframes bounce-2 {
  1428.   0% {
  1429.     opacity: 0;
  1430.     -moz-transform: translateX(-100px);
  1431.   }
  1432.   60% {
  1433.     opacity: 1;
  1434.     -moz-transform: translateX(20px);
  1435.   }
  1436.   100% {
  1437.     -moz-transform: translateX(0);
  1438.   }
  1439. }
  1440. @keyframes bounce-2 {
  1441.   0% {
  1442.     opacity: 0;
  1443.     -webkit-transform: translateX(-100px);
  1444.     -moz-transform: translateX(-100px);
  1445.     -ms-transform: translateX(-100px);
  1446.     -o-transform: translateX(-100px);
  1447.     transform: translateX(-100px);
  1448.   }
  1449.   60% {
  1450.     opacity: 1;
  1451.     -webkit-transform: translateX(20px);
  1452.     -moz-transform: translateX(20px);
  1453.     -ms-transform: translateX(20px);
  1454.     -o-transform: translateX(20px);
  1455.     transform: translateX(20px);
  1456.   }
  1457.   100% {
  1458.     -webkit-transform: translateX(0);
  1459.     -moz-transform: translateX(0);
  1460.     -ms-transform: translateX(0);
  1461.     -o-transform: translateX(0);
  1462.     transform: translateX(0);
  1463.   }
  1464. }
  1465. @-webkit-keyframes bounce-2-inverse {
  1466.   0% {
  1467.     opacity: 0;
  1468.     -webkit-transform: translateX(100px);
  1469.   }
  1470.   60% {
  1471.     opacity: 1;
  1472.     -webkit-transform: translateX(-20px);
  1473.   }
  1474.   100% {
  1475.     -webkit-transform: translateX(0);
  1476.   }
  1477. }
  1478. @-moz-keyframes bounce-2-inverse {
  1479.   0% {
  1480.     opacity: 0;
  1481.     -moz-transform: translateX(100px);
  1482.   }
  1483.   60% {
  1484.     opacity: 1;
  1485.     -moz-transform: translateX(-20px);
  1486.   }
  1487.   100% {
  1488.     -moz-transform: translateX(0);
  1489.   }f
  1490. }
  1491. @keyframes bounce-2-inverse {
  1492.   0% {
  1493.     opacity: 0;
  1494.     -webkit-transform: translateX(100px);
  1495.     -moz-transform: translateX(100px);
  1496.     -ms-transform: translateX(100px);
  1497.     -o-transform: translateX(100px);
  1498.     transform: translateX(100px);
  1499.   }
  1500.   60% {
  1501.     opacity: 1;
  1502.     -webkit-transform: translateX(-20px);
  1503.     -moz-transform: translateX(-20px);
  1504.     -ms-transform: translateX(-20px);
  1505.     -o-transform: translateX(-20px);
  1506.     transform: translateX(-20px);
  1507.   }
  1508.   100% {
  1509.     -webkit-transform: translateX(0);
  1510.     -moz-transform: translateX(0);
  1511.     -ms-transform: translateX(0);
  1512.     -o-transform: translateX(0);
  1513.     transform: translateX(0);
  1514.   }
  1515. }
  1519. \t  </style>
  1522. \t<section style=\"padding: 25px 0px;\">
  1524. \t\t<div class=\"mzp-l-content\">
  1525. \t\t\t<div class=\"row\">
  1526. \t\t\t\t<div class=\"col-md-7\">
  1528. \t\t\t\t\t";
  1529.         // line 1250
  1530.         $context['_parent'] = $context;
  1531.         $context['_seq'] = twig_ensure_traversable(twig_slice($this->env, (isset($context["liste_categorie"]) || array_key_exists("liste_categorie", $context) ? $context["liste_categorie"] : (function () { throw new RuntimeError('Variable "liste_categorie" does not exist.', 1250, $this->source); })()), 0, 2));
  1532.         foreach ($context['_seq'] as $context["_key"] => $context["cat"]) {
  1533.             // line 1251
  1534.             echo "\t\t\t\t\t<h5 class=\"mzp-c-footer-heading\" style=\"font-weight: 700;\">
  1535. \t\t\t\t\t\t";
  1536.             // line 1252
  1537.             echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["cat"], "nom", [], "any", false, false, false, 1252), "html", null, true);
  1538.             echo "
  1539. \t\t\t\t\t</h5>
  1540. \t\t\t\t\t<div class=\"row grid\">
  1541. \t\t\t\t\t\t";
  1542.             // line 1255
  1543.             $context["liste_scat"] = twig_get_attribute($this->env, $this->source, $context["cat"], "getListeScat", [], "any", false, false, false, 1255);
  1544.             // line 1256
  1545.             echo "\t\t\t\t\t\t";
  1546.             $context['_parent'] = $context;
  1547.             $context['_seq'] = twig_ensure_traversable(twig_slice($this->env, (isset($context["liste_scat"]) || array_key_exists("liste_scat", $context) ? $context["liste_scat"] : (function () { throw new RuntimeError('Variable "liste_scat" does not exist.', 1256, $this->source); })()), 0, 2));
  1548.             foreach ($context['_seq'] as $context["_key"] => $context["scat"]) {
  1549.                 // line 1257
  1550.                 echo "\t\t\t\t\t\t<div class=\"col-md-6\">
  1551. \t\t\t\t\t\t\t<div class=\"cardcode image-cardcode\">
  1552. \t\t\t\t\t\t\t\t<a href=\"";
  1553.                 // line 1259
  1554.                 echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("produit_produit_listes_produit_user", ["id" => twig_get_attribute($this->env, $this->source, $context["scat"], "id", [], "any", false, false, false, 1259)]), "html", null, true);
  1555.                 echo "\" class=\"img\" style=\"height: 138.344px;\"><span style=\"background: url('";
  1556.                 if ((0 !== twig_compare(twig_get_attribute($this->env, $this->source, $context["scat"], "src", [], "any", false, false, false, 1259), null))) {
  1557.                     echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(twig_get_attribute($this->env, $this->source, $context["scat"], "getWebpath", [], "any", false, false, false, 1259)), "html", null, true);
  1558.                 } else {
  1559.                     echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/images/3plan.png"), "html", null, true);
  1560.                 }
  1561.                 echo "')\"></span></a>
  1562. \t\t\t\t\t\t\t\t<a href=\"";
  1563.                 // line 1260
  1564.                 echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("produit_produit_listes_produit_user", ["id" => twig_get_attribute($this->env, $this->source, $context["scat"], "id", [], "any", false, false, false, 1260)]), "html", null, true);
  1565.                 echo "\" class=\"title\"><h2> ";
  1566.                 echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["scat"], "description", [], "any", false, false, false, 1260), "html", null, true);
  1567.                 echo " </h2></a>
  1568. \t\t
  1569. \t\t\t\t\t\t\t\t<div class=\"infos\">
  1570. \t\t\t\t\t\t\t\t\t<span><a href=\"";
  1571.                 // line 1263
  1572.                 echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("produit_produit_listes_produit_user", ["id" => twig_get_attribute($this->env, $this->source, $context["scat"], "id", [], "any", false, false, false, 1263)]), "html", null, true);
  1573.                 echo "\"> ";
  1574.                 echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["scat"], "nom", [], "any", false, false, false, 1263), "html", null, true);
  1575.                 echo "</a></span>
  1576. \t\t\t\t\t\t\t\t\t<span class=\"stats\">
  1577. \t\t\t\t\t\t\t\t\t\t<span><i class=\"fa fa-eye\"></i>661</span>
  1578. \t\t\t\t\t\t\t\t\t\t<span><i class=\"fa fa-comment\"></i>0</span>
  1579. \t\t\t\t\t\t\t\t\t</span>
  1580. \t\t\t\t\t\t\t\t</div>
  1581. \t\t\t\t\t\t\t</div>
  1582. \t\t\t\t\t\t</div>
  1583. \t\t\t\t\t\t";
  1584.             }
  1585.             $_parent = $context['_parent'];
  1586.             unset($context['_seq'], $context['_iterated'], $context['_key'], $context['scat'], $context['_parent'], $context['loop']);
  1587.             $context = array_intersect_key($context, $_parent) + $_parent;
  1588.             // line 1272
  1589.             echo "\t\t\t\t\t</div> <!-- End Row -->
  1590. \t\t\t\t\t";
  1591.         }
  1592.         $_parent = $context['_parent'];
  1593.         unset($context['_seq'], $context['_iterated'], $context['_key'], $context['cat'], $context['_parent'], $context['loop']);
  1594.         $context = array_intersect_key($context, $_parent) + $_parent;
  1595.         // line 1274
  1596.         echo "
  1597. \t\t\t\t</div>
  1599. \t\t\t\t<div class=\"col-md-5\">
  1600. \t\t\t\t\t
  1601. \t\t\t\t\t<div id=\"timeline\">
  1603. \t\t\t\t\t\t<div class=\"timeline-item\">
  1604. \t\t\t\t\t\t  <div class=\"timeline-icon\">
  1605. \t\t\t\t\t\t\t<i class=\"fa fa-envelope-o\" aria-hidden=\"true\"></i>
  1606. \t\t\t\t\t\t  </div>
  1607. \t\t\t\t\t\t  <div class=\"timeline-content\">
  1608. \t\t\t\t\t\t\t<h2>Notre vision</h2>
  1609. \t\t\t\t\t\t\t<p>
  1610. \t\t\t\t\t\t\t  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
  1611. \t\t\t\t\t\t\t  Atque, facilis quo maiores magnam modi ab libero praesentium blanditiis.
  1612. \t\t\t\t\t\t\t</p>
  1613. \t\t\t\t\t\t\t<span class=\"time-stamp\">Thu Jan - 26 - 2017 01:54</span>
  1614. \t\t\t\t\t\t  </div>
  1615. \t\t\t\t\t\t</div>
  1616. \t\t\t\t  
  1617. \t\t\t\t\t\t<div class=\"timeline-item\">
  1618. \t\t\t\t\t\t  <div class=\"timeline-icon\">
  1619. \t\t\t\t\t\t\t<i class=\"fa fa-envelope-open-o\" aria-hidden=\"true\"></i>
  1620. \t\t\t\t\t\t  </div>
  1621. \t\t\t\t\t\t  <div class=\"timeline-content right\">
  1622. \t\t\t\t\t\t\t<h2>Notre Missions</h2>
  1623. \t\t\t\t\t\t\t<p>
  1624. \t\t\t\t\t\t\t  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, facilis quo. Maiores magnam modi ab libero praesentium blanditiis consequatur aspernatur.
  1625. \t\t\t\t\t\t\t</p>
  1626. \t\t\t\t\t\t\t<span class=\"time-stamp\">Thu Jan - 26 - 2017 01:54</span>
  1627. \t\t\t\t\t\t  </div>
  1628. \t\t\t\t\t\t</div>
  1629. \t\t\t\t  
  1630. \t\t\t\t\t\t<div class=\"timeline-item\">
  1631. \t\t\t\t\t\t  <div class=\"timeline-icon success\">
  1632. \t\t\t\t\t\t\t<i class=\"fa fa-star\" aria-hidden=\"true\"></i>
  1633. \t\t\t\t\t\t  </div>
  1634. \t\t\t\t\t\t  <div class=\"timeline-content\">
  1635. \t\t\t\t\t\t\t<h2>Nos Valeurs</h2>
  1636. \t\t\t\t\t\t\t<p>
  1637. \t\t\t\t\t\t\t  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.
  1638. \t\t\t\t\t\t\t</p>
  1639. \t\t\t\t\t\t\t <span class=\"time-stamp\">Thu Jan - 26 - 2017 01:54</span>
  1640. \t\t\t\t\t\t  </div>
  1641. \t\t\t\t\t\t</div>
  1642. \t\t\t\t  
  1643. \t\t\t\t  
  1644. \t\t\t\t\t</div>
  1646. \t\t\t\t</div>
  1647. \t\t\t</div>
  1648. \t\t</div>
  1650. \t\t<script type=\"text/javascript\">
  1651. \t\t\t\$(function() {
  1652. \t\t\t\tvar timelineBlocks = \$('.timeline-item'),
  1653. \t\t\t\t\toffset = 0.8;
  1654. \t\t\t\t//hide timeline blocks which are outside the viewport
  1655. \t\t\t\thideBlocks(timelineBlocks, offset);
  1656. \t\t\t\t//on scolling, show/animate timeline blocks when entering the viewport
  1657. \t\t\t\t\$(window).on('scroll', function(){
  1658. \t\t\t\t\t(!window.requestAnimationFrame) 
  1659. \t\t\t\t\t\t? setTimeout(function(){ showBlocks(timelineBlocks, offset); }, 100)
  1660. \t\t\t\t\t\t: window.requestAnimationFrame(function(){ showBlocks(timelineBlocks, offset); });
  1661. \t\t\t\t});
  1662. \t\t\t\tfunction hideBlocks(blocks, offset) {
  1663. \t\t\t\t\tblocks.each(function(){
  1664. \t\t\t\t\t\t(\$(this).offset().top > \$(window).scrollTop() + \$(window).height() * offset) && \$(this).find('.timeline-icon, .timeline-content').addClass('is-hidden');
  1665. \t\t\t\t\t});
  1666. \t\t\t\t}
  1667. \t\t\t\tfunction showBlocks(blocks, offset) {
  1668. \t\t\t\t\tblocks.each(function(){
  1669. \t\t\t\t\t\t(\$(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');
  1670. \t\t\t\t\t});
  1671. \t\t\t\t}
  1672. \t\t\t});
  1673. \t\t</script>
  1674. \t  </section>
  1676. <style>
  1677. .news-section {
  1678.   padding: 0px 0;
  1679. }
  1680. .news-content {
  1681.     padding: 40px 30px;
  1682. }
  1683. .news-item {
  1684.     box-shadow: 0 0 15px #ededed;
  1685.     -webkit-transition: .5s;
  1686.     -o-transition: .5s;
  1687.     transition: .5s;
  1688.     margin-bottom: 40px;
  1689. }
  1690. .news-item:hover {
  1691.     -webkit-transform: translateY(-10px);
  1692.     -ms-transform: translateY(-10px);
  1693.     transform: translateY(-10px);
  1694.     -webkit-box-shadow: 0px 15px 15px 0px #edeaea;
  1695.     box-shadow: 0px 15px 15px 0px #edeaea;
  1696. }
  1697. .newsimg img {
  1698.     width: 100%;
  1699. }
  1700. .news_postdate {
  1701.     color: #FF3A46;
  1702. }
  1703. .news-content h3 {
  1704.     color: #233D63;
  1705.     font-size: 22px;
  1706.     margin-bottom: 25px;
  1707. }
  1708. .news_authorinfo {
  1709.     border: transparent;
  1710.     padding: 14px 0px 0px 0px;
  1711.     background: transparent;
  1712.     font-size: 14px;
  1713. }
  1714. .news_authorinfo i {
  1715.     margin-right: 6px;
  1716. }
  1717. .news_authorinfo span:last-child {
  1718.     float: right;
  1719. }
  1720. .news_authorinfo a {
  1721.     color: #666;
  1722. }
  1723. .center .news-content {
  1724.     background: linear-gradient(-120deg, #8758ff 0, #614ef9 100%);
  1725. }
  1726. .center .news-content h3,
  1727. .center .news-content p {
  1728.     color: #fff;
  1729. }
  1730. .center .news_authorinfo a,
  1731. .center .news_authorinfo i {
  1732.     color: #fff;
  1733. }
  1734. .news-slide.owl-carousel .col-lg-3 {
  1735.     max-width: 100%;
  1736.     padding: 0;
  1737. }
  1738. .news-section .owl-theme .owl-nav [class*=\"owl-\"] {
  1739.     color: #333;
  1740.     font-size: 14px;
  1741.     margin: 5px;
  1742.     padding: 4px 7px;
  1743.     background: #fff;
  1744.     display: inline-block;
  1745.     cursor: pointer;
  1746.     border-radius: 3px;
  1747.     border: 1px solid #ddd;
  1748. }
  1749. .small-title {
  1750.   font-size: 20px;
  1751.   text-transform: capitalize;
  1752.   color: #FF3A46;
  1753.   margin-bottom: 10px;
  1754.   margin-top: 0px;
  1755.   font-weight: 600;
  1756. }
  1757. .big-title {
  1758.     letter-spacing: 0px;
  1759.     padding-bottom: 13px;
  1760.     position: relative;
  1761.     color: #233D63;
  1762.     line-height: 50px;
  1763.     font-size: 36px;
  1764.     text-transform: capitalize;
  1765.     font-weight: 600;
  1766. }
  1767. .main-title-box {
  1768.     margin-bottom: 60px;
  1769. }
  1770. \t  </style>
  1771. \t  
  1772. \t  
  1773. <section class=\"news-section\">
  1775. \t\t<div class=\"mzp-l-content blog\" id=\"blog\">
  1776. \t\t\t\t<div class=\"text-left\">
  1777. \t\t\t\t\t<h3>
  1778. \t\t\t\t\t\tNos programmes
  1779. \t\t\t\t\t</h3>
  1780. \t\t\t\t\t
  1781. \t\t\t\t\t<div>
  1782. \t\t\t\t\t\tLa transparence 
  1783. \t\t\t\t\t</div>
  1784. \t\t\t\t</div>
  1786. \t\t\t\t   <div class=\"row posts-list\">
  1788. \t\t\t  
  1789. \t\t\t\t\t   <!--Single Blog Start-->
  1790. \t\t\t\t\t   <div class=\"col-lg-4 col-md-4 wow fadeInUp\" data-wow-delay=\"0ms\">
  1792. \t\t\t\t\t\t<article>
  1793. \t\t\t\t\t\t\t<div class=\"post-img\">
  1794. \t\t\t\t\t\t\t\t<img src=\"https://i.ibb.co/m5yGbdR/blog2.jpg\" alt=\"\" class=\"img-fluid\">
  1795. \t\t\t\t\t\t\t</div>
  1796. \t\t\t\t\t\t\t<p class=\"post-category\">Commandez un  Hébergement pro.</p>
  1797. \t\t\t\t\t\t\t<h2 class=\"title\">
  1798. \t\t\t\t\t\t\t\t<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>
  1799. \t\t\t\t\t\t\t</h2>
  1800. \t\t\t\t
  1801. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center\">
  1802. \t\t\t\t\t\t\t\t<img src=\"/template/images/co.png\" alt=\"\" class=\"img-fluid post-author-img flex-shrink-0\">
  1803. \t\t\t\t\t\t\t\t<div class=\"post-meta\">
  1804. \t\t\t\t\t\t\t\t<div class=\"post-author-list\">Kenfack Noel</div>
  1805. \t\t\t\t\t\t\t\t<div class=\"post-date\">
  1806. \t\t\t\t\t\t\t\t\t<time datetime=\"2022-01-01\">01 Feb 2024</time>
  1807. \t\t\t\t\t\t\t\t</div>
  1808. \t\t\t\t\t\t\t\t</div>
  1809. \t\t\t\t\t\t\t</div>
  1810. \t\t\t\t\t\t</article>
  1812. \t\t\t\t\t   </div>
  1813. \t\t\t\t\t   <!--Single Blog End-->
  1814. \t\t\t\t\t   <!--Single Blog Start-->
  1815. \t\t\t\t\t   <div class=\"col-lg-4 col-md-4 wow fadeInUp\" data-wow-delay=\"0ms\">
  1817. \t\t\t\t\t\t<article>
  1818. \t\t\t\t\t\t\t<div class=\"post-img\">
  1819. \t\t\t\t\t\t\t\t<img src=\"https://i.ibb.co/m5yGbdR/blog2.jpg\" alt=\"\" class=\"img-fluid\">
  1820. \t\t\t\t\t\t\t</div>
  1821. \t\t\t\t\t\t\t<p class=\"post-category\">Commandez un  Hébergement pro.</p>
  1822. \t\t\t\t\t\t\t<h2 class=\"title\">
  1823. \t\t\t\t\t\t\t\t<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>
  1824. \t\t\t\t\t\t\t</h2>
  1825. \t\t\t\t
  1826. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center\">
  1827. \t\t\t\t\t\t\t\t<img src=\"/template/images/co.png\" alt=\"\" class=\"img-fluid post-author-img flex-shrink-0\">
  1828. \t\t\t\t\t\t\t\t<div class=\"post-meta\">
  1829. \t\t\t\t\t\t\t\t<div class=\"post-author-list\">Kenfack Noel</div>
  1830. \t\t\t\t\t\t\t\t<div class=\"post-date\">
  1831. \t\t\t\t\t\t\t\t\t<time datetime=\"2022-01-01\">01 Feb 2024</time>
  1832. \t\t\t\t\t\t\t\t</div>
  1833. \t\t\t\t\t\t\t\t</div>
  1834. \t\t\t\t\t\t\t</div>
  1835. \t\t\t\t\t\t</article>
  1837. \t\t\t\t\t   </div>
  1838. \t\t\t\t\t   <!--Single Blog Start-->
  1839. \t\t\t\t\t   <!--Single Blog Start-->
  1840. \t\t\t\t\t   <div class=\"col-lg-4 col-md-4 wow fadeInUp\" data-wow-delay=\"0ms\">
  1842. \t\t\t\t\t\t<article>
  1843. \t\t\t\t\t\t\t<div class=\"post-img\">
  1844. \t\t\t\t\t\t\t\t<img src=\"https://i.ibb.co/m5yGbdR/blog2.jpg\" alt=\"\" class=\"img-fluid\">
  1845. \t\t\t\t\t\t\t</div>
  1846. \t\t\t\t\t\t\t<p class=\"post-category\">Commandez un  Hébergement pro.</p>
  1847. \t\t\t\t\t\t\t<h2 class=\"title\">
  1848. \t\t\t\t\t\t\t\t<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>
  1849. \t\t\t\t\t\t\t</h2>
  1850. \t\t\t\t
  1851. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center\">
  1852. \t\t\t\t\t\t\t\t<img src=\"/template/images/co.png\" alt=\"\" class=\"img-fluid post-author-img flex-shrink-0\">
  1853. \t\t\t\t\t\t\t\t<div class=\"post-meta\">
  1854. \t\t\t\t\t\t\t\t<div class=\"post-author-list\">Kenfack Noel</div>
  1855. \t\t\t\t\t\t\t\t<div class=\"post-date\">
  1856. \t\t\t\t\t\t\t\t\t<time datetime=\"2022-01-01\">01 Feb 2024</time>
  1857. \t\t\t\t\t\t\t\t</div>
  1858. \t\t\t\t\t\t\t\t</div>
  1859. \t\t\t\t\t\t\t</div>
  1860. \t\t\t\t\t\t</article>
  1862. \t\t\t\t\t   </div>
  1863. \t\t\t\t\t   <!--Single Blog Start-->
  1864. \t\t\t\t\t   
  1865. \t\t\t\t   </div>
  1866. \t\t\t   </div>
  1867. \t\t   </div>
  1868.    </section>
  1870. ";
  1871.         
  1872.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  1874.         
  1875.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  1877.     }
  1879.     // line 1550
  1880.     public function block_javascripttemplate($context, array $blocks = [])
  1881.     {
  1882.         $macros = $this->macros;
  1883.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1884.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripttemplate"));
  1886.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1887.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripttemplate"));
  1889.         // line 1551
  1890.         echo "
  1891. ";
  1892.         
  1893.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  1895.         
  1896.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  1898.     }
  1900.     public function getTemplateName()
  1901.     {
  1902.         return "Theme/Users/User/Security/accueilsite.html.twig";
  1903.     }
  1905.     public function isTraitable()
  1906.     {
  1907.         return false;
  1908.     }
  1910.     public function getDebugInfo()
  1911.     {
  1912.         return array (  1890 => 1551,  1880 => 1550,  1596 => 1274,  1589 => 1272,  1572 => 1263,  1564 => 1260,  1554 => 1259,  1550 => 1257,  1545 => 1256,  1543 => 1255,  1537 => 1252,  1534 => 1251,  1530 => 1250,  904 => 627,  895 => 620,  881 => 619,  878 => 618,  869 => 612,  853 => 599,  848 => 597,  829 => 591,  824 => 589,  821 => 588,  812 => 582,  798 => 571,  793 => 569,  775 => 564,  770 => 562,  767 => 561,  765 => 560,  762 => 559,  753 => 553,  738 => 541,  733 => 539,  714 => 533,  709 => 531,  706 => 530,  703 => 529,  686 => 528,  586 => 430,  538 => 385,  529 => 379,  524 => 377,  511 => 367,  233 => 92,  209 => 70,  196 => 60,  189 => 56,  183 => 53,  178 => 51,  164 => 45,  162 => 44,  130 => 14,  120 => 13,  107 => 10,  97 => 9,  83 => 6,  76 => 4,  71 => 3,  61 => 2,  38 => 1,);
  1913.     }
  1915.     public function getSourceContext()
  1916.     {
  1917.         return new Source("{% extends \"Theme/Users/User/layoutoffert.html.twig\" %}
  1918. {% block meta %}
  1919. \t{{ parent() }}
  1920. \t<meta name=\"keywords\" content=\"{{ site }}, {{ keywords }}\"/>
  1921. \t<meta name=\"author\" content=\"Noel Kenfack\"/>
  1922. \t<meta name=\"description\" content=\"{{ site }} | {{ description }}\"/>
  1923. {% endblock %}
  1925. {% block title %}
  1926. \t{{ parent() }} | Accueil
  1927. {% endblock %}
  1929. {% block userblog_body %}
  1931. <style>
  1932. \t.banner-content .me {
  1933. \t\tbackground: #90acd1;
  1934. \t\tpadding: 18px;
  1935. \t\tdisplay: inline-block;
  1936. \t\tcolor:#fff;
  1937. \t\tfont-size: 16px;
  1938. \t\tborder-radius: 8px;
  1939. \t\tposition: relative;
  1940. \t}
  1941. \t
  1942. \t.banner-content .me::after{
  1943. \t\tcontent: '';
  1944. \t\tposition: absolute;
  1945. \t\tright: 0;
  1946. \t\tbottom: -15px;
  1947. \t\twidth: 0;
  1948. \t\theight: 0;
  1949. \t\tborder-left: 26px solid transparent;
  1950. \t\tborder-right: 0px solid
  1951. \t\ttransparent;
  1952. \t\tborder-top: 24px solid#90acd1;
  1953. \t}
  1954. \t
  1955. \t*, ::after, ::before {
  1956. \t\tbox-sizing: border-box;
  1957. \t}
  1958. </style>
  1959. \t\t
  1960. {% if slideaccueil != null %}
  1961. <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;\">
  1962.   <div class=\"mzp-l-content\">
  1963.     <div class=\"c-primary-cta-wrapper\">
  1964.       <div class=\"banner-content\" style=\"margin-bottom: 20px; margin-top: -40px;\">
  1965. \t  \t<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>
  1966. \t  </div>
  1967. \t  <h3 class=\"c-primary-cta-title\">{{ slideaccueil.titre }}</h3>
  1968.       <h3 class=\"c-primary-cta-title-sub\"></h3>
  1969.       <p class=\"c-primary-cta-desc-sub\">{{ slideaccueil.description }}</p>
  1970.       
  1971.       <div class=\"c-primary-cta-button\">
  1972. \t\t<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\">
  1973. \t\t  <strong class=\"download-title\">
  1974. \t\t\tInvestir sur un chantier
  1975. \t\t  </strong>
  1976. \t\t</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\">
  1977. \t\t  <strong class=\"download-title\">
  1978. \t\t\tFaire un don
  1979. \t\t  </strong>
  1980. \t\t</a>
  1981.       </div>
  1982.     </div>
  1983.   </div>
  1984. </section>
  1985. {% else %}
  1986. <style>
  1987. \t.articleplay {
  1988. \t\ttext-align: left;
  1989. \t\tposition: relative;
  1990. \t\twidth: 100%;
  1991. \t\theight: 400px;
  1992. \t\toverflow: hidden;
  1993. \t\tbackground: white;
  1994. \t\tborder-radius: 5px;
  1995. \t\tcolor: #fff;
  1996. \t\ttransform: translate3d(0);
  1997. \t\tbox-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.03);
  1998. \t\ttransition: all 0.3s ease;
  1999. \t\ttop: 50%;
  2000. \t\tleft: 50%;
  2001. \t\ttransform: translate(-50%, -50%);
  2002. \t}
  2003. \t.image {
  2004. \t\twidth: 100%;
  2005. \t\tposition: absolute;
  2006. \t\theight: 400px;
  2007. \t\ttransition: 0.3s ease;
  2008. \t\tbackground-image: url({{ asset('template/images/bg-reseller.jpg') }});
  2009. \t\tbackground-size: cover;
  2010. \t\tbackground-position: center center;
  2011. \t}
  2012. \t.image:before {
  2013. \t\ttransition: all 0.3s ease;
  2014. \t\tcontent: \"\";
  2015. \t\tposition: absolute;
  2016. \t\twidth: 100%;
  2017. \t\theight: 150px;
  2018. \t\tbottom: 0;
  2019. \t\tbackground-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  2020. \t\tborder-radius: 0 0 5px 5px;
  2021. \t}
  2022. \t.player-wrap {
  2023. \t\theight: 280px;
  2024. \t\twidth: 100%;
  2025. \t\tposition: relative;
  2026. \t\topacity: 0;
  2027. \t\tpointer-events: none;
  2028. \t\toverflow: hidden;
  2029. \t}
  2030. \t.player-active .player-wrap {
  2031. \t\topacity: 1;
  2032. \t}
  2033. \t.articleplay #player {
  2034. \t\twidth: 100%;
  2035. \t\theight: calc(330px*16/9);
  2036. \t\tposition: absolute;
  2037. \t\ttop: 50%;
  2038. \t\tleft: 50%;
  2039. \t\ttransform: translate(-50%, -50%) scale(1.4);
  2040. \t\t-webkit-filter: saturate(1);
  2041. \t}
  2042. \t.articleplay .nfo {
  2043. \t\twidth: 100%;
  2044. \t\tposition: absolute;
  2045. \t\tbottom: 0;
  2046. \t\tleft: 20px;
  2047. \t\ttransition: all 0.3s ease;
  2048. \t\theight: 92px;
  2049. \t}
  2050. \t.articleplay h3 {
  2051. \t\tfont-size: 30px;
  2052. \t\tline-hight: 0;
  2053. \t\tmargin: 0;
  2054. \t\tposition: relative;
  2055. \t\ttransition: all 0.3s ease;
  2056. \t\twhite-space: nowrap;
  2057. \t}
  2058. \t.articleplay h3:after {
  2059. \t\tposition: absolute;
  2060. \t\tcontent: \"\";
  2061. \t\tbottom: 0;
  2062. \t\tleft: 0;
  2063. \t\twidth: 60px;
  2064. \t\theight: 3px;
  2065. \t\tbackground: #F15826;
  2066. \t\tz-index: 100;
  2067. \t\ttransition: all 0.3s ease;
  2068. \t\ttransition-delay: 0s;
  2069. \t}
  2070. \t.articleplay p {
  2071. \tcolor: #B3B7B9;
  2072. \tmargin-top: 0.3em;
  2073. \tposition: relative;
  2074. \ttransition: all 0.3s ease;
  2075. \t}
  2076. \t.articleplay  .desc {
  2077. \t\tbackground: #9ebb3d;
  2078. \t\twidth: 100%;
  2079. \t\theight: 144px;
  2080. \t\tmargin-left: -20px;
  2081. \t\tposition: relative;
  2082. \t\tbox-sizing: border-box;
  2083. \t\ttransition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  2084. \t\tline-height: 1.4;
  2085. \t\tfont-weight: 100;
  2086. \t}
  2087. \t.articleplay  .desc p {
  2088. \t\tmargin: 0;
  2089. \t\tpadding: 20px;
  2090. \t\tpadding-top: 25px;
  2091. \t\tcolor: #fff;
  2092. \t\tfont-size: 15px;
  2093. \t\theight: 2.8em;
  2094. \t\toverflow: hidden;
  2095. \t}
  2096. \t.articleplay a {
  2097. \t\tpadding: 10px 0px;
  2098. \t\theight: 50px;
  2099. \t\tbackground: #ec9204;
  2100. \t\tcolor: white;
  2101. \t\tdisplay: inline-block;
  2102. \t\ttext-align: center;
  2103. \t\tbottom: 0;
  2104. \t\tposition: absolute;
  2105. \t\twidth: 100%;
  2106. \t\toverflow: hidden;
  2107. \t\tbox-sizing: border-box;
  2108. \t\tfont-weight: 400;
  2109. \t\ttext-decoration: none;
  2110. \t\ttransition: all 0.1s ease;
  2111. \t}
  2112. \t.articleplay a:hover {
  2113. \t\tcolor: white;
  2114. \t\t-webkit-filter: contrast(1.5);
  2115. \t}
  2116. \t.articleplay a:hover .maxdome-logo, .articleplay a:hover span {
  2117. \ttransform: translateY(-37px);
  2118. \t}
  2119. \t.articleplay  a:active {
  2120. \t-webkit-filter: contrast(2);
  2121. \t}
  2122. \t.articleplay  a:active .maxdome-logo {
  2123. \ttransition: all 0.3s ease 0;
  2124. \ttransform: translateY(-37px) scale(0.95);
  2125. \t}
  2126. \t.articleplay a .maxdome-logo, .articleplay a span {
  2127. \ttransition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1) 200ms;
  2128. \twidth: 100%;
  2129. \tdisplay: inline-block;
  2130. \tmargin-top: 6px;
  2131. \t}
  2132. \t.articleplay a .maxdome-logo {
  2133. \twidth: 154px;
  2134. \tmargin-top: 12px;
  2135. \theight: 20px;
  2136. \tdisplay: inline-block;
  2137. \t}
  2138. \t.articleplay  a .maxdome-logo:after {
  2139. \tcontent: \"\";
  2140. \tspeak: none;
  2141. \tfont-style: normal;
  2142. \tfont-weight: 400;
  2143. \tfont-family: Icons;
  2144. \tcolor: #fff;
  2145. \tmargin-left: 0.11111rem;
  2146. \t}
  2147. \t.articleplay a .maxdome-logo:before {
  2148. \tcontent: \"\";
  2149. \tspeak: none;
  2150. \tfont-style: normal;
  2151. \tfont-weight: 400;
  2152. \tcolor: #202831;
  2153. \tfont-family: Icons;
  2154. \t}
  2155. \t.articleplay:hover {
  2156. \tbox-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 12px 22px rgba(0, 0, 0, 0.15);
  2157. \t}
  2158. \t.articleplay:hover .nfo {
  2159. \ttransform: translateY(-100px);
  2160. \t}
  2161. \t.articleplay:hover .nfo p {
  2162. \topacity: 0;
  2163. \t}
  2164. \t.articleplay:hover .desc {
  2165. \ttransform: translateY(-47px);
  2166. \t}
  2167. \t.articleplay:hover .desc p {
  2168. \topacity: 1;
  2169. \t}
  2170. \t.articleplay:hover h3:after {
  2171. \twidth: 390px;
  2172. \ttransform: translateX(-20px);
  2173. \ttransition-delay: 0.3s;
  2174. \ttransition: transform 0.3s ease, width 2s ease-in;
  2175. \t}
  2176. \t.articleplay:hover .image {
  2177. \ttransform: translateY(-60px);
  2178. \t}
  2179. \t.articleplay:hover.player-active h3:after {
  2180. \ttransition: 0.3s ease;
  2181. \twidth: 440px;
  2182. \t}
  2183. \t.articleplay:hover.player-active .image:before {
  2184. \ttransform: translate(0);
  2185. \t}
  2186. \t.articleplay:hover.player-active .nfo {
  2187. \ttransition: 1s ease 1.5s;
  2188. \ttransform: translateY(-6px);
  2189. \t}
  2190. \t.articleplay:hover.player-active .nfo a {
  2191. \ttransform: translateY(-94px);
  2192. \ttransition: 1s ease 1.5s;
  2193. \t}
  2194. \t.articleplay:hover.player-active .nfo:hover {
  2195. \ttransition: 0.7s ease 0s;
  2196. \ttransform: translateY(-100px);
  2197. \t}
  2198. \t.articleplay:hover.player-active .nfo:hover a {
  2199. \ttransform: translateY(0);
  2200. \ttransition: 0.7s ease 0s;
  2201. \t}
  2202. \t.articleplay:hover.player-active .nfo:hover h3 {
  2203. \ttransition: 1s ease 0s;
  2204. \tcolor: white;
  2205. \t}
  2206. \t.articleplay:hover.player-active .nfo:hover h3 {
  2207. \ttransition: 1s ease 2s;
  2208. \t}
  2209. \t.articleplay:hover.player-active .nfo:hover h3:after {
  2210. \twidth: 440px;
  2211. \ttransition: width 0.3s ease;
  2212. \t}
  2213. .bg-danger {
  2214.   background-color: #f5365c !important;
  2215. }
  2216. @media (min-width: 1200px) {
  2217.   
  2218.   .justify-content-xl-between {
  2219.     justify-content: space-between !important;
  2220.   }
  2221. }
  2222. .pt-5 {
  2223.   padding-top: 3rem !important;
  2224. }
  2225. .pb-8 {
  2226.   padding-bottom: 8rem !important;
  2227. }
  2228. @media (min-width: 768px) {
  2229.   .pt-md-8 {
  2230.     padding-top: 8rem !important;
  2231.   }
  2232. }
  2233. @media (min-width: 1200px) {
  2234.   
  2235.   .mb-xl-0 {
  2236.     margin-bottom: 0 !important;
  2237.   }
  2238. }
  2239. .font-weight-bold {
  2240.   font-weight: 600 !important;
  2241. }
  2242. a.text-success:hover,
  2243. a.text-success:focus {
  2244.   color: #24a46d !important;
  2245. }
  2246. .text-warning {
  2247.   color: #fb6340 !important;
  2248. }
  2249. a.text-warning:hover,
  2250. a.text-warning:focus {
  2251.   color: #fa3a0e !important;
  2252. }
  2253. .text-danger {
  2254.   color: #f5365c !important;
  2255. }
  2256. a.text-danger:hover,
  2257. a.text-danger:focus {
  2258.   color: #ec0c38 !important;
  2259. }
  2260. .text-white {
  2261.   color: #fff !important;
  2262. }
  2263. a.text-white:hover,
  2264. a.text-white:focus {
  2265.   color: #e6e6e6 !important;
  2266. }
  2267. .text-muted {
  2268.   color: #8898aa !important;
  2269. }
  2270. figcaption,
  2271. main {
  2272.   display: block;
  2273. }
  2274. main {
  2275.   overflow: hidden;
  2276. }
  2277. .bg-yellow {
  2278.   background-color: #ffd600 !important;
  2279. }
  2280. </style>
  2283. <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;\">
  2284.   <div class=\"mzp-l-content \">
  2285.     <div class=\"c-primary-cta-wrapper\" style=\"max-width: 100%;\">
  2286.       <div class=\"banner-content\" style=\"margin-bottom: 20px; margin-top: -40px;\">
  2287. \t  \t<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>
  2288. \t  </div>
  2289. \t  <div class=\"row\">
  2290. \t\t  <div class=\"col-md-6\">
  2291. \t\t\t<h3 class=\"c-primary-cta-title\">Sur les business les plus rentables en controlant intégralement l'activité.</h3>
  2292. \t\t\t<h3 class=\"c-primary-cta-title-sub\">12</h3>
  2293. \t\t\t<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>
  2294. \t\t\t<div class=\"c-primary-cta-button\">
  2295. \t\t\t  <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\">
  2296. \t\t\t\t<strong class=\"download-title\">
  2297. \t\t\t\t  Investir sur un chantier
  2298. \t\t\t\t</strong>
  2299. \t\t\t  </a>
  2300. \t\t\t  
  2301. \t\t\t  <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\">
  2302. \t\t\t\t<strong class=\"download-title\">
  2303. \t\t\t\t  Faire un don
  2304. \t\t\t\t</strong>
  2305. \t\t\t  </a>
  2307. \t\t\t</div>
  2308. \t\t  </div>
  2309. \t\t  <div class=\"col-md-6\">
  2310. \t\t\t
  2311. \t\t\t<div class=\"articleplay\"  data-youtube-id=\"Ue_SfrHHBAc\">
  2312. \t\t\t\t<div class=\"image\"></div>
  2313. \t\t\t\t<div class=\"player-wrap\">
  2314. \t\t\t\t  <div id=\"player\"></div>
  2315. \t\t\t\t</div>
  2316. \t\t\t\t<div class=\"nfo\">
  2317. \t\t\t\t  
  2318. \t\t\t\t  <h3>Monsters, Inc.</h3>
  2319. \t\t\t\t  <p>Animation/Comedy
  2320. \t\t\t\t  </p>
  2321. \t\t\t\t  <div class=\"desc\">
  2322. \t\t\t\t\t<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>
  2323. \t\t\t\t\t<a href=\"#\" ><span>&#9658; Rent or Buy Now</span>
  2324. \t\t\t\t\t  <div class=\"maxdome-logo\"></div>
  2325. \t\t\t\t\t</a>
  2326. \t\t\t\t  </div>
  2327. \t\t\t
  2328. \t\t\t\t</div>
  2329. \t\t\t</div>
  2331. \t\t  </div>
  2332. \t  </div>
  2333. \t  
  2335. \t  <script type=\"text/javascript\">
  2336. \t\t
  2337. \t  </script>
  2338.     </div>
  2339.   </div>
  2341.   <div>
  2342. \t  <img src=\"\" alt=\"\" style=\"\">
  2343.   </div>
  2344. </section>
  2345. {% endif %}
  2347. <div class=\"mzp-l-content \" style=\"border-top: 1px solid #ddd;\">
  2348. \t<div class=\"header-body\">
  2349. \t\t<div class=\"row\">
  2350. \t\t  <div class=\"col-xl-3 col-lg-6\">
  2351. \t\t\t<div class=\"card card-stats mb-4 mb-xl-0\">
  2352. \t\t\t  <div class=\"card-body\">
  2353. \t\t\t\t<div class=\"row\">
  2354. \t\t\t\t  <div class=\"col\">
  2355. \t\t\t\t\t<h5 class=\"card-title text-uppercase text-muted mb-0\">Chantiers</h5>
  2356. \t\t\t\t\t<span class=\"h2 font-weight-bold mb-0\">350,897</span>
  2357. \t\t\t\t  </div>
  2358. \t\t\t\t  <div class=\"col-auto\">
  2359. \t\t\t\t\t<div class=\"icon icon-shape bg-danger text-white rounded-circle shadow\">
  2360. \t\t\t\t\t  <i class=\"fa fa-chart-bar\"></i>
  2361. \t\t\t\t\t</div>
  2362. \t\t\t\t  </div>
  2363. \t\t\t\t</div>
  2364. \t\t\t\t<p class=\"mt-3 mb-0 text-muted text-sm\">
  2365. \t\t\t\t  <span class=\"text-success mr-2\"><i class=\"fa fa-arrow-up\"></i> 3.48%</span>
  2366. \t\t\t\t  <span class=\"text-nowrap\">Since last month</span>
  2367. \t\t\t\t</p>
  2368. \t\t\t  </div>
  2369. \t\t\t</div>
  2370. \t\t  </div>
  2371. \t\t  <div class=\"col-xl-3 col-lg-6\">
  2372. \t\t\t<div class=\"card card-stats mb-4 mb-xl-0\">
  2373. \t\t\t  <div class=\"card-body\">
  2374. \t\t\t\t<div class=\"row\">
  2375. \t\t\t\t  <div class=\"col\">
  2376. \t\t\t\t\t<h5 class=\"card-title text-uppercase text-muted mb-0\">Investissement</h5>
  2377. \t\t\t\t\t<span class=\"h2 font-weight-bold mb-0\">2,356</span>
  2378. \t\t\t\t  </div>
  2379. \t\t\t\t  <div class=\"col-auto\">
  2380. \t\t\t\t\t<div class=\"icon icon-shape bg-warning text-white rounded-circle shadow\">
  2381. \t\t\t\t\t  <i class=\"fa fa-chart-pie\"></i>
  2382. \t\t\t\t\t</div>
  2383. \t\t\t\t  </div>
  2384. \t\t\t\t</div>
  2385. \t\t\t\t<p class=\"mt-3 mb-0 text-muted text-sm\">
  2386. \t\t\t\t  <span class=\"text-danger mr-2\"><i class=\"fa fa-arrow-down\"></i> 3.48%</span>
  2387. \t\t\t\t  <span class=\"text-nowrap\">Since last week</span>
  2388. \t\t\t\t</p>
  2389. \t\t\t  </div>
  2390. \t\t\t</div>
  2391. \t\t  </div>
  2392. \t\t  <div class=\"col-xl-3 col-lg-6\">
  2393. \t\t\t<div class=\"card card-stats mb-4 mb-xl-0\">
  2394. \t\t\t  <div class=\"card-body\">
  2395. \t\t\t\t<div class=\"row\">
  2396. \t\t\t\t  <div class=\"col\">
  2397. \t\t\t\t\t<h5 class=\"card-title text-uppercase text-muted mb-0\">Investisseurs</h5>
  2398. \t\t\t\t\t<span class=\"h2 font-weight-bold mb-0\">924</span>
  2399. \t\t\t\t  </div>
  2400. \t\t\t\t  <div class=\"col-auto\">
  2401. \t\t\t\t\t<div class=\"icon icon-shape bg-yellow text-white rounded-circle shadow\">
  2402. \t\t\t\t\t  <i class=\"fa fa-users\"></i>
  2403. \t\t\t\t\t</div>
  2404. \t\t\t\t  </div>
  2405. \t\t\t\t</div>
  2406. \t\t\t\t<p class=\"mt-3 mb-0 text-muted text-sm\">
  2407. \t\t\t\t  <span class=\"text-warning mr-2\"><i class=\"fa fa-arrow-down\"></i> 1.10%</span>
  2408. \t\t\t\t  <span class=\"text-nowrap\">Since yesterday</span>
  2409. \t\t\t\t</p>
  2410. \t\t\t  </div>
  2411. \t\t\t</div>
  2412. \t\t  </div>
  2413. \t\t  <div class=\"col-xl-3 col-lg-6\">
  2414. \t\t\t<div class=\"card card-stats mb-4 mb-xl-0\">
  2415. \t\t\t  <div class=\"card-body\">
  2416. \t\t\t\t<div class=\"row\">
  2417. \t\t\t\t  <div class=\"col\">
  2418. \t\t\t\t\t<h5 class=\"card-title text-uppercase text-muted mb-0\">Donations</h5>
  2419. \t\t\t\t\t<span class=\"h2 font-weight-bold mb-0\">49,65%</span>
  2420. \t\t\t\t  </div>
  2421. \t\t\t\t  <div class=\"col-auto\">
  2422. \t\t\t\t\t<div class=\"icon icon-shape bg-info text-white rounded-circle shadow\">
  2423. \t\t\t\t\t  <i class=\"fa fa-percent\"></i>
  2424. \t\t\t\t\t</div>
  2425. \t\t\t\t  </div>
  2426. \t\t\t\t</div>
  2427. \t\t\t\t<p class=\"mt-3 mb-0 text-muted text-sm\">
  2428. \t\t\t\t  <span class=\"text-success mr-2\"><i class=\"fa fa-arrow-up\"></i> 12%</span>
  2429. \t\t\t\t  <span class=\"text-nowrap\">Since last month</span>
  2430. \t\t\t\t</p>
  2431. \t\t\t  </div>
  2432. \t\t\t</div>
  2433. \t\t  </div>
  2434. \t\t</div>
  2435. \t  </div>
  2436. </div>
  2441.   <section style=\"padding: 15px 0px;\">
  2442. \t<div class=\"mzp-l-content\">
  2443.       <div class=\"mzp-l-card-hero\">
  2444. \t  {% for article in article_presentation %}
  2445. \t\t\t{% if loop.first %}
  2446. \t\t\t\t<section class=\"mzp-c-card mzp-c-card-large mzp-has-aspect-16-9 mzp-has-video has-video-embed\">
  2447. \t\t\t\t  <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\">
  2448. \t\t\t\t\t<div class=\"mzp-c-card-media-wrapper\">
  2449. \t\t\t\t\t\t<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>
  2450. \t\t\t\t\t</div>
  2451. \t\t\t\t\t<div class=\"mzp-c-card-content\">
  2452. \t\t\t\t\t
  2453. \t\t\t\t\t  <div class=\"mzp-c-card-tag\">Firefox</div>
  2454. \t\t\t\t\t
  2455. \t\t\t\t\t  <h2 class=\"mzp-c-card-title\"><span>{{ article.nom }}</span></h2>
  2456. \t\t\t\t\t
  2457. \t\t\t\t\t  <p class=\"mzp-c-card-desc\">{{ article.description }}</p>
  2458. \t\t\t\t\t</div>
  2459. \t\t\t\t  </a>
  2460. \t\t\t\t  
  2461. \t\t\t\t  <div class=\"mzp-c-card-video-wrapper hidden\">
  2462. \t\t\t\t  <figure class=\"mzp-c-card-video-content mzp-c-modal-overlay-contents\">
  2463. \t\t\t\t\t  <div class=\"ytcontainer-video\">
  2464. \t\t\t\t\t\t<div class=\"video-container\">
  2465. \t\t\t\t\t\t  <div class=\"video-play\" data-id=\"4OKMVy859wA\"></div>
  2466. \t\t\t\t\t\t</div>
  2467. \t\t\t\t\t  </div>
  2468. \t\t\t\t\t  <figcaption>
  2469. \t\t\t\t\t\t<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>
  2470. \t\t\t\t\t  </figcaption>
  2471. \t\t\t\t\t</figure>
  2472. \t\t\t\t   </div>
  2473. \t\t\t\t</section>
  2474. \t\t\t{% else %}
  2475. \t\t\t
  2476. \t\t\t{% if loop.index == 2 %}
  2477. \t\t\t\t<section class=\"mzp-c-card mzp-c-card-medium mzp-has-aspect-1-1  mzp-has-video has-video-embed\">
  2478. \t\t\t\t  <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é\">
  2479. \t\t\t\t\t<div class=\"mzp-c-card-media-wrapper\">
  2480. \t\t\t\t\t\t<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>
  2481. \t\t\t\t\t</div>
  2482. \t\t\t\t\t<div class=\"mzp-c-card-content\">
  2483. \t\t\t\t\t  <div class=\"mzp-c-card-tag\">Sécurité</div>
  2484. \t\t\t\t\t
  2485. \t\t\t\t\t  <h2 class=\"mzp-c-card-title\"><span>{{ article.nom }}</span></h2>
  2486. \t\t\t\t\t
  2487. \t\t\t\t\t  <p class=\"mzp-c-card-desc\">{{ article.description }}</p>
  2488. \t\t\t\t\t</div>
  2489. \t\t\t\t  </a>
  2490. \t\t\t\t  <div class=\"mzp-c-card-video-wrapper hidden\">
  2491. \t\t\t\t\t  <figure class=\"mzp-c-card-video-content mzp-c-modal-overlay-contents\">
  2492. \t\t\t\t\t\t  <div class=\"ytcontainer-video\">
  2493. \t\t\t\t\t\t\t<div class=\"video-container\">
  2494. \t\t\t\t\t\t\t  <div class=\"video-play\" data-id=\"FawHxwNzyPM\"></div>
  2495. \t\t\t\t\t\t\t</div>
  2496. \t\t\t\t\t\t  </div>
  2497. \t\t\t\t\t\t  <figcaption>
  2498. \t\t\t\t\t\t\t<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>
  2499. \t\t\t\t\t\t  </figcaption>
  2500. \t\t\t\t\t\t</figure>
  2501. \t\t\t\t\t</div>
  2502. \t\t\t\t</section>
  2503. \t\t\t{% else %}
  2504. \t\t\t\t<section class=\"mzp-c-card mzp-c-card-small mzp-has-aspect-16-9 mzp-has-video has-video-embed\">
  2505. \t\t\t\t\t<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\">
  2506. \t\t\t\t\t<div class=\"mzp-c-card-media-wrapper\">
  2507. \t\t\t\t\t\t<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>
  2508. \t\t\t\t\t  
  2509. \t\t\t\t\t</div>
  2510. \t\t\t\t\t<div class=\"mzp-c-card-content\">
  2511. \t\t\t\t\t  <div class=\"mzp-c-card-tag\">Outils Firefox</div>
  2513. \t\t\t\t\t  <h2 class=\"mzp-c-card-title\"><span>{{ article.nom }}</span></h2>
  2515. \t\t\t\t\t  <p class=\"mzp-c-card-desc\">{{ article.description }}</p>
  2517. \t\t\t\t\t</div>
  2518. \t\t\t\t\t</a>
  2519. \t\t\t  
  2520. \t\t\t\t\t<div class=\"mzp-c-card-video-wrapper hidden\">
  2521. \t\t\t\t\t  <figure class=\"mzp-c-card-video-content mzp-c-modal-overlay-contents\">
  2522. \t\t\t\t\t\t  <div class=\"ytcontainer-video\">
  2523. \t\t\t\t\t\t\t<div class=\"video-container\">
  2524. \t\t\t\t\t\t\t  <div class=\"video-play\" data-id=\"FawHxwNzyPM\"></div>
  2525. \t\t\t\t\t\t\t</div>
  2526. \t\t\t\t\t\t  </div>
  2527. \t\t\t\t\t\t  <figcaption>
  2528. \t\t\t\t\t\t\t<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>
  2529. \t\t\t\t\t\t  </figcaption>
  2530. \t\t\t\t\t\t</figure>
  2531. \t\t\t\t\t</div>
  2532. \t\t\t\t</section>
  2533. \t\t\t{% endif %}
  2534. \t\t\t{% endif %}
  2535. \t\t{% endfor %}
  2536.       </div>
  2537.       </div>
  2538.       </section>
  2540. \t
  2541. \t  <section style=\"margin-top: -20px;\">
  2542. \t  <div style=\"width: 95%; margin: 0px auto;\">
  2543. \t  <link href=\"{{ asset('template/css/tyfy.css') }}\" rel=\"stylesheet\"/>
  2544. \t  <style>
  2545. \t\tdiv.demotabs {
  2546. \t\t  border: 2px dashed #e6e6e6;
  2547. \t\t  border-radius: .8125rem;
  2548. \t\t  box-shadow: inset 0px 0px 1.625rem rgba(0, 0, 0, 0.05);
  2549. \t\t  margin-top: 1.625rem;
  2550. \t\t  padding: 15px;
  2551. \t\t  background: #fff;
  2552. \t\t}
  2553. \t\t.links-underlined a[href]{border-bottom-style:solid;border-bottom-width:2px}ol,ul{line-height:1.625rem;padding-left:2.4375rem}
  2554. \t  </style>
  2555. \t  
  2556. \t  
  2557. \t  <div class=\"demotabs\">
  2558. \t\t  <div class=\"mzp-l-content\">
  2559. \t\t<div class=\"links-underlined\">
  2560. \t\t\t<h1>En quoi AFH Factory vous êtes utiles ?</h1>
  2561. \t\t\t<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>
  2562. \t\t</div>
  2563. \t\t<div class=\"tabs-container\">
  2564. \t\t\t<h2 class=\"tab-label\">Investisseur</h2>
  2565. \t\t\t<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>
  2566. \t\t\t<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>
  2567. \t\t\t
  2568. \t\t\t<h2 class=\"tab-label collapsed\">Porteur de projet</h2>
  2569. \t\t\t<p>Facilis error corrupti dolor eaque. 
  2570. \t\t\t<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>
  2571. \t\t\t<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>
  2572. \t\t\t
  2573. \t\t\t<h2 class=\"tab-label collapsed\">Contributeurs</h2>
  2574. \t\t\t<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>
  2575. \t\t\t
  2576. \t\t</div>
  2577. \t  
  2578. \t  <h2>Notes</h2>
  2579. \t  <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>
  2580. \t</div>
  2581. \t</div>
  2582. \t  
  2583. \t  <script>
  2584. \t\t\$(document).ready(function(){
  2585.   
  2586. \t\t  GoToAnchor = function(){
  2587. \t\t\t// find the anchor and any tab it might be in
  2588. \t\t\tselected_anchor_name = encodeURIComponent(window.location.hash.substring(1));
  2589. \t\t\t\tselected_anchor = \$('a[name=\"'+selected_anchor_name+'\"], a[id=\"'+selected_anchor_name+'\"]');
  2590. \t\t\tparent_tab = selected_anchor.parents('.tab-panel');
  2591. \t\t\t// account for an anchor in a label
  2592. \t\t\tparent_label = selected_anchor.parents('.tab-label');
  2593. \t\t\tif (parent_label.length) {
  2594. \t\t\t  parent_tab = parent_label.next('.tab-panel');
  2595. \t\t\t}
  2596. \t\t\t// do the steps of this function only if we have an anchor link and a tab panel
  2597. \t\t\tif (selected_anchor.length && parent_tab.length) {
  2598. \t\t\t  parent_tab_label = parent_tab.prev('.tab-label');
  2599. \t\t\t\t  parent_tab_index = parent_tab_label.attr('data-tabindex');
  2600. \t\t\t  parent_tab.parent().find('ul.tabs li').eq(parent_tab_index).click();
  2601. \t\t\t  if (parent_tab.hasClass('collapsed')) {
  2602. \t\t\t\tparent_tab.removeClass('collapsed');
  2603. \t\t\t\tparent_tab_label.removeClass('collapsed');
  2604. \t\t\t  }
  2605. \t\t\t  // scroll to the anchor
  2606. \t\t\t  var s = selected_anchor.offset().top - 50; // console.log(s);
  2607. \t\t\t  \$('body,html').animate({'scrollTop':s},500,'swing');
  2608. \t\t\t\t}
  2609. \t\t  };
  2610. \t\t  
  2611. \t\t  // prepare HTML structure for each tab container
  2612. \t\t  \$('.tabs-container').each(function(){
  2613. \t\t\tif (!\$(this).hasClass('tabs-processed')) {
  2614. \t\t\t  // find the headings that are tab labels
  2615. \t\t\t  my_tablabels = \$(this).find('.tab-label');
  2616. \t\t\t  // create tabs
  2617. \t\t\t  if (\$(this).find('ul.tabs').length === 0) {
  2618. \t\t\t\t\$(this).prepend('<ul class=\"tabs\"></ul>');
  2619. \t\t\t\tvar x;
  2620. \t\t\t\tfor (x=0;x<my_tablabels.length;x++) {
  2621. \t\t\t\t  \$(this).find('ul.tabs').append('<li data-tabindex=\"'+x+'\">'+my_tablabels.eq(x).text()+'</li>');
  2622. \t\t\t\t}
  2623. \t\t\t  }
  2624. \t\t\t  // structure all labels and wrap all tab panels
  2625. \t\t\t  if (\$(this).find('.tab-panel').length === 0) {
  2626. \t\t\t\tmy_tablabels.each(function(i){
  2627. \t\t\t\t  \$(this).attr('data-tabindex',i);
  2628. \t\t\t\t  \$(this).wrapInner('<a id=\"'+encodeURIComponent(\$(this).text())+'\"></a>');
  2629. \t\t\t\t  kids = \$(this).nextUntil('.tab-label').wrapAll('<div class=\"tab-panel\"></div>');
  2630. \t\t\t\t  // default state class for when tabs are collapsable sections
  2631. \t\t\t\t  \$(this).addClass('collapsed').next('.tab-panel').addClass('collapsed');
  2632. \t\t\t\t});    
  2633. \t\t\t  }
  2634. \t\t\t  // open initial tab
  2635. \t\t\t  \$(this).find('ul.tabs li').eq(0).addClass('open');
  2636. \t\t\t  my_tablabels.eq(0).addClass('open').next('.tab-panel').addClass('open');
  2637. \t\t\t  // tab click events
  2638. \t\t\t  \$('.tabs-container ul.tabs li').each(function(i){
  2639. \t\t\t\t\$(this).click(function(){
  2640. \t\t\t\t  if (!\$(this).hasClass('open')) {
  2641. \t\t\t\t\t\$('.tabs-container .open').removeClass('open');
  2642. \t\t\t\t\tmy_tabindex = \$(this).attr('data-tabindex');
  2643. \t\t\t\t\t\$(this).addClass('open');
  2644. \t\t\t\t\t\$('.tabs-container .tab-label').eq(my_tabindex).addClass('open');
  2645. \t\t\t\t\t\$('.tabs-container .tab-panel').eq(my_tabindex).addClass('open');
  2646. \t\t\t\t  }
  2647. \t\t\t\t});
  2648. \t\t\t  });
  2649. \t\t\t  // collapsable header click event
  2650. \t\t\t  \$('.tabs-container .tab-label').click(function(){
  2651. \t\t\t\tif (!\$(this).hasClass('transition')) {
  2652. \t\t\t\t  kids = \$(this).next('.tab-panel');
  2653. \t\t\t\t  kids.removeClass('collapsed');
  2654. \t\t\t\t  var fullHeight = kids.outerHeight();
  2655. \t\t\t\t  \$(this).addClass('transition');
  2656. \t\t\t\t  kids.addClass('transition');
  2657. \t\t\t\t  if (\$(this).hasClass('collapsed')) {
  2658. \t\t\t\t\tkids.css({'height':'0px','padding-bottom':'0px','padding-top':'0px'}).animate({
  2659. \t\t\t\t\t  height:fullHeight+'px',
  2660. \t\t\t\t\t  paddingBottom:'32px',
  2661. \t\t\t\t\t  paddingTop:'16px',
  2662. \t\t\t\t\t},500,function(){
  2663. \t\t\t\t\t  \$('.tabs-container .transition').removeClass('collapsed').removeClass('transition').removeAttr('style');
  2664. \t\t\t\t\t});
  2665. \t\t\t\t  }
  2666. \t\t\t\t  else {
  2667. \t\t\t\t\tkids.css('height',fullHeight+'px').animate({
  2668. \t\t\t\t\t  height:'0px',
  2669. \t\t\t\t\t  paddingBottom:'0px',
  2670. \t\t\t\t\t  paddingTop:'0px',
  2671. \t\t\t\t\t},500,function(){
  2672. \t\t\t\t\t  \$('.tabs-container .transition').addClass('collapsed').removeClass('transition').removeAttr('style');
  2673. \t\t\t\t\t});
  2674. \t\t\t\t  }
  2675. \t\t\t\t}
  2676. \t\t\t  }); 
  2677. \t\t\t  // indicate state of readiness
  2678. \t\t\t  \$(this).addClass('tabs-processed');
  2679. \t\t\t}  
  2680. \t\t  });
  2681. \t\t  // if there are tabs and someone has linked to an anchor inside a tab
  2682. \t\t  console.log(window.location.hash);
  2683. \t\t  if (window.location.hash != '') {
  2684. \t\t\tGoToAnchor();
  2685. \t\t  }
  2686. \t\t  // handle case when page is already loaded
  2687. \t\t  \$(window).on('hashchange',function(){
  2688. \t\t\tGoToAnchor();
  2689. \t\t  });
  2690. \t\t});
  2691. \t  </script>
  2692. \t  </div>
  2693. \t  </section>
  2695. \t  <style>
  2696. \t\t  .articles {
  2697. \t\t\tbackground-color: white;
  2698. \t\t\tpadding: 40px;
  2699. \t\t\tdisplay: -webkit-box;
  2700. \t\t\tdisplay: -ms-flexbox;
  2701. \t\t\tdisplay: flex;
  2702. \t\t\t-webkit-box-orient: vertical;
  2703. \t\t\t-webkit-box-direction: normal;
  2704. \t\t\t\t-ms-flex-direction: column;
  2705. \t\t\t\t\tflex-direction: column;
  2706. \t\t\tmax-width: 600px;
  2707. \t\t\tposition: relative;
  2708. \t\t\tborder-radius: 10px;
  2709. \t\t\tborder: 7px dashed #ddd;
  2710. \t\t\t}
  2711. \t\t\t.articles__close {
  2712. \t\t\tdisplay: -webkit-inline-box;
  2713. \t\t\tdisplay: -ms-inline-flexbox;
  2714. \t\t\tdisplay: inline-flex;
  2715. \t\t\tposition: absolute;
  2716. \t\t\tright: 40px;
  2717. \t\t\ttop: 40px;
  2718. \t\t\tcursor: pointer;
  2719. \t\t\t}
  2720. \t\t\t.articles h1 {
  2721. \t\t\tmargin: 0px;
  2722. \t\t\tmargin-bottom: 10px;
  2723. \t\t\tfont-size: 22px;
  2724. \t\t\tcolor: #100e21;
  2725. \t\t\t}
  2726. \t\t\t.articles span {
  2727. \t\t\tcolor: #100e21;
  2728. \t\t\tmargin-bottom: 30px;
  2729. \t\t\t}
  2730. \t\t\t.articles__list {
  2731. \t\t\tpadding-left: 0px;
  2732. \t\t\tlist-style: none;
  2733. \t\t\tdisplay: -webkit-box;
  2734. \t\t\tdisplay: -ms-flexbox;
  2735. \t\t\tdisplay: flex;
  2736. \t\t\t-webkit-box-orient: vertical;
  2737. \t\t\t-webkit-box-direction: normal;
  2738. \t\t\t\t-ms-flex-direction: column;
  2739. \t\t\t\t\tflex-direction: column;
  2740. \t\t\t}
  2741. \t\t\t.articles__list > li {
  2742. \t\t\tpadding: 30px;
  2743. \t\t\tdisplay: -webkit-box;
  2744. \t\t\tdisplay: -ms-flexbox;
  2745. \t\t\tdisplay: flex;
  2746. \t\t\t-webkit-box-orient: vertical;
  2747. \t\t\t-webkit-box-direction: normal;
  2748. \t\t\t\t-ms-flex-direction: column;
  2749. \t\t\t\t\tflex-direction: column;
  2750. \t\t\tborder: 1px solid #dedee9;
  2751. \t\t\t}
  2752. \t\t\t.articles__list > li + li {
  2753. \t\t\tmargin-top: 10px;
  2754. \t\t\t}
  2755. \t\t\t.articles__list > li a {
  2756. \t\t\ttext-decoration: none;
  2757. \t\t\t}
  2758. \t\t\t.articles__list > li a h2 {
  2759. \t\t\tmargin: 0px;
  2760. \t\t\tcolor: #442fef;
  2761. \t\t\t}
  2762. \t\t\t.articles__list .list__footer {
  2763. \t\t\tpadding-left: 0px;
  2764. \t\t\tlist-style: none;
  2765. \t\t\tdisplay: -webkit-box;
  2766. \t\t\tdisplay: -ms-flexbox;
  2767. \t\t\tdisplay: flex;
  2768. \t\t\tmargin-top: 20px;
  2769. \t\t\t}
  2770. \t\t\t.articles__list .list__footer li {
  2771. \t\t\tdisplay: -webkit-box;
  2772. \t\t\tdisplay: -ms-flexbox;
  2773. \t\t\tdisplay: flex;
  2774. \t\t\t-webkit-box-align: center;
  2775. \t\t\t\t-ms-flex-align: center;
  2776. \t\t\t\t\talign-items: center;
  2777. \t\t\t}
  2778. \t\t\t.articles__list .list__footer li span {
  2779. \t\t\tmargin-bottom: 0px;
  2780. \t\t\tmargin-left: 5px;
  2781. \t\t\tline-height: 17px;
  2782. \t\t\tcolor: #100e21;
  2783. \t\t\tfont-size: 14px;
  2784. \t\t\tfont-weight: 700;
  2785. \t\t\t}
  2786. \t\t\t.articles__list .list__footer li + li {
  2787. \t\t\tmargin-left: 30px;
  2788. \t\t\t}
  2789. \t\t\t.articles__list .list__footer li i {
  2790. \t\t\tfont-size: 26px;
  2791. \t\t\t}
  2792. \t\t\t@import \"https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700\";
  2793. *, *:before, *:after {
  2794.   box-sizing: border-box;
  2795.   -webkit-box-sizing: border-box;
  2796.   -moz-box-sizing: border-box;
  2797. }
  2798. body, html {
  2799.   height: 100%;
  2800. }
  2801. body {
  2802.   background: #f9f9f9;
  2803.   background-size: cover;
  2804.   margin: 0;
  2805.   padding: 0;
  2806.   font-family: helvetica, arial, tahoma, verdana;
  2807.   line-height: 20px;
  2808.   font-size: 14px;
  2809.   color: #726f77;
  2810. }
  2811. img {
  2812.   max-width: 100%;
  2813. }
  2814. a {
  2815.   text-decoration: none;
  2816. }
  2817. h1, h2, h3, h4 {
  2818.   font-family: \"Dosis\", arial, tahoma, verdana;
  2819.   font-weight: 500;
  2820. }
  2821. .project-name {
  2822.   text-align: center;
  2823.   padding: 10px 0;
  2824. }
  2825. .success {
  2826.   background: #78AD42 !important;
  2827. }
  2828. .timeline-container {
  2829.   max-width: 1000px;
  2830.   margin: 0 auto;
  2831. }
  2832. #timeline .timeline-item:after, #timeline .timeline-item:before {
  2833.   content: '';
  2834.   display: block;
  2835.   width: 100%;
  2836.   clear: both;
  2837. }
  2838. #timeline {
  2839.   width: 100%;
  2840.   margin: 0px auto;
  2841.   position: relative;
  2842.   padding: 0 20px;
  2843.   -webkit-transition: all 0.4s ease;
  2844.   -moz-transition: all 0.4s ease;
  2845.   -ms-transition: all 0.4s ease;
  2846.   transition: all 0.4s ease;
  2847. }
  2848. #timeline:before {
  2849.   content: \"\";
  2850.   width: 3px;
  2851.   height: 100%;
  2852.   background: #1C71A4;
  2853.   left: 50%;
  2854.   top: 0;
  2855.   position: absolute;
  2856. }
  2857. #timeline:after {
  2858.   content: \"\";
  2859.   clear: both;
  2860.   display: table;
  2861.   width: 100%;
  2862. }
  2863. #timeline .timeline-item {
  2864.   margin-bottom: 50px;
  2865.   position: relative;
  2866. }
  2867. #timeline .timeline-item .timeline-icon {
  2868.   background: #1C71A4;
  2869.   width: 50px;
  2870.   height: 50px;
  2871.   position: absolute;
  2872.   top: 0;
  2873.   left: 50%;
  2874.   overflow: hidden;
  2875.   margin-left: -23px;
  2876.   -webkit-border-radius: 50%;
  2877.   -moz-border-radius: 50%;
  2878.   -ms-border-radius: 50%;
  2879.   border-radius: 50%;
  2880. }
  2881. #timeline .timeline-item .timeline-icon svg, #timeline .timeline-item .timeline-icon .fa {
  2882.   position: relative;
  2883.   top: 13px;
  2884.   left: 14px;
  2885.   font-size: 24px;
  2886.   color: #fff;
  2887. }
  2888. #timeline .timeline-item .timeline-content {
  2889.   width: 45%;
  2890.   background: #fff;
  2891.   padding: 20px;
  2892.   -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  2893.   -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  2894.   -ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  2895.   box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  2896.   -webkit-border-radius: 5px;
  2897.   -moz-border-radius: 5px;
  2898.   -ms-border-radius: 5px;
  2899.   border-radius: 5px;
  2900.   -webkit-transition: all 0.3s ease;
  2901.   -moz-transition: all 0.3s ease;
  2902.   -ms-transition: all 0.3s ease;
  2903.   transition: all 0.3s ease;
  2904. }
  2905. #timeline .timeline-item .timeline-content h2 {
  2906.   padding: 15px;
  2907.   background: #1C71A4;
  2908.   color: #fff;
  2909.   margin: -20px -20px 0 -20px;
  2910.   font-weight: 300;
  2911.   -webkit-border-radius: 3px 3px 0 0;
  2912.   -moz-border-radius: 3px 3px 0 0;
  2913.   -ms-border-radius: 3px 3px 0 0;
  2914.   border-radius: 3px 3px 0 0;
  2915.   font-size: 22px;
  2916. }
  2917. #timeline .timeline-item .timeline-content p {
  2918.   padding-top: 10px;
  2919.   padding-bottom: 10px;
  2920. }
  2921. #timeline .timeline-item .timeline-content:before {
  2922.   content: '';
  2923.   position: absolute;
  2924.   left: 45%;
  2925.   top: 20px;
  2926.   width: 0;
  2927.   height: 0;
  2928.   border-top: 7px solid transparent;
  2929.   border-bottom: 7px solid transparent;
  2930.   border-left: 7px solid #1C71A4;
  2931. }
  2932. #timeline .timeline-item .timeline-content.right {
  2933.   float: right;
  2934. }
  2935. #timeline .timeline-item .timeline-content.right:before {
  2936.   content: '';
  2937.   right: 45%;
  2938.   left: inherit;
  2939.   border-left: 0;
  2940.   border-right: 7px solid #1C71A4;
  2941. }
  2942.   #timeline {
  2943.     margin: 0px;
  2944.     padding: 0px;
  2945.     width: 100%;
  2946.   }
  2947.   #timeline:before {
  2948.     left: 0;
  2949.   }
  2950.   #timeline .timeline-item .timeline-content {
  2951.     width: 90%;
  2952.     float: right;
  2953.   }
  2954.   #timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
  2955.     left: 10%;
  2956.     margin-left: -6px;
  2957.     border-left: 0;
  2958.     border-right: 7px solid #1C71A4;
  2959.   }
  2960.   #timeline .timeline-item .timeline-icon {
  2961.     left: 0;
  2962.   }
  2963. /* Animation CSS */
  2964. /* icon animation */
  2965. .timeline-icon.is-hidden {
  2966.   visibility: hidden;
  2967. }
  2968. .timeline-icon.animate-it {
  2969.   visibility: visible;
  2970.    -webkit-animation: bounce-1 0.6s;
  2971.    -moz-animation: bounce-1 0.6s;
  2972.     animation: bounce-1 0.6s;
  2973. }
  2974. /* content block animation */
  2975. .timeline-content.is-hidden {
  2976.   visibility: hidden;
  2977. }
  2978. .timeline-content.animate-it {
  2979.   visibility: visible;
  2980.    -webkit-animation: bounce-2 0.6s;
  2981.    -moz-animation: bounce-2 0.6s;
  2982.     animation: bounce-2 0.6s;
  2983.   }
  2984. @media only screen and (min-width: 769px) {
  2985.   /* Inverse bounce effect on even content blocks */
  2986. .timeline-content.right.animate-it {
  2987.     -webkit-animation: bounce-2-inverse 0.6s;
  2988.     -moz-animation: bounce-2-inverse 0.6s;
  2989.     animation: bounce-2-inverse 0.6s;
  2990.   }
  2991. }
  2992. @media only screen and (max-width: 768px) {
  2993.   /* Inverse bounce effect on all content blocks */
  2994. .timeline-content.animate-it, .timeline-content.right.animate-it {
  2995.     -webkit-animation: bounce-2-inverse 0.6s;
  2996.     -moz-animation: bounce-2-inverse 0.6s;
  2997.     animation: bounce-2-inverse 0.6s;
  2998.   }
  2999. }
  3000. /* ALL animation types called */
  3001. @-webkit-keyframes bounce-1 {
  3002.   0% {
  3003.     opacity: 0;
  3004.     -webkit-transform: scale(0.5);
  3005.   }
  3006.   60% {
  3007.     opacity: 1;
  3008.     -webkit-transform: scale(1.2);
  3009.   }
  3010.   100% {
  3011.     -webkit-transform: scale(1);
  3012.   }
  3013. }
  3014. @-moz-keyframes bounce-1 {
  3015.   0% {
  3016.     opacity: 0;
  3017.     -moz-transform: scale(0.5);
  3018.   }
  3019.   60% {
  3020.     opacity: 1;
  3021.     -moz-transform: scale(1.2);
  3022.   }
  3023.   100% {
  3024.     -moz-transform: scale(1);
  3025.   }
  3026. }
  3027. @keyframes bounce-1 {
  3028.   0% {
  3029.     opacity: 0;
  3030.     -webkit-transform: scale(0.5);
  3031.     -moz-transform: scale(0.5);
  3032.     -ms-transform: scale(0.5);
  3033.     -o-transform: scale(0.5);
  3034.     transform: scale(0.5);
  3035.   }
  3036.   60% {
  3037.     opacity: 1;
  3038.     -webkit-transform: scale(1.2);
  3039.     -moz-transform: scale(1.2);
  3040.     -ms-transform: scale(1.2);
  3041.     -o-transform: scale(1.2);
  3042.     transform: scale(1.2);
  3043.   }
  3044.   100% {
  3045.     -webkit-transform: scale(1);
  3046.     -moz-transform: scale(1);
  3047.     -ms-transform: scale(1);
  3048.     -o-transform: scale(1);
  3049.     transform: scale(1);
  3050.   }
  3051. }
  3052. @-webkit-keyframes bounce-2 {
  3053.   0% {
  3054.     opacity: 0;
  3055.     -webkit-transform: translateX(-100px);
  3056.   }
  3057.   60% {
  3058.     opacity: 1;
  3059.     -webkit-transform: translateX(20px);
  3060.   }
  3061.   100% {
  3062.     -webkit-transform: translateX(0);
  3063.   }
  3064. }
  3065. @-moz-keyframes bounce-2 {
  3066.   0% {
  3067.     opacity: 0;
  3068.     -moz-transform: translateX(-100px);
  3069.   }
  3070.   60% {
  3071.     opacity: 1;
  3072.     -moz-transform: translateX(20px);
  3073.   }
  3074.   100% {
  3075.     -moz-transform: translateX(0);
  3076.   }
  3077. }
  3078. @keyframes bounce-2 {
  3079.   0% {
  3080.     opacity: 0;
  3081.     -webkit-transform: translateX(-100px);
  3082.     -moz-transform: translateX(-100px);
  3083.     -ms-transform: translateX(-100px);
  3084.     -o-transform: translateX(-100px);
  3085.     transform: translateX(-100px);
  3086.   }
  3087.   60% {
  3088.     opacity: 1;
  3089.     -webkit-transform: translateX(20px);
  3090.     -moz-transform: translateX(20px);
  3091.     -ms-transform: translateX(20px);
  3092.     -o-transform: translateX(20px);
  3093.     transform: translateX(20px);
  3094.   }
  3095.   100% {
  3096.     -webkit-transform: translateX(0);
  3097.     -moz-transform: translateX(0);
  3098.     -ms-transform: translateX(0);
  3099.     -o-transform: translateX(0);
  3100.     transform: translateX(0);
  3101.   }
  3102. }
  3103. @-webkit-keyframes bounce-2-inverse {
  3104.   0% {
  3105.     opacity: 0;
  3106.     -webkit-transform: translateX(100px);
  3107.   }
  3108.   60% {
  3109.     opacity: 1;
  3110.     -webkit-transform: translateX(-20px);
  3111.   }
  3112.   100% {
  3113.     -webkit-transform: translateX(0);
  3114.   }
  3115. }
  3116. @-moz-keyframes bounce-2-inverse {
  3117.   0% {
  3118.     opacity: 0;
  3119.     -moz-transform: translateX(100px);
  3120.   }
  3121.   60% {
  3122.     opacity: 1;
  3123.     -moz-transform: translateX(-20px);
  3124.   }
  3125.   100% {
  3126.     -moz-transform: translateX(0);
  3127.   }f
  3128. }
  3129. @keyframes bounce-2-inverse {
  3130.   0% {
  3131.     opacity: 0;
  3132.     -webkit-transform: translateX(100px);
  3133.     -moz-transform: translateX(100px);
  3134.     -ms-transform: translateX(100px);
  3135.     -o-transform: translateX(100px);
  3136.     transform: translateX(100px);
  3137.   }
  3138.   60% {
  3139.     opacity: 1;
  3140.     -webkit-transform: translateX(-20px);
  3141.     -moz-transform: translateX(-20px);
  3142.     -ms-transform: translateX(-20px);
  3143.     -o-transform: translateX(-20px);
  3144.     transform: translateX(-20px);
  3145.   }
  3146.   100% {
  3147.     -webkit-transform: translateX(0);
  3148.     -moz-transform: translateX(0);
  3149.     -ms-transform: translateX(0);
  3150.     -o-transform: translateX(0);
  3151.     transform: translateX(0);
  3152.   }
  3153. }
  3157. \t  </style>
  3160. \t<section style=\"padding: 25px 0px;\">
  3162. \t\t<div class=\"mzp-l-content\">
  3163. \t\t\t<div class=\"row\">
  3164. \t\t\t\t<div class=\"col-md-7\">
  3166. \t\t\t\t\t{% for cat in liste_categorie|slice(0,2) %}
  3167. \t\t\t\t\t<h5 class=\"mzp-c-footer-heading\" style=\"font-weight: 700;\">
  3168. \t\t\t\t\t\t{{ cat.nom }}
  3169. \t\t\t\t\t</h5>
  3170. \t\t\t\t\t<div class=\"row grid\">
  3171. \t\t\t\t\t\t{% set liste_scat = cat.getListeScat %}
  3172. \t\t\t\t\t\t{% for scat in liste_scat|slice(0,2) %}
  3173. \t\t\t\t\t\t<div class=\"col-md-6\">
  3174. \t\t\t\t\t\t\t<div class=\"cardcode image-cardcode\">
  3175. \t\t\t\t\t\t\t\t<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>
  3176. \t\t\t\t\t\t\t\t<a href=\"{{ path('produit_produit_listes_produit_user', {'id': scat.id}) }}\" class=\"title\"><h2> {{ scat.description }} </h2></a>
  3177. \t\t
  3178. \t\t\t\t\t\t\t\t<div class=\"infos\">
  3179. \t\t\t\t\t\t\t\t\t<span><a href=\"{{ path('produit_produit_listes_produit_user', {'id': scat.id}) }}\"> {{ scat.nom }}</a></span>
  3180. \t\t\t\t\t\t\t\t\t<span class=\"stats\">
  3181. \t\t\t\t\t\t\t\t\t\t<span><i class=\"fa fa-eye\"></i>661</span>
  3182. \t\t\t\t\t\t\t\t\t\t<span><i class=\"fa fa-comment\"></i>0</span>
  3183. \t\t\t\t\t\t\t\t\t</span>
  3184. \t\t\t\t\t\t\t\t</div>
  3185. \t\t\t\t\t\t\t</div>
  3186. \t\t\t\t\t\t</div>
  3187. \t\t\t\t\t\t{% endfor %}
  3188. \t\t\t\t\t</div> <!-- End Row -->
  3189. \t\t\t\t\t{% endfor %}
  3191. \t\t\t\t</div>
  3193. \t\t\t\t<div class=\"col-md-5\">
  3194. \t\t\t\t\t
  3195. \t\t\t\t\t<div id=\"timeline\">
  3197. \t\t\t\t\t\t<div class=\"timeline-item\">
  3198. \t\t\t\t\t\t  <div class=\"timeline-icon\">
  3199. \t\t\t\t\t\t\t<i class=\"fa fa-envelope-o\" aria-hidden=\"true\"></i>
  3200. \t\t\t\t\t\t  </div>
  3201. \t\t\t\t\t\t  <div class=\"timeline-content\">
  3202. \t\t\t\t\t\t\t<h2>Notre vision</h2>
  3203. \t\t\t\t\t\t\t<p>
  3204. \t\t\t\t\t\t\t  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
  3205. \t\t\t\t\t\t\t  Atque, facilis quo maiores magnam modi ab libero praesentium blanditiis.
  3206. \t\t\t\t\t\t\t</p>
  3207. \t\t\t\t\t\t\t<span class=\"time-stamp\">Thu Jan - 26 - 2017 01:54</span>
  3208. \t\t\t\t\t\t  </div>
  3209. \t\t\t\t\t\t</div>
  3210. \t\t\t\t  
  3211. \t\t\t\t\t\t<div class=\"timeline-item\">
  3212. \t\t\t\t\t\t  <div class=\"timeline-icon\">
  3213. \t\t\t\t\t\t\t<i class=\"fa fa-envelope-open-o\" aria-hidden=\"true\"></i>
  3214. \t\t\t\t\t\t  </div>
  3215. \t\t\t\t\t\t  <div class=\"timeline-content right\">
  3216. \t\t\t\t\t\t\t<h2>Notre Missions</h2>
  3217. \t\t\t\t\t\t\t<p>
  3218. \t\t\t\t\t\t\t  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, facilis quo. Maiores magnam modi ab libero praesentium blanditiis consequatur aspernatur.
  3219. \t\t\t\t\t\t\t</p>
  3220. \t\t\t\t\t\t\t<span class=\"time-stamp\">Thu Jan - 26 - 2017 01:54</span>
  3221. \t\t\t\t\t\t  </div>
  3222. \t\t\t\t\t\t</div>
  3223. \t\t\t\t  
  3224. \t\t\t\t\t\t<div class=\"timeline-item\">
  3225. \t\t\t\t\t\t  <div class=\"timeline-icon success\">
  3226. \t\t\t\t\t\t\t<i class=\"fa fa-star\" aria-hidden=\"true\"></i>
  3227. \t\t\t\t\t\t  </div>
  3228. \t\t\t\t\t\t  <div class=\"timeline-content\">
  3229. \t\t\t\t\t\t\t<h2>Nos Valeurs</h2>
  3230. \t\t\t\t\t\t\t<p>
  3231. \t\t\t\t\t\t\t  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.
  3232. \t\t\t\t\t\t\t</p>
  3233. \t\t\t\t\t\t\t <span class=\"time-stamp\">Thu Jan - 26 - 2017 01:54</span>
  3234. \t\t\t\t\t\t  </div>
  3235. \t\t\t\t\t\t</div>
  3236. \t\t\t\t  
  3237. \t\t\t\t  
  3238. \t\t\t\t\t</div>
  3240. \t\t\t\t</div>
  3241. \t\t\t</div>
  3242. \t\t</div>
  3244. \t\t<script type=\"text/javascript\">
  3245. \t\t\t\$(function() {
  3246. \t\t\t\tvar timelineBlocks = \$('.timeline-item'),
  3247. \t\t\t\t\toffset = 0.8;
  3248. \t\t\t\t//hide timeline blocks which are outside the viewport
  3249. \t\t\t\thideBlocks(timelineBlocks, offset);
  3250. \t\t\t\t//on scolling, show/animate timeline blocks when entering the viewport
  3251. \t\t\t\t\$(window).on('scroll', function(){
  3252. \t\t\t\t\t(!window.requestAnimationFrame) 
  3253. \t\t\t\t\t\t? setTimeout(function(){ showBlocks(timelineBlocks, offset); }, 100)
  3254. \t\t\t\t\t\t: window.requestAnimationFrame(function(){ showBlocks(timelineBlocks, offset); });
  3255. \t\t\t\t});
  3256. \t\t\t\tfunction hideBlocks(blocks, offset) {
  3257. \t\t\t\t\tblocks.each(function(){
  3258. \t\t\t\t\t\t(\$(this).offset().top > \$(window).scrollTop() + \$(window).height() * offset) && \$(this).find('.timeline-icon, .timeline-content').addClass('is-hidden');
  3259. \t\t\t\t\t});
  3260. \t\t\t\t}
  3261. \t\t\t\tfunction showBlocks(blocks, offset) {
  3262. \t\t\t\t\tblocks.each(function(){
  3263. \t\t\t\t\t\t(\$(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');
  3264. \t\t\t\t\t});
  3265. \t\t\t\t}
  3266. \t\t\t});
  3267. \t\t</script>
  3268. \t  </section>
  3270. <style>
  3271. .news-section {
  3272.   padding: 0px 0;
  3273. }
  3274. .news-content {
  3275.     padding: 40px 30px;
  3276. }
  3277. .news-item {
  3278.     box-shadow: 0 0 15px #ededed;
  3279.     -webkit-transition: .5s;
  3280.     -o-transition: .5s;
  3281.     transition: .5s;
  3282.     margin-bottom: 40px;
  3283. }
  3284. .news-item:hover {
  3285.     -webkit-transform: translateY(-10px);
  3286.     -ms-transform: translateY(-10px);
  3287.     transform: translateY(-10px);
  3288.     -webkit-box-shadow: 0px 15px 15px 0px #edeaea;
  3289.     box-shadow: 0px 15px 15px 0px #edeaea;
  3290. }
  3291. .newsimg img {
  3292.     width: 100%;
  3293. }
  3294. .news_postdate {
  3295.     color: #FF3A46;
  3296. }
  3297. .news-content h3 {
  3298.     color: #233D63;
  3299.     font-size: 22px;
  3300.     margin-bottom: 25px;
  3301. }
  3302. .news_authorinfo {
  3303.     border: transparent;
  3304.     padding: 14px 0px 0px 0px;
  3305.     background: transparent;
  3306.     font-size: 14px;
  3307. }
  3308. .news_authorinfo i {
  3309.     margin-right: 6px;
  3310. }
  3311. .news_authorinfo span:last-child {
  3312.     float: right;
  3313. }
  3314. .news_authorinfo a {
  3315.     color: #666;
  3316. }
  3317. .center .news-content {
  3318.     background: linear-gradient(-120deg, #8758ff 0, #614ef9 100%);
  3319. }
  3320. .center .news-content h3,
  3321. .center .news-content p {
  3322.     color: #fff;
  3323. }
  3324. .center .news_authorinfo a,
  3325. .center .news_authorinfo i {
  3326.     color: #fff;
  3327. }
  3328. .news-slide.owl-carousel .col-lg-3 {
  3329.     max-width: 100%;
  3330.     padding: 0;
  3331. }
  3332. .news-section .owl-theme .owl-nav [class*=\"owl-\"] {
  3333.     color: #333;
  3334.     font-size: 14px;
  3335.     margin: 5px;
  3336.     padding: 4px 7px;
  3337.     background: #fff;
  3338.     display: inline-block;
  3339.     cursor: pointer;
  3340.     border-radius: 3px;
  3341.     border: 1px solid #ddd;
  3342. }
  3343. .small-title {
  3344.   font-size: 20px;
  3345.   text-transform: capitalize;
  3346.   color: #FF3A46;
  3347.   margin-bottom: 10px;
  3348.   margin-top: 0px;
  3349.   font-weight: 600;
  3350. }
  3351. .big-title {
  3352.     letter-spacing: 0px;
  3353.     padding-bottom: 13px;
  3354.     position: relative;
  3355.     color: #233D63;
  3356.     line-height: 50px;
  3357.     font-size: 36px;
  3358.     text-transform: capitalize;
  3359.     font-weight: 600;
  3360. }
  3361. .main-title-box {
  3362.     margin-bottom: 60px;
  3363. }
  3364. \t  </style>
  3365. \t  
  3366. \t  
  3367. <section class=\"news-section\">
  3369. \t\t<div class=\"mzp-l-content blog\" id=\"blog\">
  3370. \t\t\t\t<div class=\"text-left\">
  3371. \t\t\t\t\t<h3>
  3372. \t\t\t\t\t\tNos programmes
  3373. \t\t\t\t\t</h3>
  3374. \t\t\t\t\t
  3375. \t\t\t\t\t<div>
  3376. \t\t\t\t\t\tLa transparence 
  3377. \t\t\t\t\t</div>
  3378. \t\t\t\t</div>
  3380. \t\t\t\t   <div class=\"row posts-list\">
  3382. \t\t\t  
  3383. \t\t\t\t\t   <!--Single Blog Start-->
  3384. \t\t\t\t\t   <div class=\"col-lg-4 col-md-4 wow fadeInUp\" data-wow-delay=\"0ms\">
  3386. \t\t\t\t\t\t<article>
  3387. \t\t\t\t\t\t\t<div class=\"post-img\">
  3388. \t\t\t\t\t\t\t\t<img src=\"https://i.ibb.co/m5yGbdR/blog2.jpg\" alt=\"\" class=\"img-fluid\">
  3389. \t\t\t\t\t\t\t</div>
  3390. \t\t\t\t\t\t\t<p class=\"post-category\">Commandez un  Hébergement pro.</p>
  3391. \t\t\t\t\t\t\t<h2 class=\"title\">
  3392. \t\t\t\t\t\t\t\t<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>
  3393. \t\t\t\t\t\t\t</h2>
  3394. \t\t\t\t
  3395. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center\">
  3396. \t\t\t\t\t\t\t\t<img src=\"/template/images/co.png\" alt=\"\" class=\"img-fluid post-author-img flex-shrink-0\">
  3397. \t\t\t\t\t\t\t\t<div class=\"post-meta\">
  3398. \t\t\t\t\t\t\t\t<div class=\"post-author-list\">Kenfack Noel</div>
  3399. \t\t\t\t\t\t\t\t<div class=\"post-date\">
  3400. \t\t\t\t\t\t\t\t\t<time datetime=\"2022-01-01\">01 Feb 2024</time>
  3401. \t\t\t\t\t\t\t\t</div>
  3402. \t\t\t\t\t\t\t\t</div>
  3403. \t\t\t\t\t\t\t</div>
  3404. \t\t\t\t\t\t</article>
  3406. \t\t\t\t\t   </div>
  3407. \t\t\t\t\t   <!--Single Blog End-->
  3408. \t\t\t\t\t   <!--Single Blog Start-->
  3409. \t\t\t\t\t   <div class=\"col-lg-4 col-md-4 wow fadeInUp\" data-wow-delay=\"0ms\">
  3411. \t\t\t\t\t\t<article>
  3412. \t\t\t\t\t\t\t<div class=\"post-img\">
  3413. \t\t\t\t\t\t\t\t<img src=\"https://i.ibb.co/m5yGbdR/blog2.jpg\" alt=\"\" class=\"img-fluid\">
  3414. \t\t\t\t\t\t\t</div>
  3415. \t\t\t\t\t\t\t<p class=\"post-category\">Commandez un  Hébergement pro.</p>
  3416. \t\t\t\t\t\t\t<h2 class=\"title\">
  3417. \t\t\t\t\t\t\t\t<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>
  3418. \t\t\t\t\t\t\t</h2>
  3419. \t\t\t\t
  3420. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center\">
  3421. \t\t\t\t\t\t\t\t<img src=\"/template/images/co.png\" alt=\"\" class=\"img-fluid post-author-img flex-shrink-0\">
  3422. \t\t\t\t\t\t\t\t<div class=\"post-meta\">
  3423. \t\t\t\t\t\t\t\t<div class=\"post-author-list\">Kenfack Noel</div>
  3424. \t\t\t\t\t\t\t\t<div class=\"post-date\">
  3425. \t\t\t\t\t\t\t\t\t<time datetime=\"2022-01-01\">01 Feb 2024</time>
  3426. \t\t\t\t\t\t\t\t</div>
  3427. \t\t\t\t\t\t\t\t</div>
  3428. \t\t\t\t\t\t\t</div>
  3429. \t\t\t\t\t\t</article>
  3431. \t\t\t\t\t   </div>
  3432. \t\t\t\t\t   <!--Single Blog Start-->
  3433. \t\t\t\t\t   <!--Single Blog Start-->
  3434. \t\t\t\t\t   <div class=\"col-lg-4 col-md-4 wow fadeInUp\" data-wow-delay=\"0ms\">
  3436. \t\t\t\t\t\t<article>
  3437. \t\t\t\t\t\t\t<div class=\"post-img\">
  3438. \t\t\t\t\t\t\t\t<img src=\"https://i.ibb.co/m5yGbdR/blog2.jpg\" alt=\"\" class=\"img-fluid\">
  3439. \t\t\t\t\t\t\t</div>
  3440. \t\t\t\t\t\t\t<p class=\"post-category\">Commandez un  Hébergement pro.</p>
  3441. \t\t\t\t\t\t\t<h2 class=\"title\">
  3442. \t\t\t\t\t\t\t\t<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>
  3443. \t\t\t\t\t\t\t</h2>
  3444. \t\t\t\t
  3445. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center\">
  3446. \t\t\t\t\t\t\t\t<img src=\"/template/images/co.png\" alt=\"\" class=\"img-fluid post-author-img flex-shrink-0\">
  3447. \t\t\t\t\t\t\t\t<div class=\"post-meta\">
  3448. \t\t\t\t\t\t\t\t<div class=\"post-author-list\">Kenfack Noel</div>
  3449. \t\t\t\t\t\t\t\t<div class=\"post-date\">
  3450. \t\t\t\t\t\t\t\t\t<time datetime=\"2022-01-01\">01 Feb 2024</time>
  3451. \t\t\t\t\t\t\t\t</div>
  3452. \t\t\t\t\t\t\t\t</div>
  3453. \t\t\t\t\t\t\t</div>
  3454. \t\t\t\t\t\t</article>
  3456. \t\t\t\t\t   </div>
  3457. \t\t\t\t\t   <!--Single Blog Start-->
  3458. \t\t\t\t\t   
  3459. \t\t\t\t   </div>
  3460. \t\t\t   </div>
  3461. \t\t   </div>
  3462.    </section>
  3464. {% endblock %}
  3466. {% block javascripttemplate %}
  3468. {% endblock %}", "Theme/Users/User/Security/accueilsite.html.twig", "/home/afhunt/domains/factory.afhunt.com/public_html/factory/templates/Theme/Users/User/Security/accueilsite.html.twig");
  3469.     }
  3470. }