templates/defaut/categories.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 %}
  7. {% block head_css %}
  8.     {{ parent() }}
  9.     <style>
  11.         @media only screen and (max-width: 754px) and (min-width: 320px) {
  12.             .col-md-3 {
  13.                 width: 33%;
  14.                 width: calc(100%/2) !important;
  15.                 flex: none;
  16.             }
  17.         }
  19.         .card-hover:hover {
  20.             box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  21.             transform: translateY(-5px);
  22.             transition: all 0.3s ease-out;
  23.         }
  25.         .card-hover:hover h2 {
  26.             text-shadow: unset;
  27.             -webkit-transform: translateY(0);
  28.             -ms-transform: translateY(0);
  29.             transform: translateY(0);
  30.             background: #151515;
  31.             color: #dadada;
  32.             top: 0%;
  33.             margin: 0;
  34.             border: 1px solid #2d2d2d;
  35.             border-bottom-color: rgb(45, 45, 45);
  36.             border-bottom-style: solid;
  37.             border-bottom-width: 1px;
  38.             border-bottom: unset;
  39.         }
  41.         .type-item {
  42.             position: absolute;
  43.             top: 20%;
  44.             left: 50%;
  45.             transform: translate(-50%, -50%);
  46.             z-index: 2;
  47.             background-color: #0000008c;
  48.             font-size: 13px;
  49.             color: #fff;
  50.             width: 95%;
  51.             text-align: center;
  52.             -webkit-transition: all .2s ease-in;
  53.             transition: all .2s ease-in;
  54.         }
  57.         .card-hover:hover .type-item {
  58.             transform: translate(-50%, -60%);
  59.         }
  61.         .service-card:hover h2 {
  62.             position: absolute;
  63.             top: 0px;
  64.             left: 50%;
  65.             transform: translate(-50%, 0%);
  66.             transition: all 0.3s ease-out;
  67.         }
  69.     </style>
  70. {% endblock %}
  74. {% block body %}
  75.     <!-- ======================= Page Banner START -->
  76.     <section class="py-0">
  77.         <div class="container">
  78.             <div class="row">
  79.                 <div class="col-12">
  80.                         <div class="bg-light p-4 text-center rounded-3">
  81.                             <h1 class="m-0"> {{ categorie }}</h1>
  82.                             <!-- Breadcrumb -->
  83.                             <div class="d-flex justify-content-center">
  84.                                 <nav aria-label="breadcrumb">
  85.                                     <ol class="breadcrumb breadcrumb-dots mb-0">
  86.                                         <li class="breadcrumb-item"><a href="{{ path('app_defaut') }}">Accueil</a></li>
  87.                                         <li class="breadcrumb-item active" aria-current="page"> {{ categorie }}</li>
  88.                                     </ol>
  89.                                 </nav>
  90.                             </div>
  91.                         </div>
  92.                 </div>
  93.             </div>
  94.         </div>
  95.     </section>
  96.     <!-- =======================  Page Banner END    -->
  98.     <!-- =======================  Page content START -->
  100.     <section class="pt-5">
  101.         <div class="container">
  102.             <!-- Content and button -->
  103.             <div class="d-sm-flex justify-content-sm-between align-items-center mb-4">
  104.                 <h5 class="mb-2 mb-sm-0"></h5>
  105.             </div>
  106.             <div class="row">
  107.                 {% set servicesByCategory = service_category|services_by_category %}
  108.                 {% for category,service_category in servicesByCategory %}
  109.                     <!-- Card item START -->
  110.                     <div class="col-md-3 mb-3 service-card">
  111.                         <div class="card bg-transparent card-hover">
  113.                             <a href="{{ path('app_get_category', {service: categorie, slug: category}) }}">
  114.                                 <div class="position-relative">
  115.                                     <!-- Image -->
  116.                                     <img src="/document/{{categorie|lower}}/category/{{ category }}.svg" class="card-img" alt="{{ category }}">
  117.                                     <!-- Overlay -->
  118.                                     <span class="badge type-item p-2 badge-pill">
  119.                                            <h2> </h2> {{ category }}
  121.                                         </span>
  123.                                     <div class="card-img-overlay d-flex flex-column p-3">
  124.                                         <div class="w-100 mt-auto text-end">
  125.                                         </div>
  126.                                     </div>
  127.                                 </div>
  128.                             </a>
  129.                             {#<div class="card-body text-center">
  130.                                     <h5 class="card-title"><a href="{{ path('app_get_service', {slug: socialNetwork}) }}">{{ socialNetwork }}</a></h5>
  131.                                     <p class="mb-2"></p>
  132.                                     <h5 class="card-title"><a href="{{ path('app_get_service', {slug: socialNetwork}) }}" class="btn btn-primary">SECTIONNER</a></h5>
  133.                                 </div>#}
  134.                         </div>
  135.                         {# <div class="service-card-text">
  136.                                 <p>Texte à ajouter</p>
  137.                             </div>#}
  138.                     </div>
  140.                     {#{% for category in servicecategory.categories %}
  141.                         <div class="col-sm-6 col-lg-4 col-xl-3">
  142.                             <div class="card shadow">
  143.                                 <!-- Image -->
  144.                                 <a href="{{ path('app_get_category', {slug: category.slug}) }}">
  145.                                 <img src="{{ vich_uploader_asset(category,'imageFile')  }}" class="card-img-top" alt="{{ servicecategory.name }}">
  146.                                 </a>
  147.                                 <div class="card-body pb-0">
  148.                                     <!-- Badge and favorite -->
  149.                                     <div class="d-flex justify-content-between mb-2">
  150.                                         <a href="#" class="badge bg-success bg-opacity-10 text-success">{{ servicecategory.name }}</a>
  151.                                         <a href="#" class="text-danger"><i class="fas fa-heart"></i></a>
  152.                                     </div>
  153.                                     <!-- Title -->
  154.                                     <h5 class="card-title fw-normal"><a href="{{ path('app_get_category', {slug: category.slug}) }}">{{ category.name }}</a></h5>
  155.                                     <p class="mb-2 text-truncate-2"></p>
  157.                                 </div>
  158.                                 <!-- Card footer -->
  159.                                 <div class="card-footer pt-0 pb-3">
  160.                                     <hr>
  161.                                     <div class="d-flex justify-content-between ">
  162.                                         <!-- Rating star -->
  163.                                         <ul class="list-inline mb-0">
  164.                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i>
  165.                                             </li>
  166.                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i>
  167.                                             </li>
  168.                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i>
  169.                                             </li>
  170.                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i>
  171.                                             </li>
  172.                                             <li class="list-inline-item me-0 small"><i
  173.                                                         class="fas fa-star-half-alt text-warning"></i></li>
  174.                                             <li class="list-inline-item ms-2 h6 fw-light mb-0"></li>
  175.                                         </ul>
  176.                                     </div>
  177.                                 </div>
  178.                             </div>
  179.                         </div>#}
  180.                     {% else %}
  182.                        {# {% for servicecategory in service_category %}
  184.                             <div class="col-12 text-center">
  185.                             <!-- Subtitle -->
  186.                             <h2>La catégorie <span class="text-danger"> {{ servicecategory.name|lower }}</span>  est actuellement vide</h2>
  187.                             <!-- info -->
  188.                             <p class="mb-0">Consultez tous les catégories disponibles et achetez ceux qui répondent à vos besoins.</p>
  189.                             <!-- Button -->
  190.                             <a href="{{ path('app_defaut') }}" class="btn btn-primary mt-4 mb-0">Retour à l'accueil</a>
  191.                         </div>
  192.                         {% endfor %}#}
  193.                     <!-- Card item END -->
  194.                 {% endfor %}
  195.             </div>
  196.         </div>
  197.     </section>
  199.     <!-- =======================
  200.     Page content END -->
  201. {% endblock %}