templates\site\videos\videocat.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/site.html.twig' %}
  3. {% block title %} ORISHAS TV {% endblock %}
  5. {% block css %}
  6.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  7.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
  8.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
  9.     <style>
  10.     /*sans bordure (1ère photo)*/
  11.     .arrondie {
  12.     -moz-border-radius:50px;
  13.     -webkit-border-radius:10px;
  14.     border-radius:50px;
  15.     }
  16.     
  17.     span.img-text {
  18.         text-decoration: none;
  19.         outline: none;
  20.         transition: all 0.4s ease;
  21.         -webkit-transition: all 0.4s ease;
  22.         -moz-transition: all 0.4s ease;
  23.         -o-transition: all 0.4s ease;
  24.         cursor: pointer;
  25.         width: 100%;
  26.         font-size: 23px;
  27.         display: block;
  28.         text-transform: capitalize;
  29.     }
  30.     span.img-text:hover {
  31.         color: #2caae1;
  32.     }
  33.     .o-flex-stretch--center {
  34.         -webkit-align-items: center;
  35.         -ms-flex-align: center;
  36.         align-items: center;
  37.     }
  38.     .o-flex-stretch {
  39.     display: -webkit-flex;
  40.     display: -ms-flexbox;
  41.     display: flex;
  42.     -webkit-justify-content: space-between;
  43.     -ms-flex-pack: justify;
  44.     justify-content: space-between;
  45.     }
  46.    
  47.     .c-title-universe__title {
  48.         position: relative;
  49.         display: inline-block;
  50.         background-color: #fff;
  51.         text-transform: uppercase;
  52.         font-size: 30px;
  53.         font-size: 3rem;
  54.         font-weight: 100;
  55.         line-height: 1.25;
  56.         letter-spacing: .4px;
  57.         letter-spacing: .04rem;
  58.         padding-right: 10px;
  59.         padding-right: 1rem;
  60.     }
  61.     
  63.     .c-title-universe__link {
  64.         position: relative;
  65.         background-color: #fff;
  66.         display: block;
  67.         margin-top: 5px;
  68.         margin-top: .5rem;
  69.         -webkit-transform: translate3d(0,0,0);
  70.         transform: translate3d(0,0,0);
  71.     }
  72.     .c-title-universe--color-1 {
  73.         color: #006fb7;
  74.     }
  75.     .marge{
  76.     margin-right:16px
  77.     }
  79.     th, td {
  80.     border-bottom: 1px solid #ddd;
  81.     margin-bottom:20px;
  82.     margin-top:20px;
  83.     }
  84.     tr{
  86.     margin-bottom:50px;
  87.     margin-top:50px;
  88.     }
  89.     tr:hover {
  90.     background-color: #f5f5f5;
  92.     }
  94.     .titreproduit{
  95.     font-weight:bold;
  96.     font-size:16px
  97.     }
  98.     .card-body {
  99.         background-color:#33333D !important;
  100.     }
  101.     .corps{
  102.     background-color:#33333D !important;
  103.     }
  104.     .titreproduit {
  105.         font-weight: bold;
  106.         font-size: 16px;
  107.         color:var(--color-primary);
  108.     }
  109.     
  110.     .acat{
  111.         font-size: 14px;
  112.         color:#039be5
  113.     }
  114.     body{ background-color: #434250; }
  115.      .title {
  116.         font-size: 18px;
  117.         margin-bottom: 6px;
  118.         overflow: hidden;
  119.         display: -webkit-box;
  120.         -webkit-line-clamp: 2;
  121.         -webkit-box-orient: vertical;
  122.         font-weight: bold;
  123.     }
  124.     .nav-tabs {
  125.         border-bottom: 1px solid #039be5;
  126.         background-color: #33333D !important;
  127.     }
  128.   </style>
  130. {% endblock %}
  132. {% block body %}
  134. <style>
  135. .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  136.     color: #fff;
  137.     background-color: #039be5;
  138.     font-weight: bold;
  139.     border-color: #dee2e6 #dee2e6 #fff;
  140.     text-transform: uppercase;
  141.     font-size: 16px;
  142. }
  143. .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  144.     color: #fff;
  145.     background-color: #039be5;
  146.     font-weight: bold;
  147.     border-color: #dee2e6 #dee2e6 #fff;
  148. }
  149. </style>
  151.     <section class="row pagetitle taille" style="background-image:url({{asset('assets/site/images/background/page-title3.jpg')}}); display:none">
  153.         <div class="col-md-12 auto-container">
  154.         <span class="auto-text" >{{title}} </span><br> 
  155.                 <span >Services online d’Informations financières sur le Marché Africain. Des données fiables et sur mesures 
  156.                 sur les marchés Actions, Obligataires et sur les Fonds Opcvm..</span>
  157.         </div>
  159.     </section>
  161.     <section class="row">
  162.         <div class="col-md-12">
  163.             
  164.             <p>
  165.                 <nav>     
  166.                     <div class="nav nav-tabs" id="nav-tab" role="tablist">
  167.                         <a class=" nav-item nav-link acat  "  href="{{path('site_videos')}}" >Toutes les vidéos</a>
  168.                        
  169.                         {% for categorie in categories %}
  170.                         {% if categorie.libelle != "Voeux" %}
  171.                         <a class=" nav-item nav-link acat "  href="{{path('site_videos_cat',{'id':categorie.id })}}" >{{categorie.libelle}}</a>
  172.                         {% endif %}
  173.                         {% endfor %}
  174.                         
  175.                     </div>
  176.                 </nav>
  178.             </p>
  179.         </div>
  180.     </section>
  181.     
  182.     <div class="row">
  183.         <div class="col-md-12" style="    margin-top: 20px; margin-bottom: 20px;">
  184.             <!-- Search form -->
  185.             <input class="form-control" type="text" placeholder="Search" aria-label="Search">
  186.         </div>
  187.     </div>
  189.     <section class="row" style="margin-top:12px ; " >
  190.         <div class="col-md-12">
  191.             <div class="block block-primary">
  192.                 <h3 class="block-title"><span>Les Vidéos récentes</span></h3>
  193.             </div>
  194.         </div>
  195.         <div class="row" style="margin-bottom:10px;padding-left:10px;padding-right:10px">
  196.       
  197.     {% for video in videos %}
  198.       {% if video.categorie.libelle != "Voeux" %}
  199.          {%if video.categorie.id==cat%}
  200.         <div class="col-md-4 pbottom" >
  201.             <div class="card">
  202.                 <a href="{{path('site_videos_show',{'id':video.id,'cat':video.categorie.id})}}">
  203.                     <div class="of-video-img-1">
  204.                         <i class="fa fa-play-circle fa-4x"></i>
  205.                         <img src="{{ asset("uploads/videos/thumbnails/#{video.getThumbnail()}") }}" class="card-img-top" alt="...">
  206.                     </div>
  207.                     <div class="card-body">
  208.                         <h6 class="card-title title" title="{{video.libelle}}"><a href="{{path('site_videos_show',{'id':video.id,'cat':video.categorie.id})}}">{{video.libelle}}</a></h6>
  209.                         
  210.                     </div>
  211.                 </a>
  212.             </div>
  213.         </div>
  214.         {%endif%}
  215.         {%endif%}
  216.         {%else%}
  217.          <div class="col-md-12 pbottom" style="color:white" >
  218.          Aucune Vidéo n'est disponible sur cette catégorie
  219.          </div>
  220.         
  221.     {% endfor %}
  222.         <br>
  224.     </section>
  225.     
  226. {% endblock %}
  228. {% block scripts %}
  229.     <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  230. {% endblock %}