templates/Theme/Produit/Service/Service/articlesdemo.html.twig line 17

Open in your IDE?
  1. <div class="my-container">
  2. <div class="row">
  3.     <div class="col-md-12" style="margin-bottom: 7px;">
  4.     <div class="step-indicator" style="display: inline-block; width: 100%; margin: 0px; background: #f9f9f9;">
  5.         <a class="stepcard completed" href="" style="display: inline-block; width: 22%;"><div class="coustom-my-text">{{ site }}</div></a>
  6.         <a class="stepcard completed" href="" style="display: inline-block; width: 22%;"><div class="coustom-my-text">Démo</div></a>
  7.         <a class="stepcard" href="#!" style="display: inline-block;  width: 22%;"><div class="coustom-my-text">Plateformes d'essais</div></a>
  8.     </div>
  9.     </div>
  10. </div>
  11. </div>
  13. <div style="background: #f5f7f8; padding-top: 20px;">
  14.     <div class="my-container">
  15.         <div class="row">
  16.         <div class="col-md-4">
  17.             {{ render(controller("App\\Controller\\Produit\\Service\\ServiceController:menuarticle", {'position': position})) }}
  18.         </div>
  19.         <div class="col-md-8">
  20.         
  21. <style>
  22. .wrap {
  23.   max-width: 100%;
  24.   margin: 0 auto;
  25.   display: flex;
  26.   flex-wrap: wrap;
  27. }
  29. .card {
  30.   flex: 1;
  31.   min-width: 100%;
  32.   max-width: 31%;
  33.   overflow: hidden;
  34.   border-radius: 0;
  35.   background: #fff;
  36.   margin: 0px;
  37.   box-shadow: 0px 5px 0px rgba(0, 0, 0, 0.03);
  38. }
  39. @media (max-width: 68em) {
  40.   .card {
  41.     min-width: 48%;
  42.   }
  43. }
  44. @media (max-width: 48em) {
  45.   .card {
  46.     min-width: 98%;
  47.   }
  48. }
  49. .card .head {
  50.   
  51. }
  52. .card .head:hover {
  53.   background-position: -79% 21.5%;
  54. }
  55. .card .head h3 {
  56.   margin: 0;
  57.   padding: 1em 1.5em;
  58.   align-self: flex-end;
  59.   display: block;
  60.   width: 100%;
  61.   font-weight: 400;
  62.   text-shadow: 0px 1px 0px #000;
  63.   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  64.   background-size: 100%;
  65.   background-image: linear-gradient(to top, #000000, rgba(0, 0, 0, 0));
  66. }
  67. .card .head h3 i.fa {
  68.   font-size: 120%;
  69.   position: relative;
  70.   top: 2px;
  71. }
  72. .card .head h3 span.time {
  73.   float: right;
  74.   font-weight: 200;
  75. }
  76. .card article {
  77.   padding: .5em 1.5em;
  78. }
  79. .card article h2:nth-of-type(1) {
  80.   margin-top: .5em;
  81.   font-weight: 400;
  82.   font-size: 205%;
  83.   line-height: 1.2em;
  84.   margin-bottom: .45em;
  85. }
  86. .card article p {
  87.   line-height: 1.55em;
  88.   text-align: justify;
  89. }
  90. .card article p:nth-of-type(1) {
  91.   margin-top: 0;
  92. }
  93. .card .foot {
  94.   border-top: 3px solid rgba(0, 0, 0, 0.1);
  95.   margin: 0 1.5em;
  96.   padding: 2em 0;
  97. }
  98. .card .foot .profile-pic {
  99.   max-width: 52px;
  100.   height: auto;
  101.   border-radius: 50%;
  102.   margin: 0 1em 0 0;
  103.   display: inline-block;
  104. }
  105. .card .foot .author {
  106.   font-weight: bold;
  107. }
  108. .card .foot .author a {
  109.   text-decoration: none;
  110.   color: tomato;
  111.   position: relative;
  112.   top: -.95em;
  113.   font-size: 1.25em;
  114. }
  115. .card .foot .social {
  116.   display: inline-block;
  117.   float: right;
  118.   font-size: 2.5em;
  119. }
  120. .card .foot .social a {
  121.   margin-left: .5em;
  122.   color: rgba(0, 0, 0, 0.3);
  123. }
  124. .card .foot .social a:hover {
  125.   color: rgba(0, 0, 0, 0.5);
  126. }
  127. </style>
  128.         
  129.         {% for article in liste_article %}
  130.         <div class="wrap">
  131.         <div class="card" style="background-image:'{% if article.imgservice != null %}{{ asset(article.imgservice.getwebpath) }}{% else %}{{ asset('template/images/bglogin2.png') }}{% endif %}';">
  132.           <style>
  133.             #bg-card-{{ article.id }}{
  134.                 background: url({% if article.imgservice != null %}{{ asset(article.imgservice.getwebpath) }}{% else %}{{ asset('template/images/bglogin2.png') }}{% endif %}) -59% 51.5%;
  135.                 min-height: 250px;
  136.                   color: #fff;
  137.                   position: relative;
  138.                   display: flex;
  139.                   transition: all 1.5s ease-in-out;
  140.                   background-repeat: no-repeat;
  141.                   background-size: cover;
  142.             }
  143.             #bg-card-{{ article.id }}:hover {
  144.               background-position: -79% 21.5%;
  145.             }
  146.           </style>
  147.           <a href="{{ article.link }}" style="display: block;" target="_blank">
  148.           <header id="bg-card-{{ article.id }}" class="head">
  149.           <h3>
  150.              <span style="color: #fff;"><img src="{% if article.logo != null and article.logo.imgevenement != null %}{{ asset(article.logo.imgevenement.getwebpath) }}{% else %}{{ asset('template/images/1settings.png') }}{% endif %}" style="width: 36px; height: 36px; border-radius: 18px; background: #fff;"/> {{ article.breve }}</span><span class="time" style="color: #fff; font-size: 16px; margin-top: 15px;"><span class="fa fa-clock-o"></span> {{ moisText(article.date|date('M')) }} {{ article.date|date('Y') }} - En cours</span>
  151.           </h3>
  152.           </header>
  153.           </a>
  154.           <article>
  155.             <h2><a href="{{ article.link }}" class="btn btn-primary pull-right" target="_blank">Essayer <span class="fa fa-external-link" style="font-size: 12px;"></span></a> {{ article.nom }} </h2>
  156.             <p>{{ article.description }}</p>
  157.             
  158.             <div style="margin-top: 20px;"><strong style="color: green;">Essayer les fonctionnalités <a href="#!">{{ site }}</a> sur <a href="{{ article.link }}" target="_blank">{{ article.breve }}</a> </strong></div>
  159.             {% set liste_partie = article.getPartiearticles %}
  160.             {% for partie in liste_partie %}
  161.               <div class="topic">
  162.                 <div class="open">
  163.                 <span class="faq-t" style="top: 40px;"></span>
  164.                 <div class="question">
  165.                 <img src="{% if partie.imgevenement != null %}{{ asset(partie.imgevenement.getwebpath) }}{% else %}{{ asset('template/images/boost2.png') }}{% endif %} " alt="..." style="width: 100px; height: 100px; float: left; margin-right: 7px; background: #ddd; margin-top: -20px;" >  
  166.                 <span style="font-size: 25px;">{{ partie.nom }}</span>
  168.                 <div style="color: #333; margin-top: 10px;">
  169.                    {{ partie.breve }} <a href="{{ partie.link }}" class="btn btn-primary pull-right" target="_blank">Essayer <span class="fa fa-external-link" style="font-size: 12px;"></span></a> 
  170.                 </div>
  171.                 </div> 
  172.                 </div>
  173.                 <div class="answer">
  174.                 {{ partie.description }}</br>
  175.                 </div>
  176.               </div>
  177.             {% endfor %}    
  178.           </article>
  179.         </div>
  180.         </div>
  181.         
  182.         <div style="background: rgba(145, 186, 28, 0.2); padding: 10px; text-align: center;">
  183.         <div><strong style="color: green;">Suivre <a href="{{ article.link }}" target="_blank">{{ article.breve }}</a> sur les réseaux sociaux.</strong></div>
  184.         <div class="social-btns">
  185.             {% if article.facebook != null %}
  186.             <a class="social-btn facebook" href="{{ article.facebook }}" target="_blank"><i class="fa fa-facebook"></i></a>
  187.             {% else %}
  188.             <a class="social-btn facebook" href="#!" title="Lien Indisponible"><i class="fa fa-facebook"></i></a>
  189.             {% endif %}
  190.             {% if article.twitter != null %}
  191.             <a class="social-btn linkedin" href="{{ article.twitter }}" target="_blank"><i class="fa fa-twitter"></i></a>
  192.             {% else %}
  193.             <a class="social-btn linkedin" href="#!" title="Lien Indisponible"><i class="fa fa-twitter"></i></a>
  194.             {% endif %}
  195.             {% if article.google != null %}
  196.             <a class="social-btn instagram" href="{{ article.google }}" target="_blank"><i class="fa fa-google-plus"></i></a>
  197.             {% else %}
  198.             <a class="social-btn instagram" href="#!" title="Lien Indisponible"><i class="fa fa-google-plus"></i></a>
  199.             {% endif %}
  200.             {% if article.linkedin != null %}
  201.             <a class="social-btn github" href="{{ article.linkedin }}" target="_blank"><i class="fa fa-linkedin"></i></a>
  202.             {% else %}
  203.             <a class="social-btn instagram" href="#!" title="Lien Indisponible"><i class="fa fa-linkedin"></i></a>
  204.             {% endif %}
  205.         </div>
  206.       </div>
  207.         {% else %}
  208.         <div class="col-md-12" style="height: 400px; border-left: 4px solid #3565ae; margin-left: 12px;">
  209.             <div style="border-left: 5px solid #3565ae; padding: 3px; background: #f5f5f5; color: red;">{{ 'Aucune donnée disponible pour cette requête'|trans }}</div>
  210.         </div>
  211.         {% endfor %}
  212.         
  213.         
  214.         </div>
  216.         </div>
  217.     </div>
  218. </div>