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

Open in your IDE?
  1. <div class="div-search-product">
  2.     <h4> Articles Récents</h4>
  3.  {#
  4.     <div class="div-form-search">
  5.         <div class="search-title">
  6.             <span>RECHERCHER PAR</span>
  7.         </div>
  8.         <div class="trait divider"></div>
  9.             <form method="POST" class="form-search-product">
  10.                 <div class="div-label-input-search">
  11.                     <label for="category">Categories</label>
  12.                     <select name="category" id="category">
  13.                         <option value="">Tous</option>
  14.                         <option value="voiture">Voiture</option>
  15.                         <option value="moto">Moto</option>
  16.                         <option value="camion">Camion</option>
  17.                         <option value="bateau">Bateau</option>
  18.                         <option value="avion">Avion</option>
  19.                     </select>
  20.                 </div>
  21.                 <div class="div-label-input-search">
  22.                     <label for="brand">Marque :</label>
  23.                     <select name="brand" id="brand">
  24.                         <option value="">-- Sélectionner une marque --</option>
  25.                         <option value="ford">Ford</option>
  26.                         <option value="toyota">Toyota</option>
  27.                         <option value="bmw">BMW</option>
  28.                         <option value="honda">Honda</option>
  29.                         <option value="nissan">Nissan</option>
  30.                     </select>
  31.                 </div>
  32.                 <div class="div-label-input-search">
  33.                     <label for="condition">Type d'occasion :</label>
  34.                     <select name="condition" id="condition">
  35.                         <option value="">-- Sélectionner un type d'occasion --</option>
  36.                         <option value="neuf">Neuf</option>
  37.                         <option value="occasion">Occasion</option>
  38.                         <option value="certifie">Certifié</option>
  39.                         <option value="reconditionne">Reconditionné</option>
  40.                         <option value="garantie">Garanti</option>
  41.                     </select>
  42.                 </div>
  43.                 <div class="div-label-input-search">
  44.                     <label for="model">Modèle :</label>
  45.                     <select name="model" id="model">
  46.                         <option value="">-- Sélectionner un modèle --</option>
  47.                         <option value="mustang">Mustang</option>
  48.                         <option value="corolla">Corolla</option>
  49.                         <option value="serie3">Série 3</option>
  50.                         <option value="civic">Civic</option>
  51.                         <option value="sentra">Sentra</option>
  52.                     </select>
  53.                 </div>
  55.                 <div class="div-button-submit-search">
  56.                     <button type="submit" class="ui button" id="button-submit-search">Rechercher</button>
  57.                 </div>
  58.             </form>
  59.     </div>
  60.  #}
  61.     <div class="divider-evenement"></div>
  62.     {{ render(url('sylius_shop_partial_product_index_latest', {'count': 6, 'template': '@SyliusShop/Homepage/_list.html.twig'})) }}
  63. </div>
  65. <style>
  66.     /*.form-search-product{*/
  67.     /*    display: flex;*/
  68.     /*    flex-direction: row;*/
  69.     /*    justify-content: space-between;*/
  70.     /*    align-items: end;*/
  71.     /*    height: fit-content;*/
  72.     /*}*/
  73.     /*!*.div-search-product{*!*/
  74.     /*!*    margin-top: 4rem;*!*/
  75.     /*!*}*!*/
  76.     /*.div-search-product h4, #div-service h2{*/
  77.     /*    font-size: var(--lg-fz);*/
  78.     /*    font-weight: bold;*/
  79.     /*    text-transform: uppercase;*/
  80.     /*    color: black;*/
  81.     /*    position: relative;*/
  82.     /*    width: fit-content;*/
  83.     /*    padding: 1.5rem 0 !important;*/
  84.     /*    margin-bottom: 0 !important;*/
  85.     /*    margin-top: 4rem;*/
  87.     /*    margin-left: auto;*/
  88.     /*    margin-right: auto;*/
  89.     /*}*/
  90.     /*!*I want a before after to make a border in the left 50% bottom of #div-collection h2*!*/
  91.     /*.div-search-product h4::before,#div-service h2::before,*/
  92.     /*.div-search-product h4::after, #div-service h2::after*/
  93.     /*{*/
  94.     /*    content: "";*/
  95.     /*    position: absolute;*/
  96.     /*    width: 50%;*/
  97.     /*    height: 5px;*/
  98.     /*    background-color: #E35E31;*/
  99.     /*    bottom: 0;*/
  100.     /*    left: 25%;*/
  101.     /*}*/
  102.     /*.div-form-search{*/
  103.     /*    !*height: 300px;*!*/
  104.     /*    width: 100%;*/
  105.     /*    background-color: black;*/
  106.     /*    padding: 2rem 3rem 3rem 3rem;*/
  107.     /*    margin: 4rem 0;*/
  108.     /*}*/
  109.     /*.search-title{*/
  110.     /*    width: 100%;*/
  111.     /*    color: white;*/
  112.     /*    font-size: var(--sm-fz);*/
  113.     /*}*/
  114.     /*.div-label-input-search{*/
  115.     /*    display: flex;*/
  116.     /*    flex-direction: column;*/
  117.     /*    justify-content: center;*/
  118.     /*    align-items: start;*/
  119.     /*    color: white;*/
  120.     /*    gap: 1rem;*/
  122.     /*}*/
  123.     /*.div-label-input-search label{*/
  124.     /*    font-size: var(--sm-fz) - 0.2rem;*/
  125.     /*    font-weight: bold;padding-left: 0.5rem;*/
  126.     /*}*/
  127.     /*.trait.divider{*/
  128.     /*    width: 100%;*/
  129.     /*    height: 1px;*/
  130.     /*    background-color: white;*/
  131.     /*    margin: 1rem 0;*/
  132.     /*    opacity: 0.3;*/
  133.     /*}*/
  134.     /*.div-label-input-search select{*/
  135.     /*    width: 270px;*/
  136.     /*    height: 50px;*/
  137.     /*    border: none;*/
  138.     /*    padding: 1rem;*/
  139.     /*}*/
  140.     /*#button-submit-search{*/
  141.     /*    padding: 1rem;*/
  142.     /*    background-color: #E35E31;*/
  143.     /*    color: white;*/
  144.     /*    border-radius: 0;*/
  145.     /*    height: 50px;*/
  146.     /*}*/
  147.     /*.div-button-submit-search{*/
  148.     /*    display: flex;*/
  149.     /*    !*justify-content: center;*!*/
  150.     /*    align-items: end;*/
  151.     /*    height: 100%;*/
  152.     /*}*/
  153.     /*.divider-evenement {*/
  154.     /*    width: 100%;*/
  155.     /*    height: 4rem;*/
  156.     /*    background-color: transparent;*/
  157.     /*}*/
  159. </style>