templates\site\videos\videos.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.     col-md-4{
  17.         width: 30% !important;
  18.     }
  19.     span.img-text {
  20.         text-decoration: none;
  21.         outline: none;
  22.         transition: all 0.4s ease;
  23.         -webkit-transition: all 0.4s ease;
  24.         -moz-transition: all 0.4s ease;
  25.         -o-transition: all 0.4s ease;
  26.         cursor: pointer;
  27.         width: 100%;
  28.         font-size: 23px;
  29.         display: block;
  30.         text-transform: capitalize;
  31.     }
  32.     span.img-text:hover {
  33.         color: #2caae1;
  34.     }
  35.     .o-flex-stretch--center {
  36.         -webkit-align-items: center;
  37.         -ms-flex-align: center;
  38.         align-items: center;
  39.     }
  40.     .o-flex-stretch {
  41.     display: -webkit-flex;
  42.     display: -ms-flexbox;
  43.     display: flex;
  44.     -webkit-justify-content: space-between;
  45.     -ms-flex-pack: justify;
  46.     justify-content: space-between;
  47.     }
  48.    
  49.     .c-title-universe__title {
  50.         position: relative;
  51.         display: inline-block;
  52.         background-color: #fff;
  53.         text-transform: uppercase;
  54.         font-size: 30px;
  55.         font-size: 3rem;
  56.         font-weight: 100;
  57.         line-height: 1.25;
  58.         letter-spacing: .4px;
  59.         letter-spacing: .04rem;
  60.         padding-right: 10px;
  61.         padding-right: 1rem;
  62.     }
  63.     
  65.     .c-title-universe__link {
  66.         position: relative;
  67.         background-color: #fff;
  68.         display: block;
  69.         margin-top: 5px;
  70.         margin-top: .5rem;
  71.         -webkit-transform: translate3d(0,0,0);
  72.         transform: translate3d(0,0,0);
  73.     }
  74.     .c-title-universe--color-1 {
  75.         color: #006fb7;
  76.     }
  77.     .marge{
  78.     margin-right:16px
  79.     }
  81.     th, td {
  82.     border-bottom: 1px solid #ddd;
  83.     margin-bottom:20px;
  84.     margin-top:20px;
  85.     }
  86.     tr{
  88.     margin-bottom:50px;
  89.     margin-top:50px;
  90.     }
  91.     tr:hover {
  92.     background-color: #f5f5f5;
  94.     }
  96.     .titreproduit{
  97.     font-weight:bold;
  98.     font-size:16px
  99.     }
  100.     
  101.     .card-body {
  102.         background-color:#33333D !important;
  103.         
  104.     }
  105.     .corps{
  106.     background-color:#33333D !important;
  107.     }
  108.     .titreproduit {
  109.         font-weight: bold;
  110.         font-size: 16px;
  111.         color:var(--color-primary);
  112.     }
  113.     
  114.     .acat{
  115.         font-size: 14px;
  116.         color:#039be5
  117.     }
  118.     body{ background-color: #434250; }
  119.      .title {
  120.         font-size: 18px;
  121.         margin-bottom: 6px;
  122.         overflow: hidden;
  123.         display: -webkit-box;
  124.         -webkit-line-clamp: 2;
  125.         -webkit-box-orient: vertical;
  126.         font-weight: bold;
  127.     }
  128.     .nav-tabs {
  129.         border-bottom: 1px solid #039be5;
  130.         background-color: #33333D !important;
  131.     }
  132.   </style>
  134. {% endblock %}
  136. {% block body %}
  140.     <section class="row pagetitle taille" style="background-image:url({{asset('assets/site/images/background/page-title3.jpg')}}); display:none">
  142.         <div class="col-md-12 auto-container">
  143.             <span class="auto-text" > {{ title }} </span><br> 
  144.             <span >Services online d’Informations financières sur le Marché Africain. Des données fiables et sur mesures 
  145.             sur les marchés Actions, Obligataires et sur les Fonds Opcvm..</span>
  146.         </div>
  148.     </section>
  150.     <section class="row">
  151.         <div class="col-md-12">
  152.             
  153.             <p>
  154.                 <nav>     
  155.                     <div class="nav nav-tabs" id="nav-tab" role="tablist">
  156.                         <a class=" nav-item nav-link acat active "  href="{{ path('site_videos') }}" > Toutes les vidéos</a>
  157.                         {% for categorie in categories %}
  158.                         {% if categorie.libelle != "Voeux" %}
  159.                         <a class=" nav-item nav-link acat "  href="{{path('site_videos_cat',{'id':categorie.id })}}" >{{categorie.libelle}}</a>
  160.                         {% endif %}
  161.                         {% endfor %}
  162.                     </div>
  163.                 </nav>
  165.             </p>
  166.         </div>
  167.     </section>
  168.     
  169.     <form class="row">
  170.         <div class="col-md-12" style=" margin-top: 20px; margin-bottom: 20px;">
  171.             <!-- Search form -->
  172.             <input type="text" name="q" id="q" class="form-control" placeholder="Rechercher" />
  173.             <button type="submit">search</button>
  174.         </div>
  175.     </form>
  177.     <section class="row" style="margin-top:12px ;margin-right:0px; margin-left: 0px; " >
  178.         <div class="col-md-12">
  179.             <div class="block block-primary">
  180.                 <h3 class="block-title"><span>Les Vidéos</span></h3>
  181.             </div>
  182.         </div>
  183.         <div class="row" style="display: flex;
  184.         flex-wrap: wrap; margin-bottom:10px;padding-left:10px;padding-right:10px; margin-right:-5px; margin-left: -8px; width:fit-content">
  185.     
  186.             {% for video in ALL|sort|reverse %}
  187.             {% if video.categorie.libelle != "Voeux" %}
  189.             <div class="col-md-4 card" style="background-color: inherit;padding: -5px; margin:0px;">
  190.                 
  191.                     <a href="{{path('site_videos_show',{'id':video.id,'cat':video.categorie.id})}}" >
  192.                         <div class="of-video-img-1">
  193.                             <i class="fa fa-play-circle fa-4x"></i>
  194.                             <img src="{{ asset("uploads/videos/thumbnails/#{video.getThumbnail()}") }}" class="card-img-top" alt="...">
  195.                         </div>
  196.                         <div class="card-body">
  197.                             <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>
  198.                             
  199.                         </div>
  200.                     </a>
  201.                
  202.             </div>
  203.             
  204.             {% endif %}
  205.             {% endfor %}
  206.         </div>
  207.         <div class="col-md-12">
  208.             <div class="d-flex justify-content-center">
  209.                 {{ knp_pagination_render(ALL) }}
  210.             </div>
  211.         </div>
  212.         <br>
  214.     </section>
  215.     
  216. {% endblock %}
  218. {% block scripts %}
  219.     <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  220. {% endblock %}