templates/defaut/services.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% set pagetitle = 'ton partenaire en marketing des médias  sociaux' %}
  5. {% block title %} {{ pagetitle }}  {% endblock %}
  8. {% block head_css %}
  9.     {{ parent() }}
  10.     <style>
  11.         .instagram {
  12.             width: 100px;
  13.             height: 100px;
  14.             position: relative;
  15.         }
  17.         @media only screen and (max-width: 754px) and (min-width: 320px) {
  18.             .col-md-3 {
  19.                 width: 33%;
  20.                 width: calc(100%/2) !important;
  21.                 flex: none;
  22.             }
  23.         }
  25.         .card-hover:hover {
  26.             box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  27.             transform: translateY(-5px);
  28.             transition: all 0.3s ease-out;
  29.         }
  31.         .card-hover:hover h2 {
  32.             text-shadow: unset;
  33.             -webkit-transform: translateY(0);
  34.             -ms-transform: translateY(0);
  35.             transform: translateY(0);
  36.             background: #151515;
  37.             color: #dadada;
  38.             top: 0%;
  39.             margin: 0;
  40.             border: 1px solid #2d2d2d;
  41.             border-bottom-color: rgb(45, 45, 45);
  42.             border-bottom-style: solid;
  43.             border-bottom-width: 1px;
  44.             border-bottom: unset;
  45.         }
  47.         .type-item {
  48.             position: absolute;
  49.             top: 20%;
  50.             left: 50%;
  51.             transform: translate(-50%, -50%);
  52.             z-index: 2;
  53.             background-color: #0000008c;
  54.             font-size: 13px;
  55.             color: #fff;
  56.             width: 95%;
  57.             text-align: center;
  58.             -webkit-transition: all .2s ease-in;
  59.             transition: all .2s ease-in;
  60.         }
  63.         .card-hover:hover .type-item {
  64.             transform: translate(-50%, -60%);
  65.         }
  67.         .service-card:hover h2 {
  68.             position: absolute;
  69.             top: 0px;
  70.             left: 50%;
  71.             transform: translate(-50%, 0%);
  72.             transition: all 0.3s ease-out;
  73.         }
  75.     </style>
  76. {% endblock %}
  78. {% block body %}
  79.     <!-- ======================= Page Banner START -->
  80.     <section class="py-0">
  81.         <div class="container">
  82.             <div class="row">
  83.                 <div class="col-12">
  84.                         <div class="bg-light p-4 text-center rounded-3">
  85.                             <h1 class="m-0"> Réseaux sociaux </h1>
  86.                             <!-- Breadcrumb -->
  87.                             <div class="d-flex justify-content-center">
  88.                                 <nav aria-label="breadcrumb">
  89.                                     <ol class="breadcrumb breadcrumb-dots mb-0">
  90.                                         <li class="breadcrumb-item"><a href="{{ path('app_defaut') }}">Accueil</a></li>
  91.                                         <li class="breadcrumb-item active" aria-current="page"> Réseaux sociaux </li>
  92.                                     </ol>
  93.                                 </nav>
  94.                             </div>
  95.                         </div>
  96.                 </div>
  97.             </div>
  98.         </div>
  99.     </section>
  101.     <!-- =======================Page content START -->
  102.     <section>
  103.         <div class="container">
  104.             <div class="row">
  105.                 <!-- Slider START -->
  106.                 {% set servicesBySocialNetwork = services|services_by_socialnetwork %}
  107.                 {% for socialNetwork, services in servicesBySocialNetwork %}
  108.                     {% if socialNetwork is defined %}
  109.                         <div class="col-md-3 mb-3 service-card">
  110.                             <div class="card bg-transparent card-hover">
  111.                                 <a href="{{ path('app_get_service', {slug: socialNetwork}) }}">
  112.                                     <div class="position-relative">
  113.                                         <!-- Image -->
  114.                                         <img src="/document/{{ socialNetwork|lower }}/{{ socialNetwork|lower }}.svg" class="card-img" alt="{{ socialNetwork }}">
  115.                                         <!-- Overlay -->
  116.                                         <span class="badge type-item p-2 badge-pill">
  117.                                            <h2> </h2> {{ socialNetwork }}
  118.                                         </span>
  119.                                         <div class="card-img-overlay d-flex flex-column p-3">
  120.                                             <div class="w-100 mt-auto text-end">
  121.                                             </div>
  122.                                         </div>
  123.                                     </div>
  124.                                 </a>
  125.                             </div>
  126.                         </div>
  128.                     {% endif %}
  129.                 {% endfor %}
  131.             </div>
  132.         </div>
  133.     </section>
  134.     <!-- =======================
  135.     Page content END -->
  136. {% endblock %}