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

Open in your IDE?
  1. <div id="header-homepage">
  2.     <img class="ui fluid image" id="image-header-homepage" src="{{ asset('background-homepage.png', 'shop') }}" alt="Sylius">
  3.     <div>
  4.         <h1>
  5.             Bienvenue dans le monde de la moto
  6.         </h1>
  8. {#        form with 1 input#}
  9.         <form action="" method="get" class="ui form" id="form-header-homepage">
  10.             <div class="ui action input" id="input-form">
  11.                 <input type="text" name="codepostal" placeholder="Code Postal " id="form-postalcode">
  12.                 <input type="text" name="criteria" placeholder="Rechercher un produit" id="search-product">
  13.                 <button class="ui button" type="submit" id="button-submit">Rechercher</button>
  14.             </div>
  15.         </form>
  16.     </div>
  17. </div>
  19. <style>
  20.     /*#header-homepage > div {*/
  21.     /*    width: 100%;*/
  22.     /*}*/
  23.     /*#header-homepage h1{*/
  24.     /*    position: relative;*/
  25.     /*    width: 100%;*/
  26.     /*    text-align: center;*/
  27.     /*    z-index: 2;*/
  28.     /*    color: white;*/
  29.     /*    font-size: 40px;*/
  30.     /*    padding-bottom: 2rem;*/
  31.     /*}*/
  32.     /*#header-homepage {*/
  33.     /*    position: relative;*/
  34.     /*    height: 100vh;*/
  35.     /*    width: 100%;*/
  36.     /*    display: flex;*/
  37.     /*    flex-direction: column;*/
  38.     /*    justify-content: center;*/
  39.     /*    align-items: center;*/
  40.     /*    overflow: hidden;*/
  41.     /*    z-index: 0;*/
  42.     /*}*/
  43.     /*#image-header-homepage {*/
  44.     /*    width: 100%;*/
  45.     /*    height: 100%;*/
  46.     /*    object-fit: cover;*/
  47.     /*    object-position: center;*/
  48.     /*    position: absolute;*/
  49.     /*    top: 0;*/
  50.     /*    left: 0;*/
  51.     /*    z-index: 1;*/
  52.     /*}*/
  53.     /*#form-header-homepage{*/
  54.     /*    width: fit-content;*/
  55.     /*    !*max-width: 500px;*!*/
  56.     /*    z-index: 2;*/
  57.     /*    margin: 0 auto;*/
  58.     /*}*/
  59.     /*#form-postalcode{*/
  60.     /*    width: 150px*/
  61.     /*}*/
  62.     /*#input-form{*/
  63.     /*    height: 5rem;*/
  64.     /*    background-color: white;*/
  65.     /*    padding: 0 !important;*/
  66.     /*}*/
  67.     /*#form-header-homepage #search-product{*/
  68.     /*    width: 300px;*/
  69.     /*    border-top-left-radius: 0 !important;*/
  70.     /*    border-bottom-left-radius: 0 !important;*/
  71.     /*}*/
  72.     /*#button-submit{*/
  73.     /*    height: 2.5rem;*/
  74.     /*    margin: auto 1rem;*/
  75.     /*    background-color: #E35E31;*/
  76.     /*    border-radius: 0.5rem;*/
  77.     /*    color: white;*/
  78.     /*}*/
  79. </style>