templates\site\services\services.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/site_page.html.twig' %}
  3. {% block title %} Service ORISHAS FINANCE {% 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.         .carousel-wrap {
  18.             margin: auto;
  19.             position: relative;
  20.         }
  21.         .owl-carousel .owl-nav{
  22.             overflow: hidden;
  23.             height: 0px;
  24.         }
  26.         .owl-theme .owl-dots .owl-dot.active span,
  27.         .owl-theme .owl-dots .owl-dot:hover span {
  28.             background: #2caae1;
  29.         }
  32.         .owl-carousel .item {
  33.             text-align: left;
  34.         }
  35.         .owl-carousel .nav-btn{
  36.             height: 47px;
  37.             position: absolute;
  38.             width: 26px;
  39.             cursor: pointer;
  40.             top: 100px !important;
  41.         }
  43.         .owl-carousel .owl-prev.disabled,
  44.         .owl-carousel .owl-next.disabled{
  45.             pointer-events: none;
  46.             opacity: 0.2;
  47.         }
  49.         .owl-carousel .prev-slide{
  50.             background: url(https://freakyjolly.com/demo/jquery/OwlCarousel2/nav-icon.png) no-repeat scroll 0 0;
  51.             left: -33px;
  52.         }
  53.         .owl-carousel .next-slide{
  54.             background: url(https://freakyjolly.com/demo/jquery/OwlCarousel2/nav-icon.png) no-repeat scroll -24px 0px;
  55.             right: -33px;
  56.         }
  57.         .owl-carousel .prev-slide:hover{
  58.             background-position: 0px -53px;
  59.         }
  60.         .owl-carousel .next-slide:hover{
  61.             background-position: -24px -53px;
  62.         }
  64.         span.img-text {
  65.             text-decoration: none;
  66.             outline: none;
  67.             transition: all 0.4s ease;
  68.             -webkit-transition: all 0.4s ease;
  69.             -moz-transition: all 0.4s ease;
  70.             -o-transition: all 0.4s ease;
  71.             cursor: pointer;
  72.             width: 100%;
  73.             font-size: 23px;
  74.             display: block;
  75.             text-transform: capitalize;
  76.         }
  77.         span.img-text:hover {
  78.             color: #2caae1;
  79.         }
  83. .o-flex-stretch--center {
  84.     -webkit-align-items: center;
  85.     -ms-flex-align: center;
  86.     align-items: center;
  87. }
  88. .o-flex-stretch {
  89.     display: -webkit-flex;
  90.     display: -ms-flexbox;
  91.     display: flex;
  92.     -webkit-justify-content: space-between;
  93.     -ms-flex-pack: justify;
  94.     justify-content: space-between;
  95. }
  96. /*@media (min-width: 48em)
  97. .c-title-universe__title {
  98.     font-size: 3.5rem;
  99. }*/
  100. .c-title-universe__title {
  101.     position: relative;
  102.     display: inline-block;
  103.     background-color: #fff;
  104.     text-transform: uppercase;
  105.     font-size: 30px;
  106.     font-size: 3rem;
  107.     font-weight: 100;
  108.     line-height: 1.25;
  109.     letter-spacing: .4px;
  110.     letter-spacing: .04rem;
  111.     padding-right: 10px;
  112.     padding-right: 1rem;
  113. }
  114.  /*   @media (min-width: 48em)
  115.     .c-title-universe__link {
  116.         padding-left: 1rem;
  117.         display: inline-block;
  118.         margin-top: 0;
  119.         top: -.1rem;
  120.     }*/
  122.         .c-title-universe__link {
  123.             position: relative;
  124.             background-color: #fff;
  125.             display: block;
  126.             margin-top: 5px;
  127.             margin-top: .5rem;
  128.             -webkit-transform: translate3d(0,0,0);
  129.             transform: translate3d(0,0,0);
  130.         }
  131.         .c-title-universe--color-1 {
  132.             color: #006fb7;
  133.         }
  134.         .marge{
  135.         margin-right:16px
  136.         }
  138.         th, td {
  139.         border-bottom: 1px solid #ddd;
  140.         margin-bottom:20px;
  141.         margin-top:20px;
  142.         }
  143.         tr{
  145.         margin-bottom:50px;
  146.         margin-top:50px;
  147.         }
  148.         tr:hover {
  149.         background-color: #f5f5f5;
  151.         }
  153.         .titreproduit{
  154.         font-weight:bold;
  155.         font-size:16px
  156.         }
  158.         .of-page-header {
  159.         
  160.             background-position: center center;
  161.             background-size: cover !important;
  162.             background-repeat: no-repeat;
  163.             background-color: rgba(0,0,0,.6);
  164.             background-blend-mode: color;
  165.         }
  167.     </style>
  169. {% endblock %}
  171. {% block body %}
  172. <span>
  173. {% if service.libelle=="ORISHAS DATA SERVICES" or service.libelle=="Solution Données Financières & Trading" %}
  175.     
  176.     <section class="jumbotron text-white of-page-header position-relative corpss" style="background-image:url({{asset('assets/site/images/background/page-title3.jpg')}});" >
  177.         <div class="container text-center mb-4" >
  178.             <h4 class="display-5 font-weight-bold">{{service.libelle}}</h4>
  179.             <p class="font-italic mb-0">
  180.             {% if service.libelle=="ORISHAS DATA SERVICES" %}
  181.          Services online d’Informations financières sur le Marché Africain.
  182.          Des données fiables et sur mesures sur les marchés Actions,
  183.          Obligataires et sur les Fonds Opcvm.
  184.          {% else %}
  185.          Terminaux financiers connectés à tous  les marchés du Monde et
  186.          tous types d’instruments financiers, API Marchés , 
  187.          outils de gestions de portefeuille ( PMS),Trading et OMS 
  188.          {% endif %}</p>
  190.         </div>
  192.         <div class="of-header-fixed-bottom">
  193.             <nav>
  194.                 <ol class="breadcrumb mb-0">
  195.                     <li class="breadcrumb-item"><a href="{{path('site_home')}}"><i class="fa fa-home" style="font-size:18px"></i></a></li>
  196.                     <li class="breadcrumb-item active">Service</li>
  197.                 </ol>
  198.             </nav>
  199.         </div>
  200.     </section>
  201.     
  202.     {% elseif service.libelle=="Formations & Conseils" %}
  203.     
  204.     <section class="jumbotron text-white of-page-header position-relative corpss" style="background-image:url({{asset('assets/site/images/background/page-title.jpg')}});" >
  205.         <div class="container text-center mb-4" >
  206.             <h4 class="display-5 font-weight-bold">{{service.libelle}}</h4>
  207.             <p class="font-italic mb-0">
  208.              Le plaisir d’apprendre  tout au long de la vie <br>
  209.             Finance,  GRC, AML/LCF  sous forme mooc et présentielle intra et inter-entreprises</p>
  211.         </div>
  213.         <div class="of-header-fixed-bottom">
  214.             <nav>
  215.                 <ol class="breadcrumb mb-0">
  216.                     <li class="breadcrumb-item"><a href="{{path('site_home')}}"><i class="fa fa-home" style="font-size:18px"></i></a></li>
  217.                     <li class="breadcrumb-item active">Service</li>
  218.                 </ol>
  219.             </nav>
  220.         </div>
  221.     </section>
  222.     
  223.     {% else %}
  224.     
  225.     
  226.     <section class="jumbotron text-white of-page-header position-relative corpss" style="background-image:url({{asset('assets/site/images/background/page-title2.jpg')}});" >
  227.         <div class="container text-center mb-4" >
  228.             <h4 class="display-5 font-weight-bold">{{service.libelle}}</h4>
  229.             <p class="font-italic mb-0">
  230.             {% if service.libelle=="Solution Risque LAB & LCFT" %}
  231.            Solutions clés en main de lutte contre le blanchiment d'argent et le financement du terrorisme. 
  232. Flux de liste PPE ,liste Sanctions livrés en toute sécurité 
  233. , moteur de filtrage et profilage en partenariat notamment avec DOW JONES
  234.            {% else %}
  235.     Nouvelle génération de solution digitale de Gouvernance, Risque et Conformité outillée
  236.          
  237.          {% endif %}</p>
  239.         </div>
  241.         <div class="of-header-fixed-bottom corpss">
  242.             <nav>
  243.                 <ol class="breadcrumb mb-0">
  244.                     <li class="breadcrumb-item"><a href="{{path('site_home')}}"><i class="fa fa-home" style="font-size:18px"></i></a></li>
  245.                     <li class="breadcrumb-item active">Service</li>
  246.                 </ol>
  247.             </nav>
  248.         </div>
  249.     </section>
  250.     {% endif %}
  251.     </span>
  252.      <div class="pl-3 pr-3">
  253.     <section class="row coprss" style="margin-top:12px">
  254.         <div class="col-md-9">
  256.  <ul class="nav nav-tabs" id="myTab" role="tablist">
  257.   <li class="nav-item">
  258.     <a class="nav-link active" id="presentation-tab" data-toggle="tab" href="#presentation" role="tab" aria-controls="presentation" aria-selected="true">Présentation</a>
  259.   </li>
  260.   <li class="nav-item">
  261.     <a class="nav-link" id="produit-tab" data-toggle="tab" href="#produit" role="tab" aria-controls="produit" aria-selected="false">Produit(s)</a>
  262.   </li>
  263.   
  264. </ul>
  265. <div class="tab-content corpss" id="myTabContent">
  266.   <div class="tab-pane fade show active" id="presentation" role="tabpanel" 
  267.   aria-labelledby="presentation-tab">
  268.  <p >
  269. <span>{{ service.description|raw }}</span>
  271. </p>
  272.   </div>
  273.   <div class="tab-pane fade" id="produit" role="tabpanel" aria-labelledby="produit-tab">
  274. <div class="row" style="margin-bottom:10px">
  275.    {%  for produit in ( service.produit) %}
  276.   <div class="col-md-6 pbottom" >
  277.   
  278.     <div class="card">
  279.     <img src="{{asset('uploads/produits/' ~ produit.image) }}" class="card-img-top" alt="..." height="150px">
  280.       <div class="card-body">
  281.         <span class="card-title titreproduit">{{produit.libelle}}</span>
  282.         <p class="card-text">{{produit.description|striptags|slice(0, 200, '...')|raw}}</p>
  283.        
  284.       </div>
  285.         <div class="card-footer">
  286.        <a href="{{ path('produit_show', {'id': produit.id}) }}"  class="btn btn-success">Voir plus</a>
  287.     </div>
  288.     </div>
  289.                        
  290.     
  291.   </div>
  292.    {% endfor %} 
  293.    
  294. </div>    
  295.   </div>
  297.   
  298. </div>
  300.         </div>
  301.        {#Contenu gauche #}
  302.     {% include 'site/home/includes/nosservices.html.twig'%}
  303.      {#Contenu gauche#}
  304.     </section>
  305.     </div>
  306.         <section class="row corpss" style="display:none">
  307.         
  310.         <div class="col-md-12">
  312.     
  314.             <div class="block block-primary">
  315.                 <h3 class="block-title"><span>Produits</span></h3>
  316.                 
  317.             <div class="row" style="margin-bottom:10px">
  318.   <div class="col-md-3">
  319.     <div class="card">
  320.     <img src="{{asset('assets/site/images/background/page-title2.jpg')}}" class="card-img-top" alt="...">
  321.       <div class="card-body">
  322.         <span class="card-title titreproduit">Special title treatment</span>
  323.         <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  324.        
  325.       </div>
  326.         <div class="card-footer">
  327.       {# <a href="{{path('show_produit')}}" class="btn btn-primary">Go somewhere</a>#}
  328.     </div>
  329.     </div>
  330.   </div>
  331.    <div class="col-md-3">
  332.     <div class="card">
  333.     <img src="{{asset('assets/site/images/background/page-title2.jpg')}}" class="card-img-top" alt="...">
  334.       <div class="card-body">
  335.         <span class="card-title titreproduit">Special title treatment</span>
  336.         <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  337.        
  338.       </div>
  339.         <div class="card-footer">
  340.        <a href="#" class="btn btn-primary">Go somewhere</a>
  341.     </div>
  342.     </div>
  343.   </div>
  344.    <div class="col-md-3">
  345.     <div class="card">
  346.     <img src="{{asset('assets/site/images/background/page-title2.jpg')}}" class="card-img-top" alt="...">
  347.       <div class="card-body">
  348.         <span class="card-title titreproduit">Special title treatment</span>
  349.         <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  350.        
  351.       </div>
  352.         <div class="card-footer">
  353.        <a href="#" class="btn btn-primary">Go somewhere</a>
  354.     </div>
  355.     </div>
  356.   </div>
  357.    <div class="col-md-3">
  358.     <div class="card">
  359.     <img src="{{asset('assets/site/images/background/page-title2.jpg')}}" class="card-img-top" alt="...">
  360.       <div class="card-body">
  361.         <span class="card-title titreproduit">Special title treatment</span>
  362.         <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  363.        
  364.       </div>
  365.         <div class="card-footer">
  366.        <a href="#" class="btn btn-primary">Go somewhere</a>
  367.     </div>
  368.     </div>
  369.   </div>
  370.   <br>
  371. </div>    
  372.                 
  373.     
  374.             </div>
  376.         </div>
  377.     </section>
  378. {% endblock %}
  380. {% block scripts %}
  381.     
  382.     <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  384.     <script>
  385.         // Hero slider JS
  386.         $(document).ready(function () {
  390.             $('.main-slide').owlCarousel({
  391.                 margin: 10,
  392.                 loop:true,
  393.                 autoplay : true,
  394.                 autoplayHoverPause:false,
  395.                 nav: false,
  396.                 dots: false,
  397.                 navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],
  398.                 responsive: {
  399.                     0: {
  400.                         items: 1
  401.                     },
  402.                     600: {
  403.                         items: 2
  404.                     },
  405.                     1000: {
  406.                         items: 3
  407.                     }
  408.                 }
  409.             });
  411.             var lastestNews=$('#news-carousel');
  413.             lastestNews.owlCarousel({
  414.                 margin: 10,
  415.                 dots: false,
  416.                 loop:true,
  417.                 autoplay: false,
  418.                 /*nav: false,
  419.                 navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],*/
  420.                 responsive: {
  421.                     0: {
  422.                         items: 2
  423.                     },
  424.                     600: {
  425.                         items: 3
  426.                     },
  427.                     1000: {
  428.                         items: 4
  429.                     }
  430.                 }
  431.             });
  434.             $('.last-news-prev').click(function (e) {
  435.                 e.preventDefault();
  436.                 //alert('lorem');
  437.                 lastestNews.trigger('prev.owl.carousel');
  438.             });
  439.             $('.last-news-next').click(function (e) {
  440.                 e.preventDefault();
  441.                 lastestNews.trigger('next.owl.carousel');
  442.             });
  444.         })
  445.     </script>
  448.     {# Début Glossaire js #}
  450.     <script src="{{ asset('assets/site/js/jquery.glossarize.js')}}"></script>
  452.     <script>
  454.         $(function(){
  455.       
  456.           $('.corpss').glossarizer({
  457.             
  458.             sourceURL: "{{ asset('assets/site/css/glossary.json')}}",
  459.             callback: function(){
  460.               new tooltip();
  461.             }
  462.           });
  463.       
  464.       
  465.         });
  466.       
  467.         </script>
  470.     {# Fin glossaire js #}
  471. {% endblock %}