templates/bundles/SyliusShopBundle/Homepage/categories.html.twig line 1

Open in your IDE?
  1. <div class="ui large stackable menu" id="div-collection">
  2.     <h2>Nos catégories</h2>
  4.     <div class="ui three odd doubling cards">
  5.         <div class="ui card">
  6.             <img class="ui fluid image" id="image-card-collection" src="{{ asset('hommes.png', 'shop') }}" alt="Sylius">
  7.             <div class="text-card">
  8.                 <span>Hommes</span>
  9.                 <div id="see-more">
  10.                     <a href="{{ path('sylius_shop_product_index', {'slug': 'homme'}) }}">Voir plus</a>
  11.                     <i class="arrow right icon"></i>
  12.                 </div>
  13.             </div>
  14.         </div>
  15.         <div class="ui card">
  16.             <img class="ui fluid image" id="image-card-collection" src="{{ asset('femmes.png', 'shop') }}" alt="Sylius">
  17.             <div class="text-card">
  18.                 <span>Femmes</span>
  19.                 <div id="see-more">
  20.                     <a href="{{ path('sylius_shop_product_index', {'slug': 'femme'}) }}">Voir plus</a>
  21.                     <i class="arrow right icon"></i>
  22.                 </div>
  23.             </div>
  24.         </div>
  25.         <div class="ui card">
  26.             <img class="ui fluid image" id="image-card-collection" src="{{ asset('pieces-moto.png', 'shop') }}" alt="Sylius">
  27.             <div class="text-card">
  28.                 <span>Pièces moto</span>
  29.                 <div id="see-more">
  30.                     <a href="{{ path('sylius_shop_product_index', {'slug': 'pieces-moto'}) }}">Voir plus</a>
  31.                     <i class="arrow right icon"></i>
  32.                 </div>
  33.             </div>
  34.         </div>
  35.         <div class="ui card" id="category-card-responsive">
  36.             <img class="ui fluid image" id="image-card-collection" src="{{ asset('pieces-moto.png', 'shop') }}" alt="Sylius">
  37.             <div class="text-card">
  38.                 <span>Pièces vélo</span>
  39.                 <div id="see-more">
  40.                     <a href="{{ path('sylius_shop_product_index', {'slug': 'pieces-velo'}) }}">Voir plus</a>
  41.                     <i class="arrow right icon"></i>
  42.                 </div>
  43.             </div>
  44.         </div>
  45.     </div>
  46.     <div class="ui two cards" >
  47.         <div class="ui card" id="category-card-destock">
  48.             <img class="ui fluid image" id="image-card-collection" src="{{ asset('pieces-moto.png', 'shop') }}" alt="Sylius">
  49.             <div class="text-card">
  50.                 <span>Pièces vélo</span>
  51.                 <div id="see-more">
  52.                     <a href="{{ path('sylius_shop_product_index', {'slug': 'pieces-velo'}) }}">Voir plus</a>
  53.                     <i class="arrow right icon"></i>
  54.                 </div>
  55.             </div>
  56.         </div>
  57.         <div class="ui card" id="category-card-bike-responsive">
  58.             <img class="ui fluid image" id="image-card-collection" src="{{ asset('pieces-moto.png', 'shop') }}" alt="Sylius">
  59.             <div class="text-card">
  60.                 <span>Accessoires</span>
  61.                 <div id="see-more">
  62.                     <a href="{{ path('sylius_shop_product_index', {'slug': 'accessoires'}) }}">Voir plus</a>
  63.                     <i class="arrow right icon"></i>
  64.                 </div>
  65.             </div>
  66.         </div>
  67.     </div>
  68. </div>
  69. <style>
  70.     /*#image-card-collection {*/
  71.     /*    height: 318px;*/
  72.     /*    width: 100%;*/
  73.     /*    object-fit: cover;*/
  74.     /*    padding: 1.5rem;*/
  75.     /*}*/
  76.     /*.text-card{*/
  77.     /*    width: 100%;*/
  78.     /*    display: inline-flex;*/
  79.     /*    justify-content: space-between;*/
  81.     /*}*/
  82.     /*.text-card span{*/
  83.     /*    font-size: var(--sm-fz);*/
  84.     /*    font-weight: bold;*/
  85.     /*    text-transform: uppercase;*/
  86.     /*    padding: 1.5rem;*/
  87.     /*    color: white;*/
  88.     /*}*/
  89.     /*#see-more{*/
  90.     /*    display: inline-flex;*/
  91.     /*    align-items: center;*/
  92.     /*    width: fit-content;*/
  93.     /*    gap: 0.5rem;*/
  94.     /*    padding: 1.5rem;*/
  95.     /*}*/
  96.     /*#see-more a{*/
  97.     /*    color: white;*/
  98.     /*    font-size: var(--sm-fz) - 0.5rem;*/
  99.     /*}*/
  100.     /*#see-more i{*/
  101.     /*    color: white;*/
  102.     /*    font-size: var(--xs-fz);*/
  103.     /*    !*font-weight: lighter;*!*/
  104.     /*}*/
  105.     /*#div-collection{*/
  106.     /*    display: flex;*/
  107.     /*    flex-direction: column;*/
  108.     /*    background-color: transparent;*/
  109.     /*    padding-bottom: 4rem;*/
  110.     /*}*/
  111.     /*#div-collection h2{*/
  112.     /*    font-size: var(--md-fz);*/
  113.     /*    font-weight: bold;*/
  114.     /*    text-transform: uppercase;*/
  115.     /*    color: white;*/
  116.     /*    position: relative;*/
  117.     /*    width: fit-content;*/
  118.     /*    padding: 1.5rem 0 !important;*/
  119.     /*    margin-bottom: 4rem !important;*/
  120.     /*    margin-top: 2.5rem;*/
  121.     /*}*/
  122.     /*!*I want a before after to make a border in the left 50% bottom of #div-collection h2*!*/
  123.     /*#div-collection h2::before,*/
  124.     /*#div-collection h2::after*/
  125.     /*{*/
  126.     /*    content: "";*/
  127.     /*    position: absolute;*/
  128.     /*    width: 50%;*/
  129.     /*    height: 5px;*/
  130.     /*    background-color: #E35E31;*/
  131.     /*    bottom: 0;*/
  132.     /*    right: 0;*/
  133.     /*}*/
  135.     /*.ui.card{*/
  136.     /*    background-color: transparent !important;*/
  137.     /*    border: 1px solid white !important;*/
  138.     /*    border-radius: 0 !important;*/
  139.     /*}*/
  140.     /*@media screen and (max-width: 768px){*/
  141.     /*    .ui.card{*/
  142.     /*        width: 100% !important;*/
  143.     /*    }*/
  144.     /*}*/
  145. </style>